更新日: 2017年4月5日
公開日: 2015年12月5日

ゼロから始めるJavaScript講座Vol03　変数の使い方

ゼロから始めるJavaScript講座　変数の使い方
変数とは
変数の宣言と代入
変数名の書き方
変数の使い方

ゼロから始めるJavaScript講座　変数の使い方

変数とは

データを入れる箱のようなものです。この箱はさまざまなデータの出し入れに使用します。

まずはお手本にある通り、変数を使ったプログラムを書いてみましょう。ファイル名: variable.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>変数</title>
</head>
<body>
    <script>
        // 変数hpを定義
        var hp;
        // 変数hpに値を代入
        hp = 200;

        // 変数mpを定義し値に代入
        var mp = 80;

        // HPとMPを表示
        document.write('<p>現在のHPは' + hp + '現在のMPは' + mp + '</p>');
    </script>
</body>
</html>

作成したプログラムの「hp」と「mp」が変数になります。

変数の宣言と代入

JavaScriptの変数は、利用する前に宣言をする必要があります。varの後ろに半角スペースを挟んで変数の名前を書きます。

var宣言を行うことで変数を定義できます。変数はデータを入れる箱のようなもので、宣言はこの箱を作成してあげるイメージです。

次にhp = 200とありますが、これはvar宣言により作成された「hp」という箱に200という値を入れています。

算数や数学では「=」(イコール）は等しいという意味ですが、プログラムでは「=の右側にある値を、=の左側に書かれた名前の変数に入れる」という意味になります。

このように「=」（イコール）を使って変数に値を入れることを代入といいます。

変数の宣言と代入のイメージは以下となります。

var宣言により「hp」という名前の箱を作成し、箱の中に「200」という値を入れています。

なお変数の宣言と代入は同時に行うことも可能です。

変数「mp」はvar宣言と「80」という値の代入を同時に行っています。

変数名の書き方

JavaScriptにおける変数の書き方は以下となります。

var宣言を行う
名前に利用できるのは英数字か__(アンダースコア)、$_(ドル記号)で、数字が使えるのは2文字目以降
あらかじめJavaScriptで予約されている名称（予約語）は名前に利用できない予約語例：if、for、float、class、new、true、var
データ型宣言は必要ない(宣言が必要な言語を学んだ人用の説明) また変数名が長くなる場合、単語の区切りとして_(アンダースコア)か単語の始めのみ大文字(キャメルケース）を利用することが一般的です。

変数の使い方

変数に入れた値を利用する際は、

上記のように「hp」「mp」と2つの変数をシングルクォーテーションなしで書くことで、変数として認識され、箱の中の値を取り出すことができます。また「+」（プラス）を利用すると文字列が結合できます。

具体的に変数の値の取り出しと文字列の結合は、以下の手順で処理が行われています。

このように変数は代入した値を取り出し利用することができます。

また変数の値を変更することが可能で、同じ変数に別な値を代入すると、代入された値が変数の値として上書きされます。

実際にvariable.htmlへ変数hpの値を上書きした上で表示する処理を追記してみましょう。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>変数</title>
</head>
<body>
    <script>
        // 変数hpを定義
        var hp;
        // 変数hpに値を代入
        hp = 200;

        // 変数mpを定義し値に代入
        var mp = 80;

        // HPとMPを表示
        document.write('<p>現在のHPは' + hp + '現在のMPは' + mp + '</p>');

        // 変数hpの値を上書き
        hp = 100;

        // HPとMPを表示
        document.write('<p>現在のHPは' + hp + '現在のMPは' + mp + '</p>');
    </script>
</body>
</html>