JavaScriptで数値と算術演算子を使う方法【初心者向け】
JavaScriptで【数値と算術演算子】を使う方法をプログラミング初心者向けに解説した記事です。加算（たし算）、減算（引き算）など基礎的な部分から解説。応用した、代入演算子・単項演算子もサンプルコードを使って説明しています。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
JavaScriptの使い方を初心者向けに紹介した記事です。
今回は、JavaScriptで数値と算術演算子を使う方法について解説します。
また、入門向けのJavaScriptを学習できるサイトも紹介しているので、合わせてご覧ください。
本記事では、テキストエディタのmiを使っていますが、JavaScriptの場合はWebブラウザとテキストエディタがあれば特別な開発環境がなくても開発することができます。
なお本記事は、オンラインブートキャンプ フロントエンドコース（JavaScript・jQuery講座）の内容をもとにしています。
今回の記事の内容は動画でもご覧いただけます。
テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。
目次
田島メンター！算術演算子は、足し算・引き算に使う記号のことですよね？代入演算子や単項演算子って何でしょうか？
代入は、左にある変数に、右の値や変数の値を入れるってことで、単項演算子は、インクリメントやデクリメントと言って、値を1増やしたり減らしたりする特殊な記号なんだ。
その２つはプログラミング特有の処理なんですか？
そう言えると思うよ。四則計算についても、普段使う記号と違う記号が使われていたりするんだ。さっそく書き方を見てみよう！
算術演算子とは
JavaScriptでは、数値を計算して出力することができます。その計算に用いるのが算術演算子です。
算術演算子には、「加算（足し算）」「減算（引き算）」「乗算（掛け算）」「除算（割り算）」「剰余（あまり）」などがあり、それぞれ「+、–、*、/、%」を使います。
実際に出力してみよう
JavaScriptで変数をxとし、実際に加算の計算をして数値を出力してみましょう。
加算
<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”utf-8″>
<title>はじめてのJavaScript</title>
</head>
<body>
<script>
var x ;
x = 10 + 2;
document.write(x);
</script>
</body>
</html>
ブラウザでは、10+2の加算結果である12が出力されました。
ほかの算術演算子も同様にやってみましょう。
減算
<script>
var x ;
x = 10 – 2;
document.write(x);
</script>
乗算
<script>
var x ;
x = 10 * 2;
document.write(x);
</script>
乗算の「かける」は×ではなく「*」を使うので注意しましょう。
除算
<script>
var x ;
x = 10 / 2;
document.write(x);
</script>
除算の「割る」は÷ではなく「/」を使うので注意しましょう。
剰余
<script>
var x ;
x = 10 % 3;
document.write(x);
</script>
剰余では余りが出力されます。10÷3は3余り1ですので、今回は1が出力されました。
代入演算子
また、場合によっては x = x + 10; のように両項に同じ変数が含まれるときがあります。そのときは、代入演算子を使うと便利でしょう。
代入演算子ではたとえば、x = x + 10; という加算は x += 10; と短く書くことができ、それぞれ次のようになります。
- 加算 x = x +10; → x += 10;
- 減算 x = x -10; → x -= 10;
- 乗算 x = x *10; → x *= 10;
- 除算 x = x /10; → x /= 10;
- 剰余 x = x %10; → x %= 10;
上の、剰余の続きからやってみましょう。
<script>
var x ;
x = 10 % 3; //1
x += 10;
document.write(x);
</script>
剰余によって出された x = 1 が x += 10; に代入され、11が算出されました。
コスパとタイパ、両方結果的に良くなる良くなる学び方とは？
「スクールは高いし時間も縛られて効率が悪い」と考える方は多いと思います。
もちろん、時間も費用もかかることは間違いありません。
ただ
結果的に無駄な学びにお金も時間もかける方がリスクが高いという考えもあります。
コスパ・タイパ最適化の参考として、
テックアカデミー卒業生がスクールを選んだ理由
をご紹介します。
- ・困ったときに、質問や相談できる相手がいるため挫折しなかった
- ・プロとして必要なスキルのみを深く学べたので無駄がなかった
- ・副業案件の提供と納品までのサポートがあったので目的を達成できた
安価・短期間で広く浅く学んでも意味がありません。
本当に自分の目的が達成できるか、それが重要です。
自分にどのスキルや学び方が合っているか、どんな学習方法かなど、お気軽に
無料相談
に参加してみませんか？
カウンセラー・現役のプロへ、何でも気軽に無料相談可能。
30分か60分お好きな時間が選べて、かつ3回まで
すべて無料で
ご利用できます。
無理な勧誘は一切ない
ので、お気軽にご参加ください。
単項演算子
最後は、単項演算子です。単項演算子には「++（1ずつ足していく）」、「- -（1ずつ引いていく）」があります。
代入演算子の続きからやってみましょう。
<script>
var x ;
x = 10 % 3; //1
x += 10; //11
x++;
document.write(x);
</script>
11に1が足され、12になりました。
1ずつ引きたいときは次のようになります。
<script>
var x ;
x = 10 % 3; //1
x += 10; //11
x- -;
document.write(x);
</script>
これで11から1が引かれ、10になりました。
今回の記事は以上です。
JavaScriptの基礎となるので、覚えておきましょう。
JavaScriptの他にPHPの算術演算子についての記事もあるので、合わせてご覧ください。
割り算が/(スラッシュ)、掛け算が*(アスタリスク)になってますね。
普通に使う記号と違うから注意が必要だね。
%(パーセント)って割った数の余り、が出てくるんですけど、何に使うんですか？
割った数の余りで、法則のようなものが出来るんだよね。主にゲームとか、画像チップの選択とかで使用するのが多いね。
[お知らせ]TechAcademyではJavaScriptを使ってWebサービスを公開できるオンラインブートキャンプ フロントエンドコース（JavaScript・jQuery講座）を開催しています。プログラミングの初心者でも受講可能です。
プログラミングを独学で学習していて、このように感じた経験はないでしょうか？
- ・調べてもほしい情報が見つからない
- ・独学のスキルが実際の業務で通用するのか不安
- ・目標への学習プランがわからず、迷子になりそう
テックアカデミーでは、このような
学習に不安を抱えている方へ、マンツーマンで相談できる機会を無料で提供
しています。
30分間、オンラインでどんなことでも質問し放題です。
「受けてよかった」と感じていただけるよう
カウンセラーやエンジニア・デザイナー
があなたの相談に真摯に向き合います。
「自分に合っているか診断してほしい」
「漠然としているが話を聞いてみたい」
こんなささいな悩みでも大丈夫です。
無理な勧誘は一切ありません
ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）
