前回の「自主学習3-1」に引き続き、JavaScriptの実践編をお送りします。書籍で学習した変数と定数まとめはコチラ。
関連記事fa-arrow-circle-rightcontents
変数…let文について
変数宣言をしてみよう
letとは？
let文はブロックスコープのローカル変数を宣言し、任意で値を代入して初期化することができます。
MDN web docs
変数に文字列を代入してみよう
1、letで変数を宣言する。変数nameに「犬」を代入
2、変数nameを出力する
let name ="犬";
alert(name);
//コードをコピペして下のエディタから出力結果を確認してみよう。実行ボタンを押すとダイアロボックスに「犬」が出力されます。
- 同じ値を繰り返し使用できる。
- 変更に対応しやすい。
- 自分で変数名を決めることができるため、値の意味が分かりやすい。
変数に数値を代入してみよう
1、letで変数を宣言する。変数lengthに「5」を代入
2、変数lengthを用いて円の面積を出力する
※変数名のlengthとは日本語訳で「長さ」を意味します
let length=5;
alert(length*length*3);
//コードをコピペして先ほどのエディタから出力結果を確認してみよう。実行ボタンを押すとダイアロボックスに円の面積を求める公式の計算結果「75」が出力されます。
変数の再代入をしてみよう
一度値を代入した変数に、その後再び別の値を代入すると、変数の中身が上書きされます。
定義する時と違って「let」の記述は必要なく、「変数名 = 新しい値」と記述することで値が変更されます。
let number = 7;
number = 9;
number = 10;
alert(number);
//コードをコピペして先ほどのエディタから出力結果を確認してみよう。この場合、変数numberは7から9、最後10に上書きされていますので、出力結果は「10」となります。
定数…const文について
定数宣言をしてみよう
constとは？
定数 (const) は、変数（let）と同じくブロックスコープでローカル変数を宣言し、任意で値を代入して初期化することができます。ただし定数の値は、再代入による変更はできず、再宣言もできません。
MDN web docs
定数と変数の違いとは？
変数は再代入が可能でしたが、定数では再代入が禁止されています。「後から値を変更することができない」という特性によって、より安全にコードを書くことができるようになります。
テンプレートリテラルについて
今までは文字列や定数に「+」記号を用いて連結を行っていましたが、ES6には「+」以外の連結方法として「テンプレートリテラル」という連結方法があります。テンプレートリテラルを用いることで、文字列の中に定数や変数を埋め込むことが可能です。
テンプレートリテラル記述方法
文字列の中で「${定数}」とすることで、文字列の中に定数や変数を含めることができます。この時、文字列全体をバッククォーテーション（`）で囲います。
const name = "ゴミコ";
const age = "36";
alert(`${name}は${age}歳らしいよ`);
//コードをコピペして先ほどのエディタから出力結果を確認してみよう。実行ボタンを押すと、定数が連結された結果「ゴミコは36歳らしいよ」と出力されます。
自主学習3-2について感想
※基礎部分の学習に関しては講師コメント無しでお送りしています。
次回の記事
にほんブログ村
