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



ゼロから始めるJavaScript講座Vol03 変数の使い方
目次
  1. ゼロから始めるJavaScript講座 変数の使い方
  2. 変数とは
  3. 変数の宣言と代入
  4. 変数名の書き方
  5. 変数の使い方

ゼロから始める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>

javascript変数1-639

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

変数の宣言と代入

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

javascript変数2-639

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

javascript変数3-639

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

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

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

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

javascript変数4-639

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

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

javascript変数5-639

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

変数名の書き方

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

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

javascript変数7-639

変数の使い方

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

javascript変数8-639

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

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

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

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

実際に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>

javascript変数10-639

変数hpの値が200から100に上書きされ、変数hpをdocument.write()で表示した際の結果が前と後で異なります。

NEXT LESSON ☛ データ型の種類

PREV LESSON ☛ JavaScriptの基本文法

関連記事

CodeCampus編集部
この記事を書いた人
CodeCampus編集部
\ 無料体験開催中!/自分のペースで確実に習得!
オンライン・プログラミングレッスンNo.1のCodeCamp