今回はJavaScriptの変数について解説します。
JavaScriptでは変数を使い、データを一旦格納し、別の箇所で使うことが可能です。
本記事では変数とは何か、変数の具体的な使い方を解説します。
加えて、代入演算子、単項演算子の使い方に関しても併せて触れていきましょう。
変数を理解することで、JavaScriptのコードが少し読めるようになるかもしれません。
JavaSciprtの変数とは？
変数とはデータを入れておく箱のようなものです。
箱には必ず名前を付けます。
この名前を変数名と呼びます。
たとえば、以下のように変数名を指定します。
var a = 2;変数には、数値や文字列など、あらゆるデータを入れることが可能です。
変数にデータを入れることで、プログラム内でデータを利用することができます。
変数を使った方が、読みやすいソースコードになります。
また、プログラムを修正する際、変数を使えば書き換えが楽になります。
このような理由で、変数は必ず使われているのです。
JavaSciprtの変数の使い方
JavaScriptの変数の使い方をみていきましょう。
○コード例
<!DOCTYPE html>
<html>
<head>
<title>テスト画面</title>
</head>
<body>
<script>
var a = 2;
var b = 3;
document.write(a + b);
</script>
</body>
</html>○実行結果
上記では「a」と「b」という変数にそれぞれ数値を格納しています。
JavaScriptでは変数を使う場合、「var 変数名 = 値」と書きます。
「document.write(a + b);」によって、変数同士を足し算しています。
aには2、bには3が格納されていたので、それらが足されて「5」が出力されます。
このように変数名を指定することで、中のデータを取り出すことが可能です。
もう1つ例をみていきましょう。
○コード例
<script>
var a = 2;
var b = a + 3;
document.write(b);
</script>○実行結果
上記では変数aに2を格納しています。
その次に、変数bに「a+3」を格納しています。
このように、変数と数値を足し算することも可能です。
また、足し算したデータを別の変数に格納できます。
代入演算子、単項演算子の使い方
今後は、代入演算子、単項演算子をみていきましょう。
代入演算子を使うと、変数に格納された数値を簡単に変更することが可能です。
単項演算子も同様に、数値に足したり引いたりできます。
代入演算子と単項演算子の具体的な使い方をみていきましょう。
代入演算子で変数の値を変更する
代入演算子とは、変数に対し値を代入するため演算子のことです。
代入演算子は次のように使います。
○コード例
<!DOCTYPE html>
<html>
<head>
<title>テスト画面</title>
</head>
<body>
<script>
var a = 2;
a += 2
document.write(a);
</script>
</body>
</html>○実行結果
変数aには2が格納されています。
その次の行で、代入演算子「+=」によって変数aに2がプラスされています。
よって、document.writeでの表示結果は4になるのです。
このように代入演算子を使うと、変数の値を増やすことが可能です。
ちなみに代入演算子を使わなくても「a = a + 2」と書けば、同じ処理ができます。
ただ、代入演算子の方がコード量が短くて済むのです。
また代入演算子「-=」を使うことで、変数の値を減らすこともできます。
○コード例
<script>
var a = 2;
a -= 2
document.write(a);
</script>○実行結果
2から2が引かれて、0になりました。
単項演算子で変数の値を変更する
続いて、単項演算子の使い方を紹介します。
○コード例
<!DOCTYPE html>
<html>
<head>
<title>テスト画面</title>
</head>
<body>
<script>
var a = 2;
a++;
document.write(a);
</script>
</body>
</html>○実行結果
単項演算子を使う場合、「{変数名}++」とします。
こうすることで、変数の値に「+1」がされます。
上記の例では、変数aに2が格納されており、単項演算子によって「+1」され、「3」が表示されます。
数値に「+1」したい場合は、単項演算子の方が便利です。
ただし単項演算子では「+2」や「+3」はできません。
また「+1」ではなく「-1」したい場合は次のようにします。
○コード例
<script>
var a = 2;
a--;
document.write(a);
</script>○実行結果
単行演算子「–」によって「-1」され、「1」が表示されました。
こちらも単に「-1」したい場合に便利です。
後ほど詳しく解説しますが、単項演算子はwhileでのループ処理で使うことになるので、覚えておきましょう。
まとめ
本記事ではJavaScriptで変数を使う方法、を解説しました。
変数を使うと、コード全体がすっきりします。
今回は短いコードを紹介しましたが、長いコードになると、より変数の便利さがお分かり頂けるかと思います。
コード量が増えると、どこに何の記述があるか分かりにくくなるので、変数を正しく使うようにしましょう。
また、代入演算子や単項演算子も覚えておくと便利です。
次回は、JavaScriptでalertを出す方法について解説します。
