変数とは? let と const を使いこなそう!超初心者のJavascriptの勉強

2020-05-18

プログラミングを勉強し始めると幾度となく目にすることになる「変数」について書いていきたいと思います。
私が学んでいた先生はこれから学ぶ人は「let」と「const」を使って覚えていくといいと言っていたので、ここではES6で使用される「let」と「const」をメインに書いていきます。
個人的にもletとconstを使用した方がミスも減らせて良いのではと思っています。

※環境はMacでブラウザはChromeとFireFoxです。

変数とは

変数とは、何度でもデータを書き換えることができます。言い換えれば「変数」は読み書き自由な保存先のようなものです。Javascriptでは「var」や「let」で宣言することができます。

※ 「const」は定数です。一度決めた値を変更することはできません。

変数を使ってみる

さっそく変数を使ってみましょう。
サンプルコードを、about:blankのconsoleに打ち込んでみてください。
参考:about:blankとは : about:blankを使いこなせ超初心者のJavascript勉強1回目

//変数 answer を宣言
let answer = 5;

//変数 answer をconsoleに呼び出す。
console.log(answer); // 5

変数を宣言するにはvar、letを使います。

※ ちなみにvarは昔からありES5まではvarしかありませんでした。ES6(Javascriptの規格のようなもの)からletとconstは登場しています。

letとvarは少しルールが違うだけでletで書いたものは、ほぼvarと置き換え可能です。

追記:参考までにGoogle's JavaScript Guideではもうvarは使ってはいけないと書かれているようなので、やはりvarは使わないほうが良さそうです。
(他にもairbnb guideなどguideによっても異なりますが)

参考サイト:13 Noteworthy Points from Google’s JavaScript Style Guide

初心者向けなので、違いの1つであるスコープについては深く掘り下げませんが、再宣言だけちらりとのちに紹介します。

変数の宣言

変数は「let (またはvar) 変数名 = データ」のように宣言します。
代入するという言葉をよく使うのですが上記の場合、「変数名にデータを代入する」というようにいうことができます。

いろいろ代入してみる

文字を代入してみる

////文字を代入してみる
//変数 answer を宣言し "仲間由紀恵"を代入
let answer = "仲間由紀恵";

//変数 answer をconsoleに呼び出す。
console.log("私が思う綺麗な人は" + answer + "さんです。");
// 結果 私が思う綺麗な人は仲間由紀恵さんです。

数字も入れば文字も変数に代入できます。ダブルクォーテーションまたはシングルクォーテーションで囲うのを忘れないようにしましょう。

追記:ちなみにGoogle's JavaScript Guide的にはシングルクォーテーションが推奨されていました。

変数に変数を代入してみる

変数に別の変数を代入することもできます。そしてあとから書き換えることもできます。

//変数 comedian を宣言し、"宮下草薙"を代入
let comedian = "宮下草薙";

//変数 who を宣言し、変数 comedian を代入
let who = comedian;

//変数 who をconsoleに呼び出す。
console.log("好きなコンビ芸人は"+ who + "です。"); // 好きな芸人は宮下草薙です。

////やっぱり気が変わっても大丈夫
comedian = "メープル超合金"

//変数 comedian をconsoleに呼び出す。
console.log("好きなコンビ芸人は"+ comedian + "です。"); // 好きなコンビ芸人はメープル超合金です。

//ちなみに who には代入していないので
console.log(who); // whoは宮下草薙のまま

上書きする時に let comedian = "メープル超合金" のようにletを書くことはできないので注意しましょう。
変数は1度しか宣言できません。ちなみにvarは可能ですが、もしcomedianという変数を作ったのを忘れて再び宣言してしまった時など少しこまります。

//varで実験
var comedian = "宮下草薙";
var comedian = "お笑い芸人";
console.log(comedian);
// お笑い芸人

//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 idol = "まゆゆ";
idol = "さっしー"; // 1回しか代入できないので"さっしー"は入らずエラー。

不変的な項目をconstで宣言します。
絶対に変えたくないものやゆるがないもの(円周率の3.14など)を入れるのがconstです。

追記:constはGoogle's JavaScript Guide的には変数名を全て大文字で書くことが推奨されています。(例: const IDOL= "まゆゆ";)
letとconstを変数名だけ見てすぐに判断できて便利そうです。

最後に

letとconstってvarと比べるとおしゃれな感じがするのはわたしだけでしょうか。

次はfunctionについて書いています。