const と let はどちらを先に考えればよいですか

まず const で書きはじめて、再代入が必要になった変数だけ let へ変えるのが原則です。この順番なら let が残っている場所イコール値が変わる場所になり、コードを読む人が変化する箇所だけを追えます。

const で宣言した配列に要素を追加できるのはなぜですか

const が固定するのは名前と値の結び付きだけで、値の中身は固定しません。works.push("自己紹介カード") は中身の変更なので通り、works = [] は別の値への差し替えなので TypeError になります。

var を見かけたらどうすればよいですか

既存のコードで見かけたら、再代入があるなら let、無いなら const に置き換えて問題ありません。var は再宣言できてしまい書き間違いに気付けないため、新しく書くコードでは使わないでください。

let と const を使い分ける｜コードで実践

JavaScript入門：コードを動かす

HTML に JavaScript を読み込むところから始め、コンソール、文字列と数値、let と const、データ型、型変換、比較・論理・三項・null 合体演算子を学ぶ全 23 レッスン（335 分）の入門コースです。最後は、変数と式を使ってプロフィールの見出し用の値を組み立てます。if 文、配列とループ、DOM 操作は後続コースで扱います。

このレッスンで分かること

const は再代入できない宣言、let は再代入できる宣言です

迷ったらまず const で書き、書き換えが必要になったときだけ let にします

同じ文字を 5 か所に書いてしまう

第1章では console.log("山田太郎") のように、値を直接書いていました。名前を 5 か所で表示するなら、同じ文字列を 5 回書くことになります。表記を直したくなった日には 5 か所すべてを探して回ることになり、1 か所でも取りこぼすと表示がちぐはぐになります。

変数を使うと、値に名前を付けて 1 か所で管理できます。宣言に使うキーワードは const と let の 2 つです。

JavaScript

const author = "山田 太郎";
const heading = "作品一覧";
console.log(author);
console.log(heading);

const 名前 = 値; が宣言の形です。等号 = は「等しい」ではなく「右の値を左の名前に入れる」という意味を持ちます。数学の記号とは役割が違うので、最初のうちは「author に山田太郎を入れる」と声に出して読むと混乱しません。

まず const で書く

const は再代入できない宣言です。一度値を入れたら、その名前に別の値を入れ直せません。

JavaScript

const author = "山田 太郎";
author = "佐藤 花子"; // TypeError: Assignment to constant variable.

不便に見えますが、読むときはむしろ楽になります。const と書いてあれば「この名前の中身は最後まで変わらない」と分かるので、途中で書き換わる可能性を追いかけずに読み進められます。

const には、宣言と同時に値を入れなければならないという決まりもあります。const bio; のように値を省くと SyntaxError になります。

書き換えるときだけ let

後から値を入れ直したい場面では let を使います。

JavaScript

let status = "下書き";
status = "公開中";

let views = 100;
views = views + 1;

2 つ目の形は、今の値をもとに新しい値を作って同じ名前に入れ直す書き方です。右側が先に計算され、その結果が左の名前に入ります。let は初期値なしでも宣言できますが、値を入れる前に読み出すと undefined になります。

キーワード	再代入	使いどころ
`const`	できない	既定でこちらを使う
`let`	できる	途中で書き換えるときだけ

判断の順番まず const で書きます。実行して「再代入できない」と言われたら、そこではじめて let に変えます。この順番なら、let は本当に必要な場所だけに残ります。

よくある間違い

書き換えるつもりの変数を const のままにしてしまうのが 1 つ目です。

JavaScript

const greeting = "こんにちは";
greeting = greeting + " 山田さん"; // TypeError

let greeting = "こんにちは"; に直します。

2 つ目は、代入したいだけなのに 2 回目にも let を書いてしまうケースです。

JavaScript

let views = 100;
let views = 101; // SyntaxError 同じ名前は宣言できない

2 回目は宣言ではなく代入なので、let を外して views = 101; と書きます。

このレッスンで分かること

const は再代入できない宣言、let は再代入できる宣言です

迷ったらまず const で書き、書き換えが必要になったときだけ let にします

同じ文字を 5 か所に書いてしまう

変数を使うと、値に名前を付けて 1 か所で管理できます。宣言に使うキーワードは const と let の 2 つです。

JavaScript

const author = "山田 太郎";
const heading = "作品一覧";
console.log(author);
console.log(heading);

まず const で書く

const は再代入できない宣言です。一度値を入れたら、その名前に別の値を入れ直せません。

JavaScript

const author = "山田 太郎";
author = "佐藤 花子"; // TypeError: Assignment to constant variable.

const には、宣言と同時に値を入れなければならないという決まりもあります。const bio; のように値を省くと SyntaxError になります。

書き換えるときだけ let

後から値を入れ直したい場面では let を使います。

JavaScript

let status = "下書き";
status = "公開中";

let views = 100;
views = views + 1;

キーワード	再代入	使いどころ
`const`	できない	既定でこちらを使う
`let`	できる	途中で書き換えるときだけ

判断の順番まず const で書きます。実行して「再代入できない」と言われたら、そこではじめて let に変えます。この順番なら、let は本当に必要な場所だけに残ります。

よくある間違い

書き換えるつもりの変数を const のままにしてしまうのが 1 つ目です。

JavaScript

const greeting = "こんにちは";
greeting = greeting + " 山田さん"; // TypeError

let greeting = "こんにちは"; に直します。

2 つ目は、代入したいだけなのに 2 回目にも let を書いてしまうケースです。

JavaScript

let views = 100;
let views = 101; // SyntaxError 同じ名前は宣言できない

2 回目は宣言ではなく代入なので、let を外して views = 101; と書きます。

let と const を使い分ける

同じ文字を 5 か所に書いてしまう

まず const で書く

書き換えるときだけ let

よくある間違い

要件

入出力例

ヒント

メモ

let と const を使い分ける

同じ文字を 5 か所に書いてしまう

まず const で書く

書き換えるときだけ let

よくある間違い

要件

入出力例

ヒント

メモ