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

前提条件:

基本的なコンピューターの知識、HTML と CSS の基本についての理解、JavaScript が何かが分かっていること。

目的: JavaScript の変数についての基礎を会得する。

必要なツール

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

もし、JavaScript コンソールを使用するのが難しかったり、ページに埋め込まれている方が使いやすいのであれば、このページの下のほうに簡単な JavaScript コンソールを埋め込んでいますので使ってみてください。

変数とは

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

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

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

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

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

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

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

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

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

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

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

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

変数を宣言する

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

var myName;
var myAge;

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

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

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

myName;
myAge;

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

scoobyDoo;

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

変数を初期化する

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

myName = 'Chris';
myAge = 37;

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

myName;
myAge;

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

var myName = 'Chris';

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

: 複数行に渡る JavaScript のプログラムを書く場合、変数を初期化した後に宣言を書いても正しく動きます。これは変数の宣言が残りのコードが実行されるよりも前に実行されるためで、これは var の巻き上げと呼ばれます。これについては var の巻き上げに関する記事を参照ください。

変数の値を変更する

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

myName = 'Bob';
myAge = 40;

変数の名前付けのルール

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

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

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

良い名前の例:

age
myAge
init
initialColor
finalOutputValue
audio1
audio2

悪い名前の例:

1
a
_12
myage
MYAGE
var
Document
skjfndskjfnbdskjfb
thisisareallylongstupidvariablenameman

エラーとなる名前の例:

var
Document

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

変数のデータ型

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

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

数値型

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

var myAge = 17;

文字列型

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

var dolphinGoodbye = '魚をくれてありがとう。それじゃあ';

真偽値

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

var iAmAlive = true;

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

var test = 6 < 3;

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

配列

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

var myNameArray = ['クリス', 'ボブ', 'ジム'];
var myNumberArray = [10,15,40];

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

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

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

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

オブジェクト

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

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

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

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

dog.name

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

弱い型付け

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

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

var myString = 'こんにちは';

それが数字であったとしても、クォーテーションマークで囲むと文字列になってしまうので、気を付けてください。

var myNumber = '500'; // おっと、これは文字列型です
typeof myNumber;
myNumber = 500; // いいですね、数値型になりました
typeof myNumber;

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

まとめ

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

 

このモジュール内の他の文書

 

ドキュメントのタグと貢献者

このページの貢献者: tomouchi_, Uemmra3, chameleonhead
最終更新者: tomouchi_,