プログラミングを勉強し始めると幾度となく目にすることになる「変数」について書いていきたいと思います。
私が学んでいた先生はこれから学ぶ人は「let」と「const」を使って覚えていくといいと言っていたので、ここではES6で使用される「let」と「const」をメインに書いていきます。
個人的にもletとconstを使用した方がミスも減らせて良いのではと思っています。
※環境はMacでブラウザはChromeとFireFoxです。
変数とは
変数とは、何度でもデータを書き換えることができます。言い換えれば「変数」は読み書き自由な保存先のようなものです。Javascriptでは「var」や「let」で宣言することができます。
※ 「const」は定数としての役割として使ったりもします。
変数を使ってみる
さっそく変数を使ってみましょう。
サンプルコードを、about:blankのconsoleに打ち込んでみてください。
参考：about:blankとは : about:blankを使いこなせ超初心者のJavascript勉強１回目
//変数 answer を宣言
let answer = 5;
//変数 answer をconsoleに呼び出す。
console.log(answer); // 5
変数を宣言するにはvar、letを使います。
※ ちなみにvarは昔からありES5まではvarしかありませんでした。ES6(Javascriptの規格のようなもの)からletとconstは登場しています。
letとvarは少しルールが違うだけでletで書いたものは、ほぼvarやconstと置き換え可能です。
追記：参考までにGoogle’s JavaScript Guideではもうvarは使ってはいけないと書かれているようなので、やはりvarは使わないほうが良さそうです。
(他にもairbnb guideなどguideによっても異なりますが)
参考サイト：13 Noteworthy Points from Google’s JavaScript Style Guide
変数の宣言
変数は「let (またはconst) 変数名 = データ」のように宣言します。
代入するという言葉をよく使うのですが上記の場合、「変数名にデータを代入する」というようにいうことができます。
いろいろ代入してみる
文字を代入してみる
////文字を代入してみる
//変数 answer を宣言し “キウイ”を代入
let answer = “キウイ”;
//変数 answer をconsoleに呼び出す。
console.log(“私が好きなフルーツ” + answer + “です。”);
// 結果 私が好きなフルーツはキウイです。
数字も入れば文字も変数に代入できます。ダブルクォーテーションまたはシングルクォーテーションで囲うのを忘れないようにしましょう。
追記：ちなみにGoogle’s JavaScript Guide的にはシングルクォーテーションが推奨されていました。
変数に変数を代入してみる
変数に別の変数を代入することもできます。そしてあとから書き換えることもできます。
//変数 kiwi を宣言し、”キウイ”を代入
let kiwi = “キウイ”;
//変数 fruitを宣言し、変数 kiwi を代入
let fruit = kiwi;
//変数 fruit をconsoleに呼び出す。
console.log(“好きなフルーツは”+ fruit + “です。”); // 好きなフルーツはキウイです。
////やっぱり気が変わっても大丈夫
fruit = “ラズベリー”;
//変数 fruit をconsoleに呼び出す。
console.log(“好きなフルーツは”+ fruit + “です。”); // 好きなフルーツはラズベリーです。
// kiwi には代入していないので変わらない
console.log(kiwi); // kiwiはキウイのまま
上書きする時に let fruit = “ラズベリー” のように再びletを書くことはできないので注意しましょう。
変数は1度しか宣言できません。ちなみにvarは可能ですが、もしfruitという変数を作ったのを忘れて再び宣言してしまった時など少しこまります。
//varで実験
var fruit = “キウイ”;
var fruit = “ラズベリー”;
console.log(fruit); // ラズベリー （エラーにならない）
//letで実験
let exp = “キウイ”;
let exp = “ラズベリー”;
console.log(exp); // 既に宣言されているためエラー
エラーとなることですでに宣言されているということがわかりやすくなり、宣言をしたことを忘れて間違えて使ってしまうことがなくなります。
変数を複数まとめて宣言してみる
let one = 1, two = 2; //カンマで続けて宣言できます
console.log(one); //1
console.log(two); //2
console.log(one + two); //3
変数は複数まとめて宣言することが可能です。また、変数通し数式に使うこともできます。
追記：参考までにGoogle’s JavaScript Guide的には複数まとめて宣言するのはよくないようです。ひとつずつ宣言するのが良さそうです。
数式で代入
let divide = 30/5; //30割る5は6なので6が代入される
console.log(divide); //6
数式を入れると答え(結果)を代入することができます。
といろいろと代入してみました。他にもいろいろ代入できそうです。
どんなことができるのか遊んでみるのも楽しいです。
letとconstの違い
上記でうっすらとconstの違いを説明しましたが、詳しく説明したいと思います。
constはプリミティブ型の定数を扱うことができ、再代入することができません。
const tea = “烏龍茶”;
tea = “緑茶”; // 1回しか代入できないので”緑茶”は入らずエラー
不変的な項目をconstで宣言します。
絶対に変えたくないものやゆるがないもの(円周率の3.14など)を入れるのがconstです。
追記：constはGoogle’s JavaScript Guide的には変数名を全て大文字で書くことが推奨されています。（例： const TEA= “烏龍茶”;）
letとconstを変数名だけ見てすぐに判断できて便利そうです。
最後に
letとconstってvarと比べるとおしゃれな感じがするのはわたしだけでしょうか。
次はfunction（関数）について書いています。
