No2.変数とデータ型について

変数?

変数は値をいれるための箱のようなものです。プログラムの中で値をセットしたり、参照したりします。
javascriptで変数はvar, let, constを使って定義します。
昔まではvarで定義で統一だったのですが、ES6(2015年)からlet, constが使えるようになっているようです。

後述する特徴からも、今後はlet, constを積極的に使うようにしたほうがいいかと思います。
ただモダンブラウザ(最近のブラウザ)以外は対応していないこともあるので、ブラウザが古いものもターゲットに入れる場合は、ちゃんと動作するのか調べる必要があります。

データ型?

型とは値の種類のことです。
基本型(数値、文字列、論理値、null、undefined)とオブジェクト型があります。

変数を使ってみる

variable.htmlなどの名前で下記ソースを書いて、ブラウザにドラックアンドドロップするなりして
ブラウザで開いてみましょう。

<!-- HTMLのコメント:変数をつかってみた -->
<html>
  <head>
    <title>variable test js</title>
    <meta charset="UTF-8">
    <script>
       function main(){
         var number1 = 10;
         var number2 = 103;
         var string1 = "文字列だー";
         var string2 = "これは!?";

         alert(number1 + number2);
         alert(string2 + string1);
       }
    </script>
  </head>
  <body onload="main();">
    javascript変数をごにょごにょ
  </body>
</html>


上記のような感じで「113」の結果がでたあとに、「これは!?文字列だー」がでてくるかと思います。

“function main” は関数です。(これはまた後ほど)この関数をbodyタグにonload属性がついていますが、このページをロードしたときに実行するという形になります。
内容としてはvarでnumber1,number2という数値を入れるための変数とstring1,string2という文字列をいれるための変数を用意して
それぞれを「+」しています。数値型同士を+すると、加算され、文字列を+すると文字列結合されます。

文字列と数値を足すと文字列結合として扱われます。上記で言うとnumber1 + string1の結果は”10文字列だー”となります。

let??

さっきのHTMLを書き換えてみましょう。

<!-- HTMLのコメント:letってなに?? -->
<html>
  <head>
    <title>variable test js</title>
    <meta charset="UTF-8">
    <script>
       var number1 = 10;

       function main(){
         number1 = 11;

         if(true){
           let test2 = 1;
           var number2 = 10;
           console.log("number1:"+number1);
           console.log("test2:"+test2);
         }

         console.log("number1:"+number1);
         console.log("number2:"+number2);
         console.log("test2:"+test2);
       }
    </script>
  </head>
  <body onload="main();">
    javascript変数をごにょごにょ
  </body>
</html>

結構書き換えました。。今回からalert関数ではなくconsole.logを使って結果を確認しています。
console.logはブラウザのデベロッパー機能に値を出力してくれる関数です。
google chomeでいうと、ブラウザを開いて右クリック=>検証を押してみましょう。consoleタブがあるので開くと、下記のように結果が出力されています。

mainが呼ばれて、number1に11がセットされます。
そのあとにif文(制御構文※今は気にしない)に差し掛かって、trueが入っているので中括弧内に入ります。
letでtest2が宣言され1が設定され、varでnumber2が宣言され10が設定されます。
この中で最初にnumber1が出力されて11,次test2は1、中括弧のブロックからでてnumber1は11でnumber2は宣言したときの10になっています。

そしてtest2はerrorとなります。内容は「test2 is not defined」 これは宣言されてないですよーっていうエラーです。
letはブロック内でしか効力がないので、外に出ると参照できなくなります。
number1は外側で宣言されていて、すべての箇所から呼び出し可能なグローバル変数です。
test2のように局所的な変数をローカル変数と言います。変数の効力が及ぶ範囲をスコープといいます。(この変数のスコープは〜とか)

なにがいいのかというと、一見グローバル変数のほうが便利に見えますが、
多用すると変数名がかぶったりしてプログラムが予期していない動作をしたりします。こういうのがバグにつながったりします。
ローカル変数にしておくと、そのブロック内にしか効力がないため、他のところで同じ名前をつかっても大丈夫です。

const??

constで宣言された変数は宣言時の初期値を変更することができません。
つまり

const test1 = 10;
test1 = 10;

みたいなことはできないということです。
とりあえず、constで使う場合は値を書き換えることのない定数などを入れる。と覚えておきましょう。
長くなったのでこの辺で。。