今回はJavaScriptでの数学的処理についてです。上手く数値を操作するのにどのような演算子や、機能を使用するのか見ていきましょう。

前提条件: 基本的なコンピュータの知識、HTMLとCSSの基本についての理解、JavaScriptが何かが分かっていること。
目的: JavaScriptでの基礎的な数値処理に慣れる。

みんな大好き数学

まあ、みんなではないですね。好きな人もいれば、九九や長い数字の割り算が出てきてから嫌いになってしまった人もいるでしょう。どちらでもない人も。けれど数学が生活に必要なものであるということは、否定することは出来ません。特にJavaScriptのプログラミングを学習してならば、なおさらです。数値データを処理したり、計算をしたりすることが多いので、JavaScriptに数学的な関数が十分にそろっていることは、驚くことではありません。

この記事ではまず知っておくべき基礎的なものに絞って見ていきます。

数値の種類

プログラミングをしていると、慣れ親しんだ普通の数値ですら難しいと思えるかもしれません。数値と言ってもいくつか種類があり、それぞれ名前を付けて区別しています。

  • 整数(integer)とは10、400、-5といった数値のことです。
  • 浮動小数点数(float)とは小数以下の数と小数桁を持つ12.5や56.7786543といった数値のことです。
  • 倍精度浮動小数点数(double)は浮動小数点数ですが、通常の精度よりも大きな数値です。 (つまりより大きな数を表すことができます。)

さらに通常とは異なる数値表現も使います!今まで出てきた数値は10を基数 (0~9を1つの桁として扱う) とした十進数でしたが、他にも以下のようなものがあります。

  • 二進数 — 0と1だけ使う、コンピューターの言葉です。
  • 八進数 — 8を基数として、1桁を0~7で表します。
  • 十六進数 — 16を基数として、1桁を0~9、a~fで表します。もしかしたらCSSの色を設定するときに見たかもしれませんね。

脳みそが溶けそうだ、と思う前に少し待ってください!まず、この講座では十進数しか扱いません。それに「もしかすれば」ですが、他の数値表現について考える機会は訪れないということだってあり得ます。

さらにちょっといいことを教えましょう。他のプログラミング言語とは違い、JavaScriptには数値を表すデータが一つしかありません。わかりますか?Number(数値)です。つまり、JavaScriptでどんな数値を扱おうとも、すべて同じように扱うことが可能なのです!

すべてが「Number」に見えるよね

書き方の復習を兼ねてちょっと数字で遊んでみましょう。以下に示すコマンドを開発者ツールのJavaScriptコンソール入力してみましょう。もちろんこのページに埋め込みのコンソールを使っても構いません。

新しいウィンドウで開く

  1. まず、変数を2つ宣言して、それぞれ整数と浮動小数で初期化してみましょう。そして、変数の名前を入力して、期待通りに値が入っていることを確認してみましょう。
    var myInt = 5;
    var myFloat = 6.667;
    myInt;
    myFloat;
  2. 数値にはクォーテーションマークが不要です。次に進む前にもう少し変数の宣言と初期化をしてみてください。
  3. さて、それでは上で入力した2つの変数が同じデータ型であるか確認してみましょう。JavaScriptでは、typeof という演算子を使用することで、データ型を確認することができます。次の2行を入力してみましょう。
    typeof myInt;
    typeof myFloat;
    どちらの変数についても "number" という文字が戻ってきましたね。もし、別々の数値型が存在しているとすれば、別々に処理しなければならないので、そう考えるととても簡単に思えますよね!

算術演算子

算術演算子は計算をするのに使用する最も基本的な演算子です。

演算子 名前 目的
+ 加算 左辺と右辺を足す。 6 + 9
- 減算 左辺より右辺の数を引く。 20 - 15
* 乗算 左辺と右辺を掛ける。 3 * 7
/ 除算 左辺の数値を右辺で割る。 10 / 5
% 剰余 

左辺を右辺で割った余りを求める。

11 % 3 (11を3で割ったとき、商3余り2の2ですね)

: 演算子(オペレーター)に必要とされる数のことをオペランドと呼ぶことがあります。

算数と同じですが書き方が少し違いますね。書き方を覚えるため、以下に示す例を開発者ツールのJavaScripコンソールか、先ほどの埋め込みのコンソールに入力してみましょう。

  1. まずは次のような簡単な例を自分で試してみてください。
    10 + 7
    9 * 8
    60 % 3
  2. そして、変数を宣言して初期化し、数を変数に格納します。それから変数を使って計算してみましょう。変数は計算するにあたり、値がそこにあるかのように使えます。
    var num1 = 10;
    var num2 = 50;
    9 * num1;
    num2 / num1;
  3. それではさらに難しい計算式を入力してみましょう。
    5 + 10 * 3;
    num2 % 9 * num1;
    num2 + num1 / 8 + 2;

最後の例の中に予想した結果と違う答えがありませんでしたか。次の章でなぜそうなったかを説明してみましょう。

演算子の優先順位

先ほどの計算式の一番最後の例を見てみましょう。num2 に50、num1 に10が格納されているものとします。(最初はそうでしたよね。)

num2 + num1 / 8 + 2;

人間は、先に「50 + 10 = 60」と「8 + 2 = 10」を先に計算して、その後で「60 ÷ 10 = 6」となるように計算するかもしれません。

けれどもブラウザーは「10 ÷ 8 = 1.25」を先に計算してから「50 + 1.25 + 2 = 53.25」を計算します。

なぜなら演算子には優先順位があるからです。ある演算子は (プログラムの式によっては) 他の演算子よりも先に実行されます。JavaScriptの演算子の優先順位は算数の授業で教わったものと同じです。つまり、乗算除算は加算減算よりも常に先に実行されます。(通常の計算は常に左から右に実行されます。)

もし、演算子の優先順位を変更したいならば、先に実行したい部分を括弧 (()) を使って囲みます。もし先ほどの例で6が答えになるようにしたいなら次のようにします。

(num2 + num1) / (8 + 2);

やってみてください。

: JavaScriptの演算子とその優先順位については式と演算子で確認することができます。

インクリメント演算子とデクリメント演算子

たまに、繰り返し値を足したり引いたりしたいときがあるでしょう。そんなときに便利なのがインクリメント演算子 (++) とデクリメント演算子 (--) です。もう既に、JavaScriptへの最初のダイブに出てくる「数字当てゲーム」で、ユーザーの残り予想回数を求めるために使用する guessCount 変数に1を加えるのに ++ を使用しましたね。

guessCount++;

: この演算子は また今度説明する、繰り返し処理でよく使用します。例えば、価格のリストがあって、それに対して掛かる税金を各要素に足していきたいとします。恐らく繰り返し処理を使用して、それぞれの価格に対して必要な計算をすることになるでしょう。そのときに、次の値に移動するためインクリメント演算子を使用します。どのようにするかをお見せするための簡単な例についてデモで用意したので、デモに触れて、そのソースを見てインクリメント演算子の動きを確認してみてください。繰り返しについてはコースの後のほうで詳しく見ることになります。

それでは、コンソールで試してみましょう。ただし、その前に注意点です。この演算子は数値には直接使用できません。変に思えるかもしれませんが、これは対象の値そのものに作用するわけではなく、変数に対して新しい値を代入するのです。次の例はエラーになります。

3++;

既に存在する値に対してのみインクリメントすることができます。

var num1 = 4;
num1++;

また変なことが起きましたね!上のコードを実行したとき「4」がコンソールに表示されました。これはブラウザーが現在の値を先に返して、その後にインクリメントを実行したためです。もう一度変数を入力してみると、変数がインクリメントされていることがわかります。

num1;

それは -- 演算子についても同様です。以下のコードも試してみてください。

var num2 = 6;
num2--;
num2;

: 変数の前に演算子を置くことで、ブラウザーにインクリメントまたはデクリメントを先にさせてから値を戻すようにすることもできます。上記の例に戻って今度は ++num1 や --num2 のように入力してみてください。

代入演算子

代入演算子は変数に値を代入します。すでに一番基本的な = 演算子を何度も使用しています。この演算子は単に左辺に記述された値を右辺に代入します。

var x = 3; // xには3が入る
var y = 4; // yには4が入る
x = y; // xにはyと同じ値:4が入る

ただし、コードを簡潔に効率よく書くための、もっと複雑な方法が用意されています。よく見かけるものを以下に示します。

演算子 名前 目的 同様なコード
+= 加算代入 右辺の値を左辺の変数に加算してから、新しい値を返します x = 3;
x += 4;
x = 3;
x = x + 4;
-= 減算代入 右辺の値を左辺の変数より減算してから、新しい値を返します x = 6;
x -= 3;
x = 6;
x = x - 3;
*= 乗算代入 左辺の変数に右辺の値を乗算してから、新しい値を返します x = 2;
x *= 3;
x = 2;
x = x * 3;
/= 除算代入 左辺の変数に右辺の値を除算してから、新しい値を返します x = 10;
x /= 5;
x = 10;
x = x / 5;

どのように動いているか理解するため、コンソールに上記の例をいくつか入力してみましょう。どの例も、2行目を入力する前にコードがどのようになるかを予想してから入力しましょう。

ちなみに、どの演算子も右辺には自由に変数を置くことができます。例えば以下のように。

var x = 3; // xには3が入る
var y = 4; // yには4が入る
x *= y; // xは12になる

: もっとたくさんの代入演算子がありますが、とりあえず今は基本的なものだけ知っておけばよいでしょう。

主体的学習: Canvasのボックスのサイズを変更する

練習として、数値と演算子を使用してボックスのサイズを変更してみましょう。ブラウザーのCanvas APIを使用してボックスを描きます。どうやって描くかは気にする必要はありません。今は気にする必要はありません。計算に集中しましょう。ボックスの幅と高さ (ピクセル単位で) 変数 xy で宣言しています。最初は50になっています。

新しいウィンドウで開く

上の編集可能なコードには、変更すべき2つの行にコメントが書かれています。その行を適切な演算子および値を用いて変更し、拡大縮小させてください。それではやってみましょう。

  • ボックスの幅を50pxとしたままxの値を求める行を変更してください。ただし、50を43と7、算術演算子を一つ使って演算によって求めてください。
  • ボックスの高さを75pxになるようyの値を求める行を変更してください。ただし、75を25と3、算術演算子を一つ使用して演算によって求めてください。
  • ボックスの幅を250pxになるようにxの値を求める行を変更してください。ただし、250は2つの数値と、剰余演算子を使用して演算によって求めてください。
  • ボックスの高さを150pxになるようにyの値を求める行を変更してください。ただし150は3つの数値と減算演算子および除算演算子を使用して演算によって求めてください。
  • ボックスの幅が200pxになるようにxの値を求める行を変更してください。ただし200は4と代入演算子を一つ使用して演算によって求めてください。
  • ボックスの高さが200pxになるようにyの値を求める行を変更してください。ただし200は50と3と乗算演算子、加算演算子を使用して求めてください。

コードを完全に壊してしまっても大丈夫です。いつでもリセットボタンを押すことで何度でも最初から実行できます。上の問題に全問正解したら、もう少し遊んでみてもいいですし、自分で問題を作ってみてもいいですね。

比較演算子

ときには、trueまたはfalseを判定し、その結果により動作を変更したいと思う時があるでしょう。そのようなことをするために比較演算子を使用します。

演算子 名前 目的
=== 厳密な等価 右辺と左辺が厳密に同一の値であるかを判定します 5 === 2 + 4
!== 厳密な不等 右辺と左辺が厳密に同一の値ではないことを判定します 5 !== 2 + 3
< 小なり 左辺の値が右辺の値より小さいこととを判定します 10 < 6
> 大なり 左辺の値が右辺の値より大きいことを判定します 10 > 20
<= 以下なり 左辺の値が右辺の値以下であることを判定します 3 <= 2
>= 以上なり 左辺の値が右辺の値以上であることを判定します 5 >= 4

: もしかしたら == や != といった演算子を同値かどうかの判定に使用する人を見かけることがあるかもしれません。これらもJavaScriptの有効な演算子ですが、=== や !== とは異なります。前者のバージョンは値が同様であるかを判定しますが、データ型が同様かは判定しません。後者は厳格なバージョンで値とデータ型の両方を判定します。厳格なバージョンはエラーとなることが少ないため後者を使用することをお勧めします。

もし、これらの値をコンソールに入力したら、すべて true または false の値を返します。これは前回の記事で言及した、真偽値です。真偽値はとても便利です。コードで判断をすることを可能にしてくれます。また選択肢を選ぶときには毎回使うことになるでしょう。例えば以下のような場合に。

  • 機能が使用可能かどうかに応じてボタンに表示するテキストを変更する
  • 負けた時にゲームオーバー、勝った時に勝利のメッセージを表示する
  • 時候のあいさつを時期に応じて表示する
  • 選択されたズームレベルに応じて地図を拡大する

後学のため、どのようにそのようなロジックをコーディングするのか、とりあえずの簡易な例で見てみましょう。

<button>起動する</button>
<p>マシンは停止中です。</p>
var btn = document.querySelector('button');
var txt = document.querySelector('p');

btn.addEventListener('click', updateBtn);

function updateBtn() {
  if (btn.textContent === '起動する') {
    btn.textContent = '停止する';
    txt.textContent = 'マシンが起動しました!';
  } else {
    btn.textContent = '起動する';
    txt.textContent = 'マシンは停止中です。';
  }
}

新しいウィンドウで開く

等価演算子が updateBtn() 関数の中で使用されていることがわかりますね。今回の場合は数値が同じ値かを判定するためには使用していません。ボタンの内容として設定されている文字列が、特定の文字列であるかどうかを比較しています。ただし、原理的には同じ働きです。もしボタンに「起動する」と書かれていれば、押されたときにボタンのラベルが「停止する」に代わります。もしボタンに「停止する」と書かれていれば、再度入れ替わって元に戻ります。

: 2つの状態を行き来するこのような操作を一般的にトグルといいます。スイッチのON/OFFのように、ある状態がもう一つの状態にトグル (切り替え) するといいます。

まとめ

この記事では、JavaScriptの数値処理で知っておくべき基礎的なことを学びました。JavaScriptを学習する間、今後も繰り返し数値を扱うことになるで、しっかりと復習しておきましょう。数学が好きではなくとも、この章は短いので安心して (復習して) ください。

次の章では文字列と、文字列をJavaScriptで操作する方法について見ていきます。

: もし数学が好きで、JavaScriptにどう実装されているかをもっと知りたいのであれば、MDNのJavaScriptのメインの章に詳細がたくさん載っています。まずは数値と日付式と演算子辺りの記事から読むのがいいでしょう。

このモジュール内

ドキュメントのタグと貢献者

 このページの貢献者: chameleonhead, Uemmra3
 最終更新者: chameleonhead,