フロントエンドエンジニアを目指す! JavaScript講座(2)変数

前回は、オブジェクトと命令について勉強しました。

フロントエンドエンジニアを目指す! JavaScript講座(1)オブジェクトと命令
https://note.com/hamasan918/n/nf0e6f2de3c36?creator_urlname=hamasan918

今回は、JavaScriptに限らず、いろいろなプログラム言語において使用される、「変数」についてです。

変数とは?

変数には、繰り返し使う値や、入れ替わる値、長いパスなどを入れます。

この変数ですが、メモリに記憶されます。

そのため、実行したプログラム内でのみ有効となります。

変数を、繰り返し使うもの、と言われてもイメージがしにくいですね。

なぜ、変数を使うのか、以下の例をご覧ください。

例)
変数を使用しない場合
document.write('0000-00-0000');
(コード100行)
document.write('0000-00-0000');
(コード100行)
document.write('0000-00-0000');

0000-00-0000に変更があった場合、すべて書き換えることになります。

「文字の全置換でできるでしょう」と思われるかもしれませんね。

しかし、0000-00-0000-11など、部分一致の文字列がある場合に、予期せぬ修正になる場合も……。

また、変更箇所の確認の手間が複数回かかります。


変数を使用する場合
var telNum = '00000-11-2222'
 document.write(telNum);
(コード100行)
document.write(telNum);
(コード100行)
document.write(telNum);

telNumの値を書き換えるだけになるため、安全です。
確認も、telNumの一か所だけで済みます。

変数の定義方法

var 半角英数字大文字小文字の文字列 = 価

が、変数の定義方法です。

varはvariable、英語で変数を意味します。

var をつけることで、以降、変数を定義しますよ、と宣言しているのです。

変数は一つ目の単語は全て小文字、二つ目以降は頭文字のみ、大文字にして単語のつなぎ目がわかるように書きます。

varSample
のようにです。

この書き方、書き方を命名規則と言いますがキャメルケースと言います。

大文字のところをラクダのコブに見立てているんですね。

他にもアンダーバーを使用するスネークケース、ハイフンを使用するケバブケースがありますが、キャメルケースがスタンダードな書き方でしょう。

=の両脇の半角スペースはなくても大丈夫ですが、読みやすさを読みやすくするために、入れることが多いです。

空白は何個でもよく、またタブでも大丈夫です。

この、タブやスペースを空白文字と呼びます。
JavaScriptではスペースは必ず半角スペースを使ってください。

変数を試してみる

試しに、追加で命令文を書いてみます。

Windowというオブジェクトに、alertというメソッドを指定します。

アラートウィンドウを出す、という命令文になります。

前回使用したファイルに、以下のコードを書いてみましょう。

window.alert('文字列を表示する');

()の中に値を設定することを、「代入」と言います。
()の中には、document.write文と同じ文章にします。

document.write('文字列を表示する');
window.alert('文字列を表示する');

次に、プレビューします。

見慣れたアラートウィンドウが表示されましたね。

このとき、アラートウィンドウ以外の文字がないことにお気づきでしょうか。

document.writeで指定した文字列は、アラートウィンドウを閉じてから表示されます。

命令は実行されているのですが、命令された内容が表示がされていないだけなのです。

では、この文字列「変数のテストです」を変数にします。

    <script>
       var testText = '変数のテストです';
       document.write(testText);
       window.alert(testText);
   </script>  

次に、プレビューします。

アラートウィンドウを「OK」で閉じます。

このように、変数を使用して表示文字列を変えることができました。

まとめ

変数の定義の仕方と使い方は以下のとおりです。

1.var で、変数を定義することを宣言する

2.半角英数字、大文字小文字で、キャメルコードで変数名を書く

3.=を書く

4.右辺に値を代入する

5.使用時はクォーテーションなし

変数は必ずと言っていいほど使われるので、書き方をしっかり覚えましょう。

**

今日は以上です。

Twitterではブログに書いていないこともつぶやいているので、ぜひフォローしてください。
https://twitter.com/HAMA3san

ストリートアカデミーで毎月講座を開催中。
https://www.street-academy.com/steachers/198346

note専用コミュニティへの招待について

https://note.mu/hamasan918/n/ne4d98f9db9ec

note専用コミュニティ、作成しました。コミュニティでは質問などを受け付けています。毎月500円となります。