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

こんにちはナカモトです。

前回からまたしても時間が空いてしまいました。

前回の記事とはまた違うプログラミングを勉強し始めると幾度となく目にすることになる「変数」について書いていきたいと思います。

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

変数とは

超初心者なので言葉で説明するのは難しいですがプログラミングを始めると変数については言葉で説明しなくともなんとなく理解することができると思います。あえてするならば「変数」は読み書き自由な保存先のようなものです。

変数を使ってみる

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

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

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

変数を宣言するにはvar、let、constを使います。letとvarとはちょっと違うのがconstという感じでしょうか。
varは昔からありES5まで1つしかありませんでした。letとconstはES6から登場しています。

私が学んでいる先生はこれから学ぶ人はletとconstを使って覚えていくといいと言っていたので、ここではletとconstを使って書いていきたいと思います。少しルールが違うだけでほぼvarと置き換え可能です。
個人的にもletとconstを使用した方がミスも減らせて良いのではと思っています。
初心者なので、違いの1つであるスコープについては深く掘り下げません。※再宣言だけちらりと紹介します。

変数の宣言

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

いろいろ代入してみる

文字を代入してみる

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

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

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

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

//変数 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

変数は複数まとめて宣言することが可能です。また、変数通し数式に使うこともできます。

数式を入れてみる

let divide = 30/5; //30割る5は6なので6が代入される
console.log(divide); //6

数式を入れると答え(結果)を代入することができます。

といろいろと代入してみました。他にもいろいろ代入できそうです。
どんなことができるのか遊んでみるのも楽しいです。

letとconstの違い

上記でうっすらとletとvalueの違いを説明しましたが、constとの違いもさらっと説明したいと思います。

constは定数を扱える変数で、再代入することができません。

const idol = "まゆゆ";
idol = "さっしー"; // 1回しか代入できないので"さっしー"は入りません。
console.log(idol); //エラー

ゆるぎなくまゆゆが一推しなので、constで宣言してみました。推し変はできないのです。
絶対に変えたくないものを入れるのがconstです。

最後に

変数名のつけ方にはルールがあります。
次回変数名のつけ方について説明できればと思います。