--- title: 必要な情報を保存する — 変数 slug: Learn/JavaScript/First_steps/Variables tags: - Arrays - Booleans - JavaScript - Numbers - Objects - Updating - Variables - declaring - initializing - 'l10n:priority' - loose typing - strings translation_of: Learn/JavaScript/First_steps/Variables ---
{{LearnSidebar}}
{{PreviousMenuNext("Learn/JavaScript/First_steps/What_went_wrong", "Learn/JavaScript/First_steps/Math", "Learn/JavaScript/First_steps")}}

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

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

必要なツール

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

変数とは

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

<button>押してください</button>
const button = document.querySelector('button');

button.onclick = function() {
  let name = prompt('あなたの名前は何ですか？');
  alert('こんにちは、' + name + 'さん、初めまして！');
}

{{ EmbedLiveSample('What_is_a_variable', '100%', 50, "", "", "hide-codepen-jsfiddle") }}

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

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

let name = prompt('あなたの名前は何ですか？');

if (name === 'アダム') {
  alert('こんにちは、アダムさん初めまして！');
} else if (name === 'アラン') {
  alert('こんにちは、アランさん初めまして！');
} else if (name === 'ベラ') {
  alert('こんにちは、ベラさん初めまして！');
} else if (name === 'ビアンカ') {
  alert('こんにちは、ビアンカさん初めまして！');
} else if (name === 'クリス') {
  alert('こんにちは、クリスさん初めまして！');
}

// ... さらに続く ...

もしかしたら、まだ完全にはコードの内容がわからないかもしれませんね！けれども、変数がなければ、適切なメッセージを表示するために、どんな名前が入力されたのかを延々と判定し続ける巨大なコードを書かなければならないことが、何となくでもわかるのではないでしょうか。これはまったくもって非効率です(このコードは 5人の名前しか表示できないのに既に大きくなっています)。さらに、すべての状況に対応するようには書くことはできないでしょう。

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

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

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

変数を宣言する

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

let myName;
let myAge;

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

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

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

myName;
myAge;

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

scoobyDoo;

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

変数を初期化する

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

myName = 'Chris';
myAge = 37;

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

myName;
myAge;

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

let myDog = 'Rover';

2行で書くよりも簡単に書けるので、ほとんどの場合はこのように書くでしょう。

var と let の違い

ここまでで、「なぜ変数を定義するのに 2 つのキーワードが必要なのですか。なぜ var と let があるのでしょうか」と考えるかもしれません。

その理由はやや歴史的なものです。JavaScript が最初に作成されたときには、var しかありませんでした。ほとんどの場合、基本的にはうまく機能しますが、その機能にはいくつかの問題があります。その設計は時々混乱したり、実に迷惑になることがあります。そこで、let を最新のバージョンの JavaScript で作成しました。これは、var とは多少異なる動作をする変数を作成するための新しいキーワードで、その過程での問題を修正しています。

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

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

myName = 'Chris';

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

logName();

var myName;

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

これは巻き上げのために動作します。件名に関する詳細については 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 を使用することをお勧めします。コードで古いバージョンの Internet Explorer をサポートする必要がない限り、var を使用する理由はありません (バージョン 11 まで let をサポートしていません。最近の Windows Edge ブラウザーでは、let をサポートしています)。

変数の値を変更する

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

myName = 'Bob';
myAge = 40;

変数の名前付けのルール

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

注: 避けるべき予約語の一覧は字句文法 — キーワードで見つかるでしょう。

良い名前の例：

age
myAge
init
initialColor
finalOutputValue
audio1
audio2

悪い名前の例：

1
a
_12
myage
MYAGE
var
Document
skjfndskjfnbdskjfb
thisisareallylongstupidvariablenameman

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

変数のデータ型

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

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

数値型

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

let myAge = 17;

文字列型

文字列とは文字が連なったもののことです。変数に文字列値を設定する場合、シングルクォーテーション (') またはダブルクォーテーション (") で文字を囲みます。囲み忘れると、JavaScript はその文字を変数名として解釈しようとしてしまいます。

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

真偽値

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

let iAmAlive = true;

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

let test = 6 < 3;

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

配列

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

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

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

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

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

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

オブジェクト

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

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

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

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

dog.name

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

動的型付け

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

たとえば、もし変数を宣言して、クォーテーションマークで囲んだ値を渡すとします。すると、ブラウザーはこれを文字列として扱うでしょう。

let myString = 'Hello';

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

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 の定数

多くのプログラミング言語は定数の概念を持っています — 一度宣言されると変更できない値です。セキュリティ (サードパーティのスクリプトによってこのような値が変更された場合に問題が発生する可能性がある) からデバッグやコードの理解 (変更してはいけない値を誤って変更して混乱する) まで、実行するさまざまな理由があります。

JavaScript の初期の頃は、定数は存在しませんでした。現代の JavaScript では、const というキーワードがあります。これにより、絶対に変更できない値を格納できます。

const daysInWeek = 7;
const hoursInDay = 24;

const は let と全く同じように動作しますが、const に新しい値を与えることはできません。次の例では、2行目でエラーが発生します。

const daysInWeek = 7;
daysInWeek = 8;

スキルをテストしよう!

この記事の最後に到達しましたが、最も大事な情報を覚えていますか？移動する前に、情報を取得したかのテストを見ることができます — Test your skills: variables を見てください。

まとめ

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

{{PreviousMenuNext("Learn/JavaScript/First_steps/What_went_wrong", "Learn/JavaScript/First_steps/Math", "Learn/JavaScript/First_steps")}}

このモジュール