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

* 前のページ
* Overview: First steps
* 次のページ

前回までの記事を読んで、高度な視点からその機能を概観し、JavaScript とは何なのか、それで何ができるのか、他のウェブの技術とどう一緒に使うのか、そして、どのような機能があるのかが分かったのではないでしょうか。この記事では、本当の基本に立ち返り、JavaScript の基本的な構成要素である変数について見てみましょう。

|  |  |
| --- | --- |
| 前提条件: | 
 基本的なコンピューターの知識、HTML と CSS
 の基本についての理解、JavaScript が何かが分かっていること。
  |
| 目的: | JavaScript の変数についての基礎を習得する。 |

必要なツール
------

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

変数とは
----

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

### 変数の例

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


```html
<button id="button\_A">押してください</button>
<h3 id="heading\_A"></h3>
```



```js
const buttonA = document.querySelector("#button\_A");
const headingA = document.querySelector("#heading\_A");

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


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

### 変数がない場合

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


```html
<button id="button\_B">押してください</button>
<h3 id="heading\_B"></h3>
```



```js
const buttonB = document.querySelector("#button\_B");
const headingB = document.querySelector("#heading\_B");

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


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

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

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

**メモ:** 変数に値を「格納する」と言っていますが、これは重要な区別です。変数は値を保持するもので、値そのものではありません。つまり値の箱です。物を入れる段ボール箱のようなものだと思ってください。

![JavaScript の変数の例を示す 3 つの 3 次元の段ボール箱のスクリーンショットです。各ボックスには、さまざまな JavaScript のデータ型を表す仮想的な値が格納されています。サンプル値はそれぞれ "Bob", true, 35 です。](/ja/docs/Learn/JavaScript/First_steps/Variables/boxes.png)

変数の宣言
-----

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


```js
let myName;
let myAge;
```


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

**メモ:** JavaScript では、命令の行末ごとにセミコロン (`;`) を書かなければなりません。1 行ずつ書いているうちは動くかもしれませんが、複数行を書き始めたら動かなくなってしまうでしょう。いつでもセミコロンを書くようにして、慣れていきましょう。

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


```js
myName;
myAge;
```


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


```js
scoobyDoo;
```


**メモ:** 変数が存在していて値がないのと、変数自体が存在していないことを混同しないでください。この違いは重要です。上記の箱の例えでは、変数自体が存在しないということは値の箱（変数）がないということとなります。値がないということは、箱は確かにあるけれどその中に値がないということです。

変数の初期化
------

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


```js
myName = "Chris";
myAge = 37;
```


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


```js
myName;
myAge;
```


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


```js
let myDog = "Rover";
```


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

var についてのメモ
-----------

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


```js
var myName;
var myAge;
```


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

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

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


```js
myName = "Chris";

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

logName();

var myName;
```


**メモ:** ウェブコンソールで複数行の JavaScript を実行しているときだけでは、JavaScript コンソールに 1 行ずつ入力してもうまくいきません。

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

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

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


```js
var myName = "Chris";
var myName = "Bob";
```


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


```js
let myName = "Chris";
let myName = "Bob";
```


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


```js
let myName = "Chris";
myName = "Bob";
```


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

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

**メモ:** このコードをブラウザーコンソールで試す場合は、ここにあるコードブロックのそれぞれを丸ごとコピー & ペーストするのがよいでしょう。Chrome のコンソールの機能には、`let` と `const` による変数の再宣言が許可されているものがあります。
```

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

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


変数の値を変更する
---------

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


```js
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
```


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

変数のデータ型
-------

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

ここまで最初の 2 つは見てきましたが、他にもあります。

### 数値型

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


```js
let myAge = 17;
```

### 文字列型

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


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

### 論理値

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


```js
let iAmAlive = true;
```


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


```js
let test = 6 < 3;
```


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

### 配列

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


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


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


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


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

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

### オブジェクト

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

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


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


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


```js
dog.name;
```


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

動的型付け
-----

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

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


```js
let myString = "Hello";
```


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


```js
let myNumber = "500"; // oops, this is still a string
typeof myNumber;
myNumber = 500; // much better — now this is a number
typeof myNumber;
```


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

JavaScript の定数
--------------

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

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

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


```js
let count;
```


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


```js
const count;
```


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


```js
let count = 1;
count = 2;
```


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


```js
const count = 1;
count = 2;
```


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


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


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


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

いつ const を使い、いつ let を使うか
------------------------

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

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

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

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

スキルテスト
------

この記事の最後に達しましたが、最も大切な情報を覚えていますか？次に進む前に、この情報が身に付いたかどうかを確認するテストがあります。Test your skills: variables (en-US) を見てください。

まとめ
---

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

* 前のページ
* Overview: First steps
* 次のページ