超入門 JavaScript ③　～変数②～

2020年3月27日 13:34

こんにちは。
前回の超入門②では、変数の概要と基礎的な使い方について解説しました。
今回も引き続き変数について、サンプルコードも交えて解説をしていきます。

プログラミングを教えていて肌で感じるんですが、変数のところで躓く人が少なからずいます。
変数で理解が浅い、あるいは理解できてないという状態で先に進んでしまうと、もう～ The End ～です。

超入門①のHello Worldや、②の変数は、算数で言うと足し算、引き算ぐらいの知識にあたります。
なので変数についてはそれこそ「完璧」と言える状態で、第三者に説明できるぞ！ぐらいまで理解した上で先に進んでもらえればと思います。

変数は、ひとことで言えば「変わる数」である、と前回の記事で解説しました。
そしてサンプルプログラムで、message という名前の変数を作り、「Hello World」という文字列データを message に入れてあげました。
覚えていますか？？
コードで書くと以下の通りです。

var message = 'Hello World';

その後、 message 変数の中身を「Hello World」から、「May the force be with you!」という文字列に書き換える例を出しました。
これもコードにしてみましょう。

var message = 'May the force be with you!';

このようにして、１つの変数 message は、何かデータを代入してあげるたびに中身を変化させていくのです。
これが、変数(変わる数)と呼ばれる所以です。

さて、それでは簡単なサンプルを通して、変数の使い方に慣れていきましょう。
下に示したプログラムを、sample2.html として作成してください。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Hello World</title>
<script>
 var message = 'Hello World';
 alert(message);

 message = 'May the force with you!';    // この行では「var」は不要
 alert(message);
</script>
</head>
<body>
 
</body>
</html>

完成したら、ブラウザで動作を確認してみてください。

アラートが２度ポップアップされ、１度目は「Hello World」、２度目は「May the force be with you!」が表示されます。

コード内の「//」で始まっているのは「コメント」です。
プログラム内にコメントを残しておくことで、後になってからプログラムを読んだ時わかりやすい利点があります。
またそれ以上に、仕事でプログラムを書くようになると、チームで開発することがほとんどなので、チームメイトが見た時にわかりやすくする意味があります。

JavaScriptプログラム内にコメントを書く方法は２種類です。

①「//」で始める
　→　１行のみのコメントを書く場合

②「/*」と「*/」でコメントを挟む
　→　複数行のコメントを書く場合

変数とは関係ない内容ではありますが、この機会に覚えておくと良いでしょう。

ではコードを解説していきます。
気になるのは以下の行ではないでしょうか。

message = 'May the force with you!';    // この行では「var」は不要

コメントにも記述していますが、なぜこの行に「var」が不要なのでしょうか。

理由は、messageという変数が、この行以前に既に宣言済だからです。
一度、varキーワードとともに宣言された変数は、中身を書き換える(再代入する)際に宣言しなおす必要がありません。

★

ここまで、理解できましたでしょうか？
問題なければ、様々なデータを変数に入れて、アラート表示させる練習をしてみましょう。

何をどうすれば良いのかわからない方向けに、例題を掲載しておきます。
これまでの投稿で解説していない内容も含まれているため、先ほどの「コメント」を使ってコード内で簡単な説明を加えておきます。

なんとなくわかってきたら、自分自身でもいろいろ書き換えて、動かしてみてください。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Hello World</title>
<script>
 var something = 'Hello';
 alert(something);

 something = 100;
 alert(something);

 something = true;       // 真偽値の「真」を表す値。偽は「false」
 alert(something);

 something = 1 + 1;      // 計算結果を変数に入れることもできます
 alert(something);       // 「2」が表示されますよね！

 something = '1' + '1';  // 「'」で囲まれているので、数値に見えても実は文字列です！
 alert(something);       // '1'という文字と'1'という文字が足されているので結果は？？
</script>
</head>
<body>
 
</body>
</html>

最後の結果については、正解をコメントしていません。
ぜひ自分自身で考えて仮説をたて、動作させてみて検証しましょう！

★

基礎的な勉強の段階では小さいものしか作れず、正直、面白みには欠けるかもしれません。
変数については次の投稿まで続きます。
次回は変数のデータ型をテーマに書く予定なので、頑張って続けていきましょう！

最後までお付き合いいただきありがとうございましたm(__)m

戻って変数①を復習される方はこちらへどうぞ。

このまま次へ進まれる方はこちらへどうぞ。

それでは良いプログラミング・ライフを！

超入門 JavaScript ③ ～変数②～

いいなと思ったら応援しよう！

超入門 JavaScript ③　～変数②～