自主学習3-2「JavaScript実践(変数と定数、リテラルについて)」

前回の「自主学習3-1」に引き続き、JavaScriptの実践編をお送りします。書籍で学習した変数と定数まとめはコチラ。

関連記事

変数…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について感想

ゴミコ
コードを書くときは、まず「変数や定数を宣言する」ということから始まるのね。宣言しないと何も始まらないってわけね。

※基礎部分の学習に関しては講師コメント無しでお送りしています。

次回の記事

にほんブログ村 IT技術ブログへ
にほんブログ村