準備
まずは準備から入りましょう。以下の作業は新しいチャプターを始めるたびに行います。細かく説明するのは今回までですので、わからなくなったら本チャプターを参照してください。
本書の勉強用フォルダの下に、本チャプターの作業フォルダ「02」を作成してください。VSCode を起動して、ファイル
メニューから フォルダを開く…
を選択して、作成したフォルダ 02
を開きます。
次に、ファイルを新規作成(Ctrl+N
)し、以下のコードをコピー&ペースト(Ctrl+C
Ctrl+V
)して、「index.html」という名前で保存(Ctrl+S
)してください。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Chapter 02: 定数/変数と演算</title>
</head>
<body>
<p>Hello World!!</p>
<script src="script.js"></script>
</body>
</html>
同様にして「script.js」も作成します。Ctrl+N
(ファイルの新規作成) → Ctrl+C
(コピー) → Ctrl+V
(ペースト) → Ctrl+S
(保存)です。
console.log('Hello World!!');
以上の作業で、本チャプターの作業用フォルダの下に index.html
と script.js
が作成されています。エクスプローラ等でフォルダを確認してみてください。
Chrome ブラウザーを起動してから、VSCode の右下のGo Live
をクリックしてライブプレビュー機能を呼び出しましょう。ブラウザーに「Hello World!!」という文が表示されるかと思います。
script.js
のほうに書かれている console.log(...)
はブラウザーのコンソールに「...」の部分(引数)を表示する命令でした。右クリックから「検証」を選ぶか F12
キー(Mac では ⌥ + ⌘ + I
)を押して開発者ツールの[Console タブ]を開きます。そこに「Hello World!」と表示されていれば OK です。
なお、CodePen を使用する場合は、HTML と JS の小画面にはそれぞれ以下の部分を記述します。
<p id="message">Hello World!!</p>
console.log('Hello World!!');
演算
では、console.log()
メソッドを使って少しプログラミングらしいことをしてみましょう。計算をしてみます。「Hello World!!」の部分を次のように書き換えてみてください。//
から後ろはコメントになります(プログラムコードとして実行されません)。
console.log(10 + 5); // → 15
ライブプレビューを使用している人は、script.js
を保存した瞬間にコンソールに「15」と表示されたかと思います。10 + 5 は 15 ですね。このように、JavaScript では数値に対する算術演算が使えます。
演算 | 演算子 |
---|---|
加算 | + |
減算 | - |
乗算 | * |
除算 | / |
剰余 | % |
べき乗 | ** |
+
や -
のことを “演算子/operator” といいます。計算の優先順位は算数と同じです。丸括弧も使えます。また、数値の前にマイナス記号 -
を付けると負の値を表現します。
console.log((10 + 5) * 2 / 5 + 4); // → 10
console.log(-5 + 8); // → 3
console.log(2 ** 3); // → 8
console.log(10 % 3); // → 1(10÷3は3余り1)
また、文字列に対しても加算 +
だけは適用できて、文字列の“連結”として処理されます。文字列と文字列だけでなく、文字列と数値も加算すると連結されます(この振る舞いはややこしいので注意してください)。
console.log('Hello' + ' ' + 'World' + '!!'); // → Hello World!!
console.log('1たす1は' + 2); // → 1たす1は2
数値にラベルを付ける
プログラミング学習ではお馴染み、BMI の計算をしてみましょう。文字列と数値の連結も使っています。身長は単位(cm と m)が混ざっているので注意してください。
// BMI:体重[kg]/(身長[m]*身長[m])
console.log('体重' + 55 + 'kg/身長' + 165 + 'cmのBMI:');
console.log(55 / (1.65 * 1.65)); // → 20.20..
では次に、コードを書き換えて、体重 50kg/身長 155cm に変更してみてください。
正しく表示されましたか?
ところで、複数箇所にある同じ数値を書き換えるのは面倒くさいなぁ…と感じませんでしたか?
その感覚、プログラマとしては大切です。
最初のサンプルコードでは、55 が 2 回、1.65 が 2 回、165 が 1 回登場します。165 は 1.65*100 と書けるので、1.65 が 3 箇所あると数えることもできます。
これらをすべて書き換えるのは面倒なので、55 に《体重》、1.65 に《身長》という ラベル を付けて、以下のように書いてしまいたくなりますよね。
《体重》は 55
《身長》は 1.65
console.log('体重' + 《体重》 + 'kg/身長' + 《身長》 * 100 + 'cmのBMI:');
console.log(《体重》 / (《身長》 * 《身長》));
このように数値にラベルが付けられていれば、何度登場しても、書き換えるのはラベルの値だけです。そこから下の部分は書き換える必要がありません。
《体重》は 50 // 書き換え: 55 → 50
《身長》は 1.55 // 書き換え: 165 → 155
console.log('体重' + 《体重》 + 'kg/身長' + 《身長》 * 100 + 'cmのBMI:'); // そのまま
console.log(《体重》 / (《身長》 * 《身長》)); // そのまま
プログラミング言語にはこのラベル付けを行うための記法があり、JavaScript では「定数」と「変数」という仕組みが用意されています。
定数
まずは “定数/constant variable” から説明します。
《体重》は 50
《身長》は 1.55
の部分を定数に置き換えて JavaScript コードとして正しく動くようにするには、次のように書きます。これを定数の “宣言/declaration” といいます。
const weight = 50;
const height = 1.55;
ラベル名はそれぞれ対応する英単語に置き換えています。
const
というのは「constant」の略で、const weight
という部分で「weight という名前のラベルを設定しますよ」と宣言しています。続く = 50
の部分は「ラベルの値として 50 を設定しますよ」という宣言です。
以下のようにコンマで区切って並べて宣言することもできます。
const weight = 50, height = 1.55;
このようにして特定の値にラベル名をつけておくと、そこからあとのコードでそのラベルが使えるようになります。続きの書き方は《ラベル》で表現していた前述のサンプルコードと同じですね。
const weight = 50;
const height = 1.55;
console.log('体重' + weight + 'kg/身長' + height * 100 + 'cmのBMI:');
console.log(weight / (height * height)); // → 20.20..
もちろん、ラベル付けする値は数値に限りません。文字列にもラベル名を付けることができます(文字列の書き方についてはあとでまた説明します)。
const who = 'World!!';
console.log('Hello ' + who);
console.log('Good Morning! ' + who);
変数
定数は、その名のとおり、固定された値です。最初に一度 const weight = 50
と定義してしまったら、あとで weight
ラベルの値を変更することはできません。
あとからラベルの値を変更したいときは “変数/variable” を用います。
変数の宣言の記法は次のとおりです。
let weight = 50;
const
が let
に変わっただけです。「let」は何かの略語ではなく、英語の「let A B(A を B の状態にさせる)」に由来しています。
ラベルを変数として定義した場合、ラベルの指す値を途中で変更することができます。値の変更は “代入/assignment” といいます(チャプター 01 でも出てきましたね)。
let weight = 50;
weight = 60; // 代入によって値を変更している
このように、「let」というキーワードを付けずに =
で値を指定すると“代入”になります。
let who = 'World!!';
console.log('Hello ' + who);
who = "everyone!!";
console.log('Good Morning! ' + who);
一方、定数で宣言したラベルに値を代入しようとするとエラーになります。
const who = 'World!!';
who = "everyone!!"; // エラーになる
console.log('Good Morning! ' + who);
皆さんの環境でもエラーメッセージは英語で表示されているかと思います。下の画像では「定数(constant variable)に代入(assignment to)しようとしています」と書かれています。OS や Chrome のバージョンの違いによって微妙にメッセージが変わります。
変数と定数の使い分けですが、基本的に定数を使用して、定数の値を変更したくなったときだけ変数に差し替えるようにするとよいでしょう。本書でも途中で書き換えないラベルはすべて定数で記述します。
なお、変数の場合、宣言時に 初期値 を指定しないことも可能です。しかし、特に理由のないかぎりは初期値を指定して宣言するようにしておくとよいです。代入する値があとで決まる場合も、ひとまず 0
や 空文字 ''
を初期値として指定しておきます。
let x = 10; // 初期値ありの変数宣言(推奨)
let y; // 初期値なしの変数宣言
// 中略
y = 20; // あとで代入
命名規則
定数/変数の名前に使える文字列にはルールがあります。ルールに則らない名前をつけるとエラーとなります。
なお、定数/変数の “名前” のことをプログラミングの用語で “識別子/identifier” といいます。チャプター 01 の最後に触れたプロパティやメソッドの名前も識別子です。ここで説明する命名規則は、定数/変数に限らず、識別子全般に適用されます。
もう少し厳密なルールがあるのですが、初心者のうちは以下のように覚えておくとよいでしょう。
- 1 文字目は英字で始める(数字は使えない)
- 2 文字目以降は、英字/数字/アンダースコア
_
が使える - 大文字と小文字は区別される(weight と Weight は異なる識別子)
- JavaScript の “予約語” は使えない
予約語というのは JavaScript の記法のなかで使用されているキーワードで、例えば、今回登場した const
や let
がこれに当たります。また、console
や document
、window
など、すでに使われているオブジェクトの名前も使わないようにしてください。
'use strict';
定数/変数を宣言するには const
や let
というキーワードを使わなくてはならないのですが、昔の JavaScript ではこれらのキーワードを付けずに変数を宣言することができました。
let x = 10; // 正しい変数宣言
y = 20; // letなしでもエラーにはならない
console.log('x:' + x + ' y:' + y); // → x:10 y:20
このほうがシンプルじゃないか…と思われるかもしれませんが、以下のような打ち間違いに気づかないこともままあります。
let weight = 50;
wieght = 80;
console.log(weight); // → 50
これは困りますので、必ず const
か let
を付けて宣言するように指定することができます。JavaScript ファイルの先頭に 'use strict'; というおまじないを書いてください。
'use strict';
let weight = 50;
wieght = 80; // エラー
console.log(weight);
今度はコンソールに「wieght なんて定義されていないよ」というエラーが表示されます。なお、JavaScript では「定義(definition)」と「宣言(declaration)」は同じものと考えておいて OK です(エラーメッセージでは “定義” のほうがよく出てきます)。
本書のサンプルコードでは 'use strict';
を逐一明記していませんが、記述されているものとして話を進めます。
代入演算子
以下のコードを見てください。変数 x
に初期値 10 が指定されています。
let x = 10;
// ここで x の値に 5 を足し加えたい
この変数 x
に 5 を足し加えて 15 にしたいとします。
単純には「変数x
に 5 を足したものを再び x
に代入する」ことでこれは可能です。
let x = 10;
x = x + 5;
console.log(x); // → 15
しかし、代入式の左右に同じ変数名が出てくるのはちょっとわかりにくいですよね。プログラミングでは、変数に値を足し込む(変数の値を増やす)処理が頻繁に出てくるので、専用の演算子が用意されています。
例えば、変数 x
に 5 を足し込む(変数 x
を 5 だけ増やす)という処理は次のように記述します。
let x = 10;
x += 5;
console.log(x); // → 15
この +=
のことを “代入演算子/assignment operator” といいます。
同様に、JavaScript では減算・乗算・除算・剰余・べき乗に対して代入演算子があります。剰余とべき乗の代入演算子はあまり使わないので、以下では四則演算の代入演算子の例を示します。
演算 | 代入演算子 | 対応する表現 |
---|---|---|
加算 | += | x = x + 10 |
減算 | -= | x = x - 10 |
乗算 | *= | x = x * 10 |
除算 | /= | x = x / 10 |
慣れるまでは少しわかりずらい演算子ですが、慣れてしまうと逆に「x = x + 5」といった記述が気持ち悪くなります。
インクリメント/デクリメント
プログラミングでは、1 ずつ増やす/減らすという処理が非常によく出てきます。これは代入演算子でも x += 1
や x -= 1
などと書けるのですが、あまりに頻出するので、もっと短い記法が用意されています。それが “インクリメント/increment” と “デクリメント/decrement” です。
let x = 0;
x++;
console.log(x); // → 1
x--;
console.log(x); // → 0
インクリメント/デクリメントを代入式の右辺に置く場合、++
や --
を変数の前に置くか後ろに置くかで結果が変わります。この振る舞いがややこしいので、本書ではインクリメント/デクリメントは使用せず、x += 1
と x -= 1
を使うようにします。
この前置/後置の振る舞いについての説明は割愛しますので、知りたい人は以下のリンク先を参照してください。ただし、インターネット検索で見つかるサンプルコードではよく使用されていますので、インクリメント/デクリメントの概念は覚えておいてくださいね。
データ型とリテラル
ここまで登場した “値” は「数値」と「文字列」でした。このように値には種類があり、“データ型/data type”、あるいは単に “型/type” といいます。
JavaScript には次のようなデータ型が用意されています。本当はもう少しあるのですが一部抜粋しています。詳細は今後のチャプターで説明していきますので、現段階ではこういうものがあると知っていればよいでしょう。
データ型 | 例 |
---|---|
Number 型 | 10, -5, 0.5 |
String 型 | 'Hello', '123' |
Boolean 型 | true もしくは false |
undefined | undefined |
null[1] | null |
Object 型 | { dog: 4, duck: 2 } |
Array 型 | [1, 2, 'a', 'b'] |
Function 型 | いずれ紹介します |
JavaScript ではデータ型を意識することはあまりありませんが、プログラミング言語によっては定数/変数の宣言時などにデータ型を指定するものがあります。例えば、JavaScript の改良版である TypeScript[2] という言語では、次のように変数名の後ろにコロンを挟んでデータ型を指定します。
const name: string = 'OJK';
let price: number;
price = 400;
price = '400yen'; // 変数priceはNumber型なのでエラーになる
ところで、これまで特に説明もなく文字列は引用符 ' '
で囲んできましたが、この「引用符 ' '
で囲う」という表現のことを String 型の “リテラル/literal” といいます。リテラルは各型に対して存在します。例えば、400
は Number 型のリテラルですが、引用符で囲んで '400'
と表現すると String 型になります。
Number 型も、12
は 10 進数の 12 ですが、0o12
と書くと 8 進数の 12(10 進数でいう 10)となります。小数を 1.618
と表現するのも Number 型のリテラルの一つです。6.022e23
といった指数表記も使えます。
興味のある人へ:プリミティブな型について
Number 型・String 型・Boolean 型・undefined に関しては、それぞれ “プリミティブ/Primitive” な型が用意されています。JavaScript においては、プリミティブな型のほうが純粋なデータ型といっていいかもしれません。JavaScript では、プリミティブではないデータ型はすべて Object 型を元にして作られたオブジェクトです(つまり Number 型の正体は Object 型です)。
プリミティブな数値型・文字列型・真偽型にメソッドやプロパティを加えて便利なオブジェクトにしたのが Number オブジェクト・String オブジェクト・Boolean オブジェクトであり、それを便宜上、Number 型・String 型・Boolean 型と呼んでいます。なお、undefined にはオブジェクトの実装はありません。
とはいえ、プリミティブな型からオブジェクトへは自動変換されるので初心者のうちは意識する必要はありません。例えば、プリミティブな文字列型から toUpperCase メソッド(大文字にする)を呼び出すコードを書くと、自動的に String 型に変換されてから実行されます。
const str = 'string'; // プリミティブな文字列型
console.log(str.toUpperCase()); // → 「STRING」と出力される
// ↑定数strがString型に自動変換されて実行される
さらに詳しく知りたい人は MDN Web Docs を読んでみてください。