第4章 JavaScriptの変数入門

公開日：2024年6月27日

最終更新日：2024年9月18日

JavaScriptの変数を使うメリットや宣言の方法などと、コメントの書き方や文字列について解説します。

前回までの講座で、

について学びました。今回はそれらを一読された前提での続編になります。

学習用コード

以下のindex.htmlとindex.jsファイルの内容をこの章の学習の出発点にします。

一応これらファイルを自サーバーに準備してあります。必要な方はダウンロードして解凍してください。(※ファイルの解凍方法は第1章のファイルの展開(解凍)方法で触れています)

第4章の学習用ファイル(chapter04.zip)をダウンロード

<!DOCTYPE html>
<html>
  <head>
    <title>タイトル</title>
  </head>
  <body>
    <h1>見出し</h1>
    <p>段落</p>
    <script src="js/index.js"></script>
  </body>
</html>

console.log(100 * 0.2);
console.log(200 * 0.2);
console.log(300 * 0.2);
console.log(400 * 0.2);
console.log(500 * 0.2);

変数の無い世界

index.htmlをブラウザで開いて、コンソールを表示すると以下のようになります。(※ブラウザで開く方法は第1章のhtmlファイルをブラウザで開く方法で、コンソールは第3章のブラウザのコンソールを開く方法で触れています)

100円から500円の商品の割引率が20%(0.2)の時の割引額一覧を表示するコードだとして、割引率を40%(0.4)に変更するには、5箇所の0.2を0.4に書き換える必要があります。

console.log(100 * 0.4);
console.log(200 * 0.4);
console.log(300 * 0.4);
console.log(400 * 0.4);
console.log(500 * 0.4);

わずか5行のコードですからこの程度の変更で済んでいますが、10万円までの1000行のコードを書き換えるのはナンセンスだと想像がつきますよね。

console.log(100 * 0.2);
console.log(200 * 0.2);
console.log(300 * 0.2);
console.log(400 * 0.2);
console.log(500 * 0.2);
// ・・・・
console.log(99900 * 0.2);
console.log(100000 * 0.2);

最初から割引率0.2の部分を変数にしておけば、1000行の変更も変数1箇所で済みます。

変数のある世界

割引率を変数にしたコードです。

// 割引率の変数
let discountRate = 0.2;

// 割引額一覧を表示する
console.log(100 * discountRate);
console.log(200 * discountRate);
console.log(300 * discountRate);
console.log(400 * discountRate);
console.log(500 * discountRate);

ブラウザのindex.htmlを再読み込みしてJavaScriptを再実行すると、変数にする前と同じ結果になります。

変数discountRateの1箇所だけを0.4に変更して、

// 割引率を0.4に変更した
let discountRate = 0.4;

// 割引額一覧を表示する
console.log(100 * discountRate);
console.log(200 * discountRate);
console.log(300 * discountRate);
console.log(400 * discountRate);
console.log(500 * discountRate);

再度実行すると、期待通りの結果になりました。

変数の宣言と初期値の代入

let discountRate = 0.2;

は、日本語的には「discountRateを変数として宣言し、その中に0.2という数値を初期値として代入する」という命令文になります。

「discountRateは変数ですよー」とパソコンに教えることを「宣言」といいます。

先頭に「let」を書いて、空白の後にdiscountRateと変数名を書きます。

パソコンに対して宣言したので、以降、discountRateという文字がコードに現れるとパソコンは変数と認識してくれます。

変数に値を格納することをプログラミングでは「代入」といいます。

変数の宣言と同時に代入する値を特に「初期値」といいます。

プログラミングをやっていればよく出てくる単語なので自然と覚えるでしょう。

JavaScriptのコードは上の行から順番に実行される

JavaScriptのコードは原則、ファイルの上から順番に解釈されて実行されるので、宣言する前に書くとエラーになります。

// 宣言の前はダメ。
console.log(discountRate);

// 宣言
let discountRate = 0.2;

昔の変数宣言のvarは古いので使わない

古いコードを見ると変数の宣言をletではなくvarで書いているコードがあります。

var a = 10;

varの改良版がletです。単に文字が変わっただけではなくて、詳細は割愛しますが挙動が全く異なります。バグ等の問題を起こしにくくするためにletが新たに追加された経緯もありますので、letを使ってください。

もしvarを使っている古いコードを読むときは、varをletに読み替えるとある程度対応できます。

JavaScriptのコメントについて

先ほどからコードにスラッシュ2つで始まる文字がありますよね。

// 割引率を0.4に変更した
let discountRate = 0.4;

// 割引額一覧を表示する
console.log(100 * discountRate);
console.log(200 * discountRate);
console.log(300 * discountRate);
console.log(400 * discountRate);
console.log(500 * discountRate);

これはコメントという一種の「メモ」機能です。コメントはJavaScriptとして実行時に無視されますので何を書いても構いません。

コメントは、行の先頭から書く他に、行の最後にも書けます。

let discountRate = 0.4; // 割引率

console.logの各行の先頭にスラッシュを2つ書いてコメントにすることもできます。

// 割引率を0.4に変更した
let discountRate = 0.4;

// 割引額一覧を表示する
// console.log(100 * discountRate);
// console.log(200 * discountRate);
// console.log(300 * discountRate);
// console.log(400 * discountRate);
console.log(500 * discountRate);

最後の500のconsole.log以外全部コメントにしたのでブラウザのコンソールには500 * discountRateの計算結果の200だけ表示されます。

このようにコメント化することで実行できなくすることを「コメントアウト」するといいます。

※ VSCodeではコメントアウトしたい行を選択してCtrl + スラッシュ( / )でコメントの切り替えができます。(※ブラウザ版のVSCodeの使い方は第1章のブラウザ版VSCodeの使い方で触れています)

複数行をまとめてコメントアウトする2つ目の方法は/* ~ */で囲むことです。

console.logの100~400を囲んでいます。

// 割引率を0.4に変更した
let discountRate = 0.4;

// 割引額一覧を表示する
/*
console.log(100 * discountRate);
console.log(200 * discountRate);
console.log(300 * discountRate);
console.log(400 * discountRate);
*/
console.log(500 * discountRate);

変数名を名付ける時のルール

変数名に使える文字は半角の、

アルファベット
数字
_ (アンダースコア)
$ (ドル)

です。

// 変数名は文字、数字、アンダースコア（_）、ドル記号（$）を使用できますが、数字で始めることはできません。
let val1 = 1;
let $val = 2;
let _val = 3;

ただし、先頭の1文字は数字は使えません。

// 数字で始まるためエラーになります。
let 7val = 7; // エラー

コンソールにエラー表示されます。

Uncaughtはcatchできなかった、SyntaxErrorは構文エラーという意味です。

JavaScriptではcatchといって文字通りエラーをキャッチしてその後に続くコードを涼しい顔して実行を続行することができる仕組みがあるんですが、そこでキャッチできなくて全体が強制停止したことを教えてくれています。

Invalid or unexpected tokenは「無効または予期しないトークンがあった」という意味です。

トークンとは、コード中の空白で区切られたコードの最小単位の文字のことです。たとえば

let 7val = 7;

は「let」「7val」「=」「7」「;」の5つトークンで出来ています。

ブラウザがJavaScriptのコードを読み込んだ時、このトークン単位で解釈していくわけです。

letで始まれば「変数の宣言だな」と構えるわけです。で次に「7val」と来てるのをみて「先頭数字はダメ」と判断してエラーとして処理して、以降のコードを実行しません。

(at index.js2:5)の2がjsファイルでの問題があった行数を、5がその行の先頭から何文字目かを教えてくれています。「let 7val」の7が問題の場所でそれは2行目の5文字目だということです。

VSCodeを使っていれば実行以前に、コード上で波線とかで目立つように教えてくれます。

変数に限ったことではないですが、大文字・小文字の違いは別モノとして区別されます。

// 大文字と小文字の違いは別物として区別されます。
let discountrate = 0.2;
let discountRate = 0.2;

「let」や、この講座ではまだ扱っていませんが「if」や「function」といったJavaScriptであらかじめ意味が決められている単語(予約語という)も変数名にはできません。エラーになります。

// JavaScriptの予約語は変数名として使用できません。
// 無効な例（予約語を使用しているためエラーになります）
let let = 0; // エラー

複数の単語がつながっているような変数名の時、読みやすくするためにJavaScriptでは途中の単語の先頭を大文字にする「キャメルケース」という書き方が一般的な作法になっています。

let discountrate = 0.2;
let discountRate = 0.2; // <- キャメルケース

あくまで作法なので、キャメルケースにしないとエラーになるわけではありません。

全く同じ変数名を再度宣言することはできません。

let val = 0;
let val = 1; // エラー

変数名に日本語などの全角文字を使わない

実は、JavaScriptでは変数名に日本語などの全角文字を使えますが、

let 割引率 = 0.2;

console.log(100 * 割引率);

全角文字を含むコードは、異なるシステム間で移動した際に文字化けや誤動作が発生するリスクがあるのと、多くのプログラミング言語やプロジェクトでは、他の開発者がコードを理解しやすくするために、変数名に英語を使用することが一般的な慣習となっています。

変数に文字列を代入する

変数には文字列を代入できます。

let message = "こんにちは";

console.log(message); // コンソールに「こんにちは」と表示される。

JavaScriptで文字列はダブルクオートかシングルクォートで囲みます。

let singleMessage = 'こんにちは'; // シングルクォート
let doubleMessage = "こんにちは"; // ダブルクオート

PHPというプログラミング言語ではシングルクォートで書いたほうが処理速度が向上するのでシングルクォートで書きますが、JavaScriptではどちらでも差がないのでどちらで書いても構いません。

個人の好み、あるいはチームで開発しているならどちらで書くかあらかじめ決めます。

エスケープ

シングルクォートで囲んでいる中でのダブルクオート、その逆の、ダブルクオートで囲んでいる中でのシングルクォートは普通に文字として認識してくれます。

let message = 'こんにちは、"千切伝助"です。';
console.log(message);

let message = "こんにちは、'千切伝助'です。";
console.log(message);

シングルクォートで囲んだ中でのシングルクォート、たとえば「こんにちは、'千切伝助'です。」を、

let message = 'こんにちは、'千切伝助'です。';

とシングルクォートで囲んで書くと、コードを解釈するブラウザが困ってしまってエラーになりますので、

let message = 'こんにちは、\'千切伝助\'です。';

のように、文字として表示してほしいシングルクォートの前にバックスラッシュをつけて、コードを解釈するブラウザに「普通の文字として扱って」と教えてあげます。

ダブルクオートで囲んでいる時も同様です。

let message = "こんにちは、\"千切伝助\"です。"

このように、本来、文字列の範囲を示す役割のシングルクォートやダブルクオートを、その役割から逃避させることを、「エスケープ(逃避)する」といいます。

コードの書き方にはちょっとした論争がある

この講座では今後、文字列を囲む時はダブルクオートを使うことで統一します。

理由は、第1章のブラウザ版VSCodeの使い方で、VSCodeのPrettier拡張機能によるコード整形機能を導入しましたが、Prettierでコード整形をかけると文字列を囲んでいるシングルクォートを全部ダブルクオートに変換します。

PrettierはおそらくHTML、CSS、JavaScriptのコード整形部門でのシェアがナンバーワンだと思われ、そのPrettierがデフォルトでそうしているなら、長いものには巻かれろということで。

Prettier関連でいうと、これまでのこの講座のコードには行の最後にセミコロンがついていますが、

console.log(100 * 0.2);
console.log(200 * 0.2);
console.log(300 * 0.2);
console.log(400 * 0.2);
console.log(500 * 0.2);

JavaScriptの文法では、セミコロンをつけなくてもエラーにはなりません。どちらでもいい仕様です。

console.log(100 * 0.2)
console.log(200 * 0.2)
console.log(300 * 0.2)
console.log(400 * 0.2)
console.log(500 * 0.2)

どちらでもいいから、世のプログラマーの間でちょっとした派閥みたいなのができています。

セミコロンのぶんだけ余計な入力なのでセミコロンなしの方が一見よさそうですが、この講座ではセミコロンをつけます。理由は文字列のダブルクオート同様、Prettierがコード整形時にセミコロンを自動でつけるからというのもありますが、セミコロンでコードを区切らないとエラーになることがまれにあるからです。セミコロンをつけておけば問題は起きません。

ちなみに、Pretter公式に関連記事があります。プログラマーの間でコードの書き方には論争があると。Prettierの見解を抜粋して翻訳すると、

Prettier を採用する最大の理由は、スタイルに関する進行中の議論をすべて止めることです。共通のスタイルガイドを持つことはプロジェクトやチームにとって価値があると一般に認められていますが、そこに到達する(どちらかに統一する)のは非常に苦痛で報われないプロセスです。人々は特定のコード記述方法に対して非常に感情的になり、誰も時間をかけてコードを記述したり批判されたりすることを好むわけではありません。

では、なぜ他のスタイルガイドではなく「Prettier スタイルガイド」を選択するのでしょうか。それは、Prettier が、完全に自動化された唯一の「スタイルガイド」だからです。たとえ Prettier がすべてのコードを 100% 希望どおりにフォーマットしないとしても、Prettier 独自の利点を考えれば、「犠牲」を払う価値があると思いませんか。
Why Prettier? · Prettier

複数の文字列を+記号でひとつに結合する

文字列どうし、あるいは文字列と数値はプラス記号「+」を使ってひとつの文字列にすることができます。

let message = "こんにちは、" + "千切伝助です。";
console.log(message);

これを実行すると、「こんにちは、千切伝助です。」と結合されます。

今回学んだことをクイズゲームで確認しよう！

このページで解説したことを全問のクイズ形式のゲームにしました。
ゲーム感覚で復習すると記憶に定着する助けになります。

下の「クイズを開始」ボタンでゲームを開始すると「YES」「NO」ボタンが現れますので、上から降ってくる問題が正しければ「YES」を、間違っているなら「NO」ボタンを押してください。

まとめ

JavaScriptの変数の基本的な使い方、命名のルール、コメントの書き方について解説しました。