このレッスンを読み終えると、以下の3つを自信を持ってできるようになります。

• ▸✅ var · let · const の違い + ホイスティングの動作
• ▸✅ 7つの型 + typeof の罠 (typeof null === 'object')
• ▸✅ スクリプト読み込みの違い (defer · async · module)

学習目標を チェックリスト にして、すべて答えられるようになったらレッスンを閉じましょう。

核心を一言で

JavaScript = ウェブページを動的にするプログラミング言語。1995年に Brendan Eich がわずか10日で作りました。今や世界で最も広く使われる言語の一つです。

なぜ JavaScript という名前なのか

名前に反して、Java とはほぼ無関係です。1995年にJava が流行っていたときにマーケティング上の理由で似た名前がつけられました。実際には Java よりも Lisp・Scheme に近い関数型言語です。

> 💡 Java と JavaScript = 「ハムとハムスター」くらい無関係。

JavaScript の 3つの顔

当初はブラウザの中でしか動きませんでした。今では：

1. ブラウザ — クリック・入力・アニメーションなど動的な動作
2. サーバー (Node.js, 2009~) — Java・Python のようにバックエンド開発が可能
3. モバイル・デスクトップ — React Native・Electron でアプリ開発

同じ言語でフロントエンド・バックエンド・モバイルすべてが可能。これが JS の圧倒的な強みです。

変数 — let · const · var

const PI = 3.14;        // 🔒 一度決めると変更不可 (不変)
let count = 0;          // 🔓 変更可能
count = 10;             // OK — let なので再代入される

var oldStyle = "昔";   // ⚠️ 古いキーワード、使わないでください

console.log(PI, count, oldStyle);   // 3.14 10 "昔"

// 試すとエラー:
// PI = 3.15;   // ❌ TypeError: Assignment to constant variable.

ルール: 常に const から始める。再代入が必要なときは let。var は 2015年以前のコードのみ。

基本データ型

const n = 42;                // number  — 整数・実数
const s = "hello";           // string  — 文字列
const b = true;              // boolean — 真/偽
const u = undefined;         // 値なし (宣言のみ)
const x = null;              // 意図的な空
const arr = [1, 2, 3];       // array   — 配列 (オブジェクトの一種)
const obj = { name: "ホン" };  // object  — オブジェクト

// 🔍 typeof でそれぞれどんな型か出力してみる
console.log(typeof n);     // "number"
console.log(typeof s);     // "string"
console.log(typeof b);     // "boolean"

関数も値です — 変数に格納して引数として渡せます：

const greet = (name) => `こんにちは、${name}!`;
console.log(greet("ホン・ギルドン"));   // "こんにちは、ホン・ギルドン!"

最も混乱しやすい — == と ===

console.log("5" == 5);    // true   ← == は型を自動的に合わせる ("5" → 5)
console.log("5" === 5);   // false  ← === は型まで同じである必要がある (string ≠ number)
console.log(0 == false);  // true   ← false が 0 に変換される
console.log(0 === false); // false  ← 型が異なる (number vs boolean)

== は型を自動的に合わせて比較 — 予期しない結果になりがち。=== は型まで一致する必要があります。常に === を推奨。

非同期 — JS の真の強み

JS はシングルスレッドでも高速です。秘密はイベントループ + 非同期処理：

console.log("1");                              // ① 即時実行
setTimeout(() => console.log("2"), 0);         // ⏳ 待機キューへ — 0秒でも「後」
console.log("3");                              // ② 即時実行

// 📤 出力順序: 1, 3, 2
//   → 同期コード(1, 3)が先にすべて終了した後にのみ setTimeout コールバック(2)が実行される

setTimeout はキューに入り、現在のコードが終わってから実行されます。その間、他の処理をブロックなしでこなします。

async/await で非同期コードを同期のように書く：

async function fetchUser(id) {
    const res = await fetch(`/api/users/${id}`);
    const data = await res.json();
    return data;
}

await で待っている間、JS は他の処理を行います。1万件の同時リクエストも問題ありません。

まとめ

• ▸動的型付け: 変数にどんな値でも格納可能
• ▸非同期中心: async/await が標準
• ▸関数は第一級オブジェクト: 値と同様に扱える
• ▸== の代わりに === — 常に

JS は嘲笑されていた言語から世界を支配する言語へと進化しました。知らなければ現代のウェブ開発は不可能です。

このレッスンの概念を理解すれば、AI に具体的な指示を出せます。曖昧な「直して」ではなく、語彙を持ったリクエスト — それがトークン節約の出発点です。

• ▸「この JavaScript コードに JavaScript 入門の概念を適用してリファクタリングして」
• ▸「JavaScript 入門が面接でよく問われるポイントを3つ教えて」
• ▸「このコードの JavaScript 入門に関連するアンチパターンを検査して」

なぜトークンが減るのか

概念を知らないと、AI の回答を受け取っても「それは何ですか？」と再度質問しなければなりません。その「再質問」がトークンを消費します。概念を一度学んでおけば、やりとりが一回で完結します。