余計な説明は無しで進めるJavaScript超入門の2回目は、足し算・引き算・掛け算・割り算の四則演算および文字列についてお伝えするよ。
四則演算の方法
JavaScriptの足し算と引き算は、数学と同じように + や - 等の記号で計算を行う。
足し算： 数値 + 数値
引き算： 数値 - 数値
掛け算と割り算は、キーボードで ×（掛ける。エックスではない）と ÷ を漢字変換無しで入力できないから、かわりに * と / を使用する。
掛け算： 数値 * 数値
割り算： 数値 / 数値
実際に使ってみよう。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ページタイトル</title>
<script>
(()=>{
console.log( 100 + 10 );
console.log( 100 - 10 );
console.log( 100 * 10 );
console.log( 100 / 10 );
})();
</script>
</head>
<body>
</body>
</html>
上のコードをブラウザで開くと、デバッグコンソールに次のような結果が表示されるよ。
110
90
1000
10
ブラウザで開く方法は、第一回目を見てね。
今回は整数で計算したけれど、小数も使えるからやってみてね！
この他に、次の計算もできるよ。
余り： 数値 % 数値
べき乗： 数値 ** 数値
計算の順序を変える
数学では、計算の順序が決まっているよね。
例： 100 + 5 * 2
これは、5 と 2 を掛け算してから 100 を足すんだ。これは、JavaScriptでも同じだよ。
でも、100 + 5 の後に 2 を掛けたい時もあるよね。そのときは、( ) を使うよ。
例： ( 100 + 5 ) * 2
JavaScriptで実行してみよう。
<script>
(()=>{
console.log( 100 + 5 * 2 );
console.log( ( 100 + 5 )* 2 );
})();
</script>
次のような結果になるよ。
110
210
文字列の表示
JavaScriptで文字を扱うときは、文字を " (ダブルコーテーション）または ' (シングルコーテーション）で囲むんだ。
<script>
(()=>{
console.log( "Hello JavaScript!!" );
console.log( 'Hello JavaScript!!' );
})();
</script>
どちらも同じ結果になるよ。
Hello JavaScript!!
Hello JavaScript!!
ダブルコーテーションとシングルコーテーションは、どちらを使うという決まりはないから好きにしていいよ。
ただし、ダブルコーテーションとシングルコーテーションを文字として扱うときは、少し注意が必要なんだ。
次の使い方は問題無い。
ダブルコーテーションの中にシングルコーテーション：" ' "
シングルコーテーションの中にダブルコーテーション：' " '
だけど、同じコーテーションを使うときは、\を使用しないといけないんだ。
ダブルコーテーションの中にダブルコーテーション：" \" "
シングルコーテーションの中にシングルコーテーション：' \' '
\は、使っているパソコンの種類で表示が変わるよ。Windowsなら ￥、その他は ＼（バックスラッシュ）なんだ。でも、Windowsでもバックスラッシュで表示されることがあるから、混乱しないようにね。
文字列と足し算
数値の計算方法をお伝えしたけれど、文字列は足し算を使えるんだ。
文字列に足し算を使うと、連結して一つの文字として扱えるよ。
<script>
(()=>{
console.log( "Hello" + " " + "JavaScript!!" );
})();
</script>
次のような結果になるよ。
Hello JavaScript!!
数値と文字列の足し算
数値と文字列を足し算すると、数値を数値文字列に変換した後に、文字列と結合されるよ。
(()=>{
console.log( 100 + "Hello JavaScript!!" );
console.log( "Hello JavaScript!!" + 100);
})();
</script>
100が "100" に変換されて、"Hello JavaScript!!"と連結されるんだ。
次のような結果になるよ。
100Hello JavaScript!!
Hello JavaScript!!100
JavaScriptでよくある失敗は、数値文字列と数値を足し算することなんだ。
<script>
(()=>{
console.log( 100 + 100 );
console.log( 100 + "100" );
})();
</script>
次の結果になるよ。
200
100100
プログラムコードが複雑になってくると、気が付かないうちにやってることがあるから注意してね。
補足：JavaScriptは小数計算が苦手
JavaScriptだけでなく、多くのプログラミング言語は浮動小数点数という仕組みで数値を扱っているよ。
小数という言葉が入ってるけれど、整数も浮動小数点数だよ。
浮動小数点数は、小数の計算が苦手なんだ。
<script>
(()=>{
console.log( (0.1+0.7) * 10 );
})();
</script>
Math.floor()は、小数点以下を切り捨てる命令だよ。
結果を予想すると、8になるよね。
でも実際は、次のようになるよ。
7.999999999999999
少し足りないね！
浮動小数点数は、仕組み上、正確な小数を表すことが難しんだ。
ブラウザのコンソールに、次の計算式を入力してみて。
> (0.1).toFixed(20)
toFixed()は、数値を指定した桁数で文字列に変換する命令だよ。
次のように表示されるよ。
← "0.10000000000000000555"
後ろの方に余計な数字があるね。つまり、正確な値ではないってことなんだ。
0.7も同じように確認するよ。
> (0.7).toFixed(20)
← "0.69999999999999995559"
0.10000000000000000555 と 0.69999999999999995559 を足すと、0.79999999999999996114 だね。
実際に計算してみるよ。
> (0.1+0.7).toFixed(20)
← "0.79999999999999993339"
同じではないね！
次は10倍するよ。
> (0.1+0.7).toFixed(20)
← "7.99999999999999911182"
8ではなくて、7.9になったね！
計算で値がズレることを計算誤差と呼んでるよ。
今回は少しの誤さだけど、何回も繰り返したら大きな誤差になるんだ。
だから、小数を含む計算で正確な値が必要な時は、ここでは語り尽くせない、それなりの知識を身につける必要があるよ。
