ここでは、IT系企業の新入社員向けにJavaScriptを解説しています。

フロントエンドエンジニアになるほどHTMLに詳しくなくてもいいけれど、Webアプリを作る上で必要な入力画面は自力で作りたい、そんなあなたのためのページです。

1. 変数を使い回す

JavaScriptの変数について学びましょう。

1.1 変数の宣言と初期化

<変数の宣言と初期化(<script>内だけを表示、以降同様)>

上記のソースコードを入力(またはコピー&ペースト)してください。

コンソールログ関数を使ってブラウザのコンソール画面(黒い画面)にメッセージを出力しました。

JavaScriptで変数を宣言する場合は、

var  変数名

と書きます。

var は variable の略です。

変数名のルールは、以下のとおりです。

  • 使用できる文字はUnicode文字と『_』、『$』※1
  • 先頭文字に数字は使用できない
  • 大文字小文字は区別される
  • 予約語は使用できない

※1 ただし、JQueryというJavaScriptのライブラリでは$を多用するため使わないほうが無難。

予約語とは、現在または将来にJavaScriptのキーワードとして使われる特殊な単語のことです。

MDN(Mozilla Developer Network)のサイトに一覧があります。

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Reserved_Words

1.2.変数への代入

以下の例では『a』という変数を宣言して数値の『10』を代入しています。

変数名 = 値

と書くことで変数に値を代入することができます。

で、数値の『10』がコンソールに表示されました。

ちなみに、このとき

とするとどうなると思いますか?

 

1.3.変数の代入と初期化を同時に実行

以下のように宣言と初期化を同時に実行することもできます。

さらに、

のように書けば『c』にも『d』にも『30』が代入されます。

のように変数を使って計算することもできます。

なお、以下のように書くと、

コンソールには2が表示されます。

数学的にはありえない表現ですが。。。。

 

では、この変数が使えると何が嬉しいのでしょうか?

答えは、変数は使い回すことができるからです。

複数箇所で同じ値が繰り返し使われていたときに変数を使わなければ

値の変更が大変ですが、変数であれば一箇所変えるだけで済むのです。

 

今回はJavaScriptの「変数」を作成しました。

 

次回は、JavaScriptの「数値表現」を学びます。

 

新人エンジニア向けJavaScript講座の一覧に戻る