JavaScript超入門② 変数・型・計算を覚えよう
let、const、数値、文字列、真偽値、テンプレートリテラル、主な演算子を学びます。
「150円の品物を3個買う」とき、150 * 3と書けば合計は求められます。でも、その数字が何の値なのかは、コードだけだと分かりにくいですよね。
そこで変数へ名前を付けます。今回は、値を変えるletと変えないconst、数と文字の違いを整理し、合計金額を表示します。
コード例は1つずつ別に試してください。ブラウザのコンソールで同じconst名を繰り返し宣言してエラーが出たら、練習ページを再読み込みしてから実行します。
1. constで値へ名前を付ける
const price = 150;
const count = 3;
const total = price * count;
console.log(total);結果は450です。priceが価格、countが個数、totalが合計になっています。
const price = 150;を分けると、constが宣言、priceが名前、150が最初の値です。=は右側の値を左側の変数へ結び付ける代入に使う記号で、数学の等号と同じ働きではありません。
名前はtotalPriceのように意味が伝わるものにします。2priceのように数字から始めたり、途中に空白を入れたりはできません。
2. 後から値を代入し直すならlet
let score = 80;
score = 90;
console.log(score);結果は90です。scoreの値を変更する予定があるのでletを使っています。
let count = 3;
count = count + 1;
console.log(count);右側のcount + 1で4を求め、その結果を左側へ代入するので4になります。count += 1;や、1増やすだけならcount++;とも書けます。
constは「中身が何でも完全に固定」ではない
constは同じ名前へ別の値を再代入できない宣言です。配列やオブジェクトを入れた場合、その中の要素まで自動で変更禁止になるわけではありません。
例えばconst scores = [80]; scores.push(90);はできます。配列を別の配列へ入れ替えるscores = [];はできません。この違いは配列の回で改めて扱います。
迷ったらconstを基本にし、再代入が必要なものだけletへする方が、値の変化を追いやすくなります。
3. 数値と文字列は、見た目が似ていても別物
console.log(5 + 2);
console.log("5" + "2");
console.log("5" + 2);7
52
52引用符のない5は数値、"5"は文字列です。+は、文字列が関わると文字をつなぐ動きになります。
「足し算のはずなのに52？」というときは、計算式より先に型を確認しましょう。型はデータの種類です。
| データ | 型・役割 | 例 |
|---|---|---|
| 数値 | number | 18、2.5 |
| 文字列 | string | "Aoi"、"18" |
| 真偽値 | boolean | true、false |
| 明示した値なし | null | null |
| 値が未設定など | undefined | let answer;のanswer |
JavaScriptの通常のnumberは整数と小数の両方を扱います。大きな整数用のBigIntなどもありますが、この回では使いません。
typeofで確認する
console.log(typeof 18);
console.log(typeof "18");
console.log(typeof true);
console.log(typeof undefined);順にnumber、string、boolean、undefinedです。
ただしtypeof nullは歴史的な理由で"object"を返します。nullかどうかを調べたい場合はvalue === nullを使います。typeofだけで全部を判別できると思わないことがポイントです。MDNの文法とデータ型でも確認できます。
4. テンプレートリテラルで、文章へ値を入れる
const name = "Aoi";
const score = 80;
console.log(`${name}さんは${score}点です`);表示はAoiさんは80点ですです。
ここではダブルクォーテーションではなく、バッククォートという記号で囲みます。その中の${score}の位置へ、変数の値が入ります。この書き方がテンプレートリテラルです。
"Aoiさんは" + score + "点です"のように連結もできますが、変数が複数ある文章ではテンプレートリテラルが読みやすくなります。
"${score}点"と普通の引用符で囲むと、変数の値に置き換わらず、その記号が文字として出ます。うまく表示されなければ、まず両端の記号を見ましょう。
5. 計算は、小さな例で結果を確かめる
| 記号 | 意味 | 例 |
|---|---|---|
+ |
足し算 | 7 + 2 → 9 |
- |
引き算 | 7 - 2 → 5 |
* |
掛け算 | 7 * 2 → 14 |
/ |
割り算 | 7 / 2 → 3.5 |
% |
余り | 7 % 2 → 1 |
** |
べき乗 | 7 ** 2 → 49 |
JavaScriptのnumber同士なら、7 / 2は3.5です。CやC++のint同士の割り算と混同しないようにしましょう。
掛け算は足し算より先です。(100 + 50) * 3なら、かっこの中を先に計算するので450になります。
小数はぴったり保存できない場合がある
0.1 + 0.2は、一般的なJavaScript環境で0.30000000000000004になります。numberが小数を近似して扱うためです。
円単位の練習なら整数で扱うと、このずれを避けやすくなります。ただし整数も無制限ではなく、正確に扱える範囲には限りがあります。
6. 入力した数字は、まず文字列として来る
ブラウザのpromptは、入力欄を表示して文字列を受け取る機能です。キャンセルするとnullになります。
const input = prompt("個数を入力してください");
if (input === null || input.trim() === "") {
console.log("入力を中止しました");
} else {
const count = Number(input);
if (Number.isInteger(count) && count >= 0 && count <= 100) {
console.log(`次は${count + 1}個です`);
} else {
console.log("0から100の整数を入力してください");
}
}3を入力すると、次は4個ですと表示されます。promptはブラウザ用なので、Node.jsで同じ例をそのまま動かしてもpromptは標準では使えません。
ifは次回で学びます。ここでは「入力を確認してから計算する」流れを見てください。
Numberは、失敗したらどうなる？
Number("5")は数値5ですが、Number("abc")はNaNになります。NaNは数値として表せない結果を示す特別な値です。
さらにNumber("")やNumber(null)は0です。だから先に空欄とキャンセルを分けているんですね。trim()は前後の空白を取り除く文字列の操作です。
小数も受け付ける入力ならNumber.isFiniteで有限な数か確認します。今回は個数なのでNumber.isIntegerを使っています。MDNの有限数の確認も参考になります。
7. 練習：商品の合計金額を文章で表示する
価格350円、個数3個として、テンプレートリテラルで合計を表示してください。
模範解答
const price = 350;
const quantity = 3;
const total = price * quantity;
console.log(`合計金額は${total}円です`);解説
350 × 3でtotalは1050になり、合計金額は1050円ですと出ます。途中で再代入しないため、3つともconstです。
個数だけを4へ変えた場合の答えは1400円です。ファイルを変更して再実行すれば計算し直しますが、すでに計算したtotalがあとから自動で更新される仕組みではありません。
値の種類が怪しいときは、console.log(typeof quantity);で確認しましょう。文字列の"3"を使って偶然掛け算できても、暗黙の変換へ頼らず、数として扱う値は明示的にそろえる方が安心です。
次の一歩
変数は「名前の付いた値」、型は「その値の種類」、代入は「右で求めた値を左へ入れる操作」です。この3つを分けると、予想外の計算結果も調べやすくなります。