【JavaScript 入門講座】変数を宣言して利用する

[JavaScript 入門講座]変数を宣言して利用する

変数とは
変数の宣言と値の代入
値が入った変数を利用する
文字列を変数へ代入する
計算式の計算結果を変数へ代入する
まとめ

本講座から「変数」を学習する。「変数」はプログラムで最も重要な概念の一つである。変数無しではプログラムは成り立たない、と言えないことも無い。本講座を始める。

変数とは

値とは数値や文字列の事を、値という。

数値や文字列の事を、値という。たとえば、「5」は数字の値。すなわち、数値という。たとえば、「"IORI"」は、「文字列で、文字列の値はIORIである」などと表現する。

変数とは変数とは、値を入れておく箱である。

変数とは、数値や文字列を入れておく箱である。箱である。ダンボールをイメージしてほしい。ダンボールに、数字が書かれた紙や文字が書かれた紙を入れる事ができる。そのイメージで良い。「変数はダンボール」と覚えてもかまわない。では、変数を利用したサンプルを掲載する。

001<script>
002var a ;
003</script>

このプログラムは変数aを宣言している。

変数の宣言 var [変数名] ;

変数を利用する場合、このように記述する。「今から変数を利用します。変数の名前は[変数名]です」とコンピューターに宣言するプログラムである。

001<script>
002var a ;
003</script>

このようなプログラムがあった場合、「今から変数を利用します。変数の名前は a です」とコンピューターに宣言している。変数は値を入れる箱である。このプログラムは「箱を使いますよ。箱の名前は a ですよ」とコンピューターに教えている。コンピューターに箱の存在を教えなければ、箱を利用する事はできない。
そして、「箱を使います。箱の名前は[変数名]です」という事を、変数の宣言という。解説は以上である。

変数の宣言と値の代入

変数の宣言と、変数へ値を代入する方法を学習する。

001<script>
002var a ;
003a = 10 ;
004</script>

1行目で、変数名がaの変数を宣言する。「いまから箱を使います。箱の名前は a です」とコンピューターに教えるプログラムである。
2行目が、今回新たに学習するプログラムである。

変数へ値を代入する [変数] = [値] ;

変数に値を代入する方法である。変数は箱である。変数を宣言しただけでは、値は入らない。つまり、空の箱である。いま、変数という箱に値を入れたい。変数に値を入れるためには、

[変数] = [値] ;

このように記述する。変数に値を入れる事を、「変数に値を代入する」と言う。

001<script>
002var a ;
003a = 10 ;
004</script>

2行目を解説する。変数名aという変数（今後、「変数a」と表記）に「10」という値を代入している。このプログラムを実行すると、変数aに値「10」が入る。
解説は以上である。

値が入った変数を利用する

変数を利用するサンプルプログラムを掲載する。

001<script>
002var a ;
003a = 5 ;
004alert ( a ) ;
005</script>

プログラムを実行すると、「5」と記載されたダイアログが表示する。

では、解説を始める。2行目で、変数aを宣言する。「箱を使います。箱の名前はaです」とコンピューターに教えている。 3行目で、変数aに「5」を代入している。 aという名前の箱に「5」を入れるイメージである。ここまでは問題ないだろう。問題は次である。集中力を高めてほしい。

004alert ( a ) ;

このプログラムは変数を利用しているプログラムである。いま、alert()の括弧の中に、「a」と記述した。 aはダブルクォーテーションで囲んでいない。つまり、文字列ではない。ダブルクォーテーションで囲んでいない文字列を、alert()の括弧の中に記述すると、それは変数とみなされ、変数の中から値が取り出される。

alert () の括弧の中に文字を記述する場合は、文字をダブルクォーテーションで囲む
ダブルクォーテーションで囲んでいない文字は、変数とみなされる
変数の場合は変数から値が取り出されて、ダイアログに表示される

いま、変数aの中には「5」が入っている。その値「5」が取り出される。

004alert ( a ) ;

このプログラムは次のプログラムと同じである。

004alert ( 5 ) ;

このように、変数に入っている値が取り出される。このプログラムを実行すると、「5」と記載されたダイアログが表示する。解説は以上である。
確認のため、もう一つサンプルプログラムを掲載する。

001<script>
002var a ;
003a = 15 ;
004alert ( "a" ) ;
005</script>

プログラムを実行すると「a」と表示する。

解説する。2行目で、変数aを宣言する。 3行目で変数aに数値「15」を代入する。変数aという箱の中に「15」が入る。最後の行で、・・・何をしているのだろうか？
変数aに入った値を表示したい、と言うのだろうか？しかし、aをダブルクォーテーションで囲んでいるので、 aは変数ではなく、文字列として扱われる。そのため、このプログラムを実行すると「a」と表示する。

文字列を変数へ代入する

最後に、文字列を変数に代入するプログラムを掲載する。

001<script>
002var name = "IORI" ;
003alert ( name ) ;
004</script>

このプログラムを実行すると、「IORI」と表示する。

プログラムを解説する。 2行目で、変数nameを宣言して、さらに文字列「IORI」を変数nameに代入している。「変数の宣言」と、「値の代入」を1行で行なうプログラムである。

変数の宣言と値の代入 var [変数] = [値] ;

変数の宣言と、値の代入を1行で記述する方法である。一般的には（・・・と言うか、ほとんど全てのプログラムにおいて）、この宣言方法を利用する。

001<script>
002var name = "IORI" ;
003alert ( name ) ;
004</script>

2行目の変数名であるが、変数名を「name」とした。通常、変数名には分かりやすい英語を利用する。変数名が「name」なら、「変数の中には、何かの名前が入っている」と想像しやすい。変数名を「a」「b」等とする事はあまり無い。変数の中に何が入っているか想像できないからである。ただ当講座では、変数名に「a」「b」を利用する場面もある。
また、今回変数nameに文字列を代入した。変数には、数値だけでなく文字列も代入できる。
では、プログラムの3行目を解説する。 alert()の括弧の中に、変数nameを記述している。

nameはダブルクォーテーションで囲んでいない
つまり、文字列ではない
つまり、変数
alert()の括弧の中に変数を記述すると、変数に入った値が取り出される
変数nameには、文字列「IORI」が入っている

alert()の括弧の中にnameと記載されているが、ダブルクォーテーションで囲んでいないため、変数とみなされる。 alert()の括弧の中に変数を記述すると、変数に入っている値が取り出される。変数nameには文字列「IORI」が入っている。つまり、サンプルプログラムは次のプログラムと同じである。

001<script>
002var name = "IORI" ;
003alert ( "IORI" ) ;
004</script>

このプログラムを実行すると、「IORI」と表示する。

計算式の計算結果を変数へ代入する

001<script>
002var result = 2 + 3 ;
003alert ( result ) ;
004</script>

プログラムを実行すると「5」と表示する。

計算式の計算結果を、変数へ代入するプログラムである。まず、2行目で変数resultを宣言する。そして・・・、何をしているのかな？ 2行目は何をしているのかな？ 2行目は次のプログラムと同じである。

002var result = ( 2 + 3 ) ;

2行目は、「 2 + 3 」の計算結果を変数resultへ代入するプログラムである。変数を代入する「 = 」の優先順位は低い。そのため、まず加算処理が実行する。

001<script>
002var result = 5 ;
003alert ( result ) ;
004</script>

2行目で「 2 + 3 」の計算結果「5」が変数resultへ代入する。 3行目で、変数resultの値を取り出す。変数resultの値は「5」である。

001<script>
002var result = 5 ;
003alert ( 5 ) ;
004</script>

プログラムが実行すると、「5」と表示する。

まとめ