必要な情報を保管する — 変数

この記事を通じて、理解した内容を確認するために、コードを入力してもらうことがあるでしょう。デスクトップを使用しているのなら、JavaScript のサンプルコードを打ち込むのに最適なのは、ブラウザーの JavaScript コンソールでしょう（詳しくはブラウザーの開発者ツールとはをご覧ください）。

変数は値の入れものです。数を合計したり、ある文章の一部を格納するのに使用します。変数が特別なのは、変数が持っている値を変更できることにあります。

単純な例を見てみましょう。

<button id="button_A">押してください</button>
<h3 id="heading_A"></h3>

const buttonA = document.querySelector("#button_A");
const headingA = document.querySelector("#heading_A");

buttonA.onclick = () => {
  const name = prompt("あなたの名前は何ですか？");
  alert(`こんにちは、${name}さん、はじめまして！`);
  headingA.textContent = `${name}さん、ようこそ`;
};

この例では、ボタンを押すとちょっとしたコードが走ります。最初の行では、ボタンを押した人の名前を入力するボックスが画面に表示されます。そして入力された値を変数に保存します。2 行目では、入力した人の名前を変数から取り出して、あいさつのメッセージに含めています。3 行目では、ページ上にその名前を表示しています。

なぜこれが便利なのかを理解するためには、変数を使用せずにこの例と同じことをするためにはどのようにすればよいのか考えてみましょう。恐らく次のようになるでしょう。

<button id="button_B">押してください</button>
<h3 id="heading_B"></h3>

const buttonB = document.querySelector("#button_B");
const headingB = document.querySelector("#heading_B");

buttonB.onclick = () => {
  alert(
    `こんにちは、${prompt("あなたの名前は何ですか？")}さん、はじめまして！`,
  );
  headingB.textContent = `${prompt("あなたの名前は何ですか？")}さん、ようこそ`;
};

もしかしたら、まだ完全にはコードの内容がわからないかもしれませんね！けれども、変数がなければ、名前が必要になるたびに読み手に尋ねなければならなくなります。

変数というのはとても合理的です。JavaScript に慣れていけばとても自然なものに感じられるでしょう。

変数についてもう一つ特筆すべき点は、変数には文字列や数字だけでなく、何でも格納できるということです。複雑なデータや、すごいことをする関数全体ですら保持できます。先に進めばさらに理解できるようになるでしょう。

変数を使用するためには、まずは変数を作らなければなりません。より正確には、「宣言する」といいます。そのためには var または let キーワードに続けて変数名を書きます。

let myName;
let myAge;

ここでは 2 つの変数 myName と myAge を宣言しています。それではこの 2 つの行をブラウザーのコンソールに入力してみましょう。続けて、好きな名前で変数を作ってみましょう。

今実行している環境に値が存在するかどうか、変数名を入力して確かめることができます。例えば、

myName;
myAge;

これらの変数は現在、値を保持しておらず、空です。変数の名前を入力すると、undefined という値が表示されるでしょう。もし変数自体が存在していない場合はエラーメッセージが表示されます。以下の変数を入力してみてください。

scoobyDoo;

変数を宣言したら、値を入れて初期化できます。初期化するには、変数名に続けて等号記号 (=) を入力し、変数に入れたい値を渡します。例えば次のように。

myName = "Chris";
myAge = 37;

コンソールに戻って上の行を入力してみてください。コンソール上に、変数に設定した値がその都度戻ってくることが確認できるでしょう。先ほど言ったように、変数の名前をコンソールに入力することで、その値が確認できます。もう一度、やってみましょう。

myName;
myAge;

変数の宣言と初期化を一度にすることもできます。

let myDog = "Rover";

2 つの操作を別個の行で行うより早いので、おそらくほとんどの場合、この方法で書くでしょう。

おそらく、var キーワードを使用した異なる方法で変数を宣言しているのも目にすることがあるでしょう。

var myName;
var myAge;

JavaScript が最初に作成されたときには、これが変数を宣言する唯一の方法でした。var の設計は設計は混乱しやすく、エラーを引き起こしやすいものです。そこで、let が現代の JavaScript で導入されました。これは、var とは多少異なる動作をする変数を作成するための新しいキーワードで、その過程での問題を修正しています。

一部の簡単な違いを以下に説明します。ここではすべての違いについて説明するわけではありませんが、JavaScript について詳しく学習するにつれてそれらの違いがわかるようになります（今すぐ読みたい場合は、let のリファレンスページを参照してください）。

はじめに、変数を宣言して初期化する複数行の JavaScript プログラムを作成した場合、変数を初期化した後で実際に変数を var で宣言することができます。例えば次のようになります。

myName = "Chris";

function logName() {
  console.log(myName);
}

logName();

var myName;

これは巻き上げが行われるため、動作します。件名に関する詳細については var の巻き上げを読んでください。

巻き上げは let で動作しなくなりました。上記の例で var を let に変更すると、エラーで失敗します。これは良いことです。変数を初期化した後に宣言すると混乱しやすくなり、コードを理解するのが難しくなります。

第二に、var を使用するとき、好きなだけ同じ変数を何度でも宣言することができます、しかし let ではできません。次の例は動作します。

var myName = "Chris";
var myName = "Bob";

しかし、次のようにすると 2 行目でエラーが発生します。

let myName = "Chris";
let myName = "Bob";

代わりにこれをしなければならないでしょう。

let myName = "Chris";
myName = "Bob";

繰り返しますが、これは言語の賢明な決定です。変数を再宣言する必要はありません。それは物事をより混乱させるだけです。

これらの理由と複数の理由から、コードでは var よりも let を使用することをお勧めします。古いブラウザーの対応を明確に書いている場合を除き、2015 年以降、現代のすべてのブラウザーが let に対応しているため、var を使用する理由はなくなりました。

> let myName = "Chris";
  let myName = "Bob";
// 1 回の入力: SyntaxError: Identifier 'myName' has already been declared

> let myName = "Chris";
> let myName = "Bob";
// 2 回の入力: 両方とも成功

変数を初期化して値が入ったら、もう一度値を入れなおすことで、変数の値を変更することができます。次の行を入力してみてください。

myName = "Bob";
myAge = 40;

変数には制限はあるものの、大体どんな名前を付けることができます。ただし、一般的に、アルファベットと数字 (0-9, a-z, A-Z) やアンダースコアだけを使用すべきでしょう。

• 上記以外の文字を使用するのはやめましょう。環境によってはエラーとなったり、他の国の人々にとって理解しがたいものとなります。
• 変数名の先頭にアンダースコアは使用してはいけません。一部の JavaScript のコンストラクターにとっては特別な意味を持つため、問題となることがあります。
• 変数名の先頭に数字を使用してはいけません。これは JavaScript の文法エラーとなります。
• 複数の単語をつなげる場合は、小文字で始まるキャメルケースと呼ばれる書き方に従いましょう。最初の単語を全て小文字で書いて、その後に続く単語の最初の文字を大文字にする記法です。この記事ではこの書き方を採用しています。
• 保持するデータを説明する、分かりやすい名前を付けましょう。1 つの文字・数字や、長すぎる命名はしないようにしましょう。
• 変数名は大文字・小文字を区別します。myage と myAge は違うものになります。
• 最後に、JavaScript の予約語 ( これは JavaScript の文法を構成する単語のことです) を変数名には付けないようにしましょう。var、function、let、for 等を変数名として使用することは出来ません。ブラウザーはそれを異なるように解釈し、結果としてエラーとなるでしょう。

良い名前の例：

age
myAge
init
initialColor
finalOutputValue
audio1
audio2

悪い名前の例：

1
a
_12
myage
MYAGE
var
Document
skjfndskjfnbdskjfb
thisisareallylongvariablenameman

さらにいくつかの変数を作成してみましょう。上記の内容をしっかりと覚えてください。

変数に保持する値にはいくつかの種類があります。このセクションでは、その種類について簡単に解説します。さらに詳細については、もっと先の記事で紹介します。

変数には数値を格納することができます。数値は 30 のような整数値や、2.456 のような実数値（浮動小数点数とも呼ばれます）が存在します。その他の言語とは違い、JavaScript ではデータ型を宣言する必要はありません。もし数値を変数に設定するならば、引用符は付けてはいけません。

let myAge = 17;

文字列とは文字が連なったもののことです。変数に文字列値を設定する場合、単一引用符 (') または二重引用符 (") で文字を囲みます。囲み忘れると、JavaScript はその文字を変数名として解釈しようとしてしまいます。

let dolphinGoodbye = "So long and thanks for all the fish";

論理型は真偽値です。 true と false の 2 つの値を持ちます。どちらのコードを実行するべきかといった、条件を判定するためによく使います。例として、簡単なコードは以下のようなものです。

let iAmAlive = true;

実際には以下のように使われます。

let test = 6 < 3;

これは「小なり」演算子 (<) を使用して 6 が 3 より小さいかどうかを判定しています。想像の通り、6 は 3 より小さくないためにこれは false となります。このような演算子はまた今度じっくりと紹介します。

配列とは角括弧 ([]) にカンマで区切った複数の値を格納できるオブジェクトです。コンソールに以下のように入力してみましょう。

let myNameArray = ["Chris", "Bob", "Jim"];
let myNumberArray = [10, 15, 40];

配列を宣言したら、配列中の位置を指定することで、その値にアクセスすることができます。次のように入力してみましょう。

myNameArray[0]; // 'Chris' と表示されます
myNumberArray[2]; // 40 と表示されます

角括弧で表示したい値の位置に応じた添字を指定します。気づいたかもしれませんが JavaScript の配列は 0 から始まり、最初の要素の添字が 0 となります。

配列についても先の記事にて紹介します。

プログラミングにおいて、オブジェクトとは現実のもの（オブジェクト）をモデルとしたコードの構造です。幅と長さについての情報をもつ駐車場を表す単純なオブジェクトもあれば、名前や身長、体重、話す言葉やあいさつもすることもできる、人を表すオブジェクトも作ることができます。

次の行をコンソールに入力してみましょう。

let dog = { name: "ポチ", breed: "ダルメシアン" };

オブジェクトに格納された情報を取得するには、以下のような書き方をします。

dog.name;

とりあえずオブジェクトについて、今はここまでです。オブジェクトについてはもっと先のモジュールで紹介します。

JavaScript は他の言語と異なり、「動的型付け言語」という、格納するデータ型 (数値や文字列や配列など ) を変数に対して指定する必要のない言語です。

たとえば、もし変数を宣言して、引用符で囲んだ値を渡すとします。すると、ブラウザーはこれを文字列として扱うでしょう。

let myString = "Hello";

それが数字を含んでいたとしても、文字列になってしまうので、気を付けてください。

let myNumber = "500"; // おっと、これはまだ文字列です
typeof myNumber;
myNumber = 500; // はるかに良い — これで数値になりました
typeof myNumber;

上の 4 行をコンソールに一つずつ入力して、結果を見てみてください。typeof という演算子に気づきましたか？これは渡した変数のその時点でのデータ型を返します。最初に使用したとき、myNumber には '500' という文字列が入っているため、string と返ってきます。2 回目に呼んだときに何が返ってくるかを見てみましょう。

変数と同様に、定数も宣言することができます。これらは、以下の点を除けば、変数と同じです。

• 宣言した時点で初期化する必要がある。
• 初期化した後、新しい値を割り当てることはできない。

例えば、let を使用すると、変数を初期化せずに宣言することができます。

let count;

これを const を使用して行おうとすると、エラーが表示されます。

const count;

同様に、let で変数を初期化し、新しい値を割り当てることができます（これは変数を再代入するとも呼ばれます）。

let count = 1;
count = 2;

これを const を使用して行おうとすると、エラーが表示されます。

const count = 1;
count = 2;

JavaScript で定数は、常に同じ値に名前を付けなければなりませんが、名前を付けた値の内容は変更することができることに注意してください。これは、数値や論理値のような単純な型では有益な違いではありませんが、オブジェクトを考えてみてください。

const bird = { species: "Kestrel" };
console.log(bird.species); // "Kestrel"

オブジェクトの内容が変わっても、定数は同じオブジェクトを指しているので、const を使って宣言したオブジェクトのプロパティを更新したり、追加したり、削除したりすることができます。

bird.species = "Striated Caracara";
console.log(bird.species); // "Striated Caracara"

もし const で let と同じことができないのであれば、なぜ let よりも const を使用した方がいいのでしょうか？実際、constはとても有益なものです。もし const を使用して値に名前をつけると、コードを見ている人に、この名前は決して異なる値に割り当てることができないことを指示します。この名前を見た人は、その名前が何を参照しているのかがいつでもわかるようになるのです。

このコースの中では、いつ let を使用し、いつ const を使用するかについて、以下の原則を採用しています。

可能であれば const を使用し、必要ならば let を使用する。

つまり、宣言時に変数を初期化でき、後で再代入する必要がない場合は、その変数を定数にします。

この記事の最後に達しましたが、最も大切な情報を覚えていますか？次に進む前に、この情報が身に付いたかどうかを確認するテストがあります。スキルテスト: 変数を見てください。

ここまでで JavaScript の変数の作り方について理解して、それ以外にもそれなりの知識を得ましたね。次の記事では、数値に焦点を当てて、JavaScript の数値計算の基礎について見ていきます。

• 前のページ
• Overview: JavaScript の第一歩
• 次のページ (en-US)