0Pricing
JavaScript Academy · レッスン

let、const、varを避ける理由

letとconstの基本、varを避ける理由、block scope、temporal dead zone（TDZ）の概要をやさしく学びます。

「let、const、varを避ける理由」はCoddyKit上の無料JavaScript Academyレッスンです。 これはレッスン1/3です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはJavaScript Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 JavaScript Academyコースには全3レッスンが含まれています。

導入

目標: let と const を自信を持って使い、古い var を避け、ブロックスコープとTDZを理解します。

  • letとconst
  • ブロックスコープ
  • TDZによる安全性
let、const、varを避ける理由 — イラスト1

letとconstの基本

ルール: 再代入する予定がない場合はconstを使い、再代入する場合はletを使ってください。

// Prefer const by default; use let when you need to reassign
const appName = "CoddyKit";   
// cannot reassign
let score = 0;                
// can reassign

score = score + 1;
console.log("App:", appName);
console.log("Score:", score);
let、const、varを避ける理由 — イラスト2

varを避ける理由

varは避けてください。理由は次のとおりです。

  • ブロックスコープではなく、関数スコープです。
  • ホイスティングされ、宣言前に参照すると undefined になることがあります。
  • リファクタリングが難しくなり、予測しにくくなります。
let、const、varを避ける理由 — イラスト3

ブロックスコープの例

ブロックスコープを使うと、変数をローカルに保ち、コードを整理できます。

// Block scope: variables exist only inside the braces
let lives = 3;

if (true) {
  const bonus = 10;      
 // only inside this block
  let level = 2;          
// only inside this block
  console.log("Inside:", bonus, level);
}

console.log("Lives:", lives);
// The following would be ReferenceError if uncommented:
// console.log(bonus, level);
let、const、varを避ける理由 — イラスト4

TDZ（安全な例）

TDZ: let/const の変数は、宣言行より前に参照できません。これにより、多くのバグを防げます。

// TDZ: accessing let/const before declaration throws ReferenceError
try {
  // Uncommenting next line would throw:
  // console.log(theme);   
  // ReferenceError (TDZ)
  let theme = "dark";
  console.log("Theme after declare:", theme);
} catch (e) {
  console.log("Caught:", e.message);
}
let、const、varを避ける理由 — イラスト5

命名とヒント

命名:

  • データにはわかりやすい名詞を使ってください（userName、score）。
  • 関数には動詞を使ってください（computeTotal）。
  • スコープを狭く保ち、使用箇所の近くで宣言してください。
let、const、varを避ける理由 — イラスト6

letとconstのクイズ

クイックチェック: ブロックスコープと再代入です。

let、const、varを避ける理由 — イラスト7

まとめ

まとめ: const を優先し、再代入が必要な場合に let を使い、var は避けてください。ブロックスコープは変数をローカルに保ち、TDZは早すぎるアクセスによるバグを防ぎます。

let、const、varを避ける理由 — イラスト8

よくある質問

「let、const、varを避ける理由」レッスンは無料ですか？

はい。「let、const、varを避ける理由」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、JavaScript Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 JavaScript Academyコースには全3レッスンが含まれています。

「let、const、varを避ける理由」で何を学びますか？

letとconstの基本、varを避ける理由、block scope、temporal dead zone（TDZ）の概要をやさしく学びます。 ブラウザで直接実行するハンズオンコードでJavaScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

JavaScript Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのJavaScript Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/3です。

「let、const、varを避ける理由」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このJavaScript Academyレッスンでコードを書いて実行できますか？

はい。すべてのJavaScript Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. let、const、varを避ける理由
  2. Block／Function／Module ScopeとTDZ
  3. 命名、可読性、よくある落とし穴
← JavaScript Academyに戻る