【Javascript】変数について

JavascriptやPHPのようなプログラミング言語には変数という機能があります。今回はプログラムの基本でもある変数についてちょっとしたメモになります。

 

変数とは

変数とはプログラマーがあるデータを使用したい、使いまわしたいときに、そのデータを保存しておく機能です。変数として保存しておいたデータは必要な時に呼び出し、加工したり出力したりすることができます。いわば変数とは、データの値や文字列を格納しておく器の様なものなのです。それでは次に変数を実際に使用した例を見てみたいと思います。

HTMLを準備する

今回はこのようなHTMLとJavascriptで、文章の書き換えを例に、変数の使い方を見ていきます。
まずこのHTMLがどのように映るかを見てみましょう。

このように映るはずです。「body」タグ内の「ｐ」タグ内、すなわち「ここに変数が入ります」という文章がブラウザ上に表示されます。
今回はこの文章を変数に格納したデータに書き換えてみましょう。

Javascriptを書き加える

「script」タグ内にJavascriptのコードを挿入しました。それでは今度はどのように映るのか確認してみましょう。

「ここに変数がはいります」という文章が「10」に書き換わりましたね。これは、「変数 item の中に入ってる”10″」というデータが表示されているのです。

試しに「 item =1000；」に変更してみましょう。

はい！無事に「1000」に変更されましたね。
このほかにも変数は文字列を入れたり、計算することも可能です。

変数の使い方

先程、Javascriptを使用した例を見ましたが、細かく見ていくと変数は次のようなパターンの使い方があります。

1. 変数を「定義」する
2. 変数にデータを「代入」する
3. 変数からデータを「読み取る」
4. 変数のデータを「書き換える」

4.に関しては使用しない場合もあります。それぞれどのようなものなのか更に細かく確認していきましょう。

変数を定義する

データを保存したい時、変数を定義するという作業が必要になります。

「let」や「var」という単語の後半角スペース空けて、定義したい変数名を書くことで変数は定義されます。
上の例の場合、「item」という変数が定義されたことになります変数名の付け方には多少の条件はありますが、自分ですきな変数名を付けることができます。

変数にデータを代入する

上記のように変数にデータを代入します。代入には「変数名 = 代入したいデータ」という形で行われています。「＝」は数学では”同じ大きさ”という意味合いを持つかもしれませんが、プログラミングの界隈では「代入演算子」と呼ばれ「代入する」という意味でつかわれています。

データを読み取る

変数に保存したデータを読み取ったり、出力したい時は、定義した変数名をそのまま書くだけで可能です。今回の実習プログラムでは、[textContent = item] という形で出力しました。開発環境などでは「console」などで読み取られることが多いです。

変数のデータを書き換える

一度定義してデータを代入した変数でも、データを書き換えることができます。例を見てみましょう

 

結果はコンソールに「10」と「1000」が表示されます。「item = 1000」のところで、変数「item」のデータが書き換わった証拠ですね。

変数についての諸注意

多少の条件はあるものの、変数名は自分である程度隙に付けることができます。しかし諸注意として以下の約束事があります。

1. 英数字、日本語の漢字やカタカナ、アンダースコア（_）、ダラーマーク（＄）が使用可能。
2. 「-」、「+」、「＝」といった演算子は使用できない
3. 1文字目に数字は使えない
4. 予約語は使えない（別記事で説明）

Javascriptのみならず、PHPでも変数は使用し、同様のルールを持ちます。
プログラミングの世界ではアルファベットの大文字・小文字を区別します。オブジェクトやメソッド、プロパティなどの大文字・小文字を間違えるとプログラムが動作しなくなりますが、変数に至っては「別の変数名」として取り扱ってしまうので注意が必要です。「item」と「Item」といった、一文字だけ大文字と小文字の違いで、別の変数と捉えられるわけですね。この辺りしっかり押さえておきましょう。

それでは今回はここまでです。お疲れ様でした。