JavaScript/上級/Lesson 20
プロトタイプ — *JS のオブジェクト指向*
45分·theory
このチャプター
2/2
プロトタイプ — *JS のオブジェクト指向*
🎯 このレッスンを読み終えたら
このレッスンを読み終えると、以下の3つを自信を持って説明できるようになります。
- ▸✅ prototype chain + __proto__ の仕組み
- ▸✅
classがプロトタイプの syntactic sugar である理由 - ▸✅ Object.create と
newキーワードの比較
学習目標をチェックリストとして手元に置き、すべて答えられるようになったらレッスンを閉じてください。
プロトタイプとは何か
核心の一言
JS のオブジェクト指向はクラスベースではなくプロトタイプベース。すべてのオブジェクトは親オブジェクト (プロトタイプ) を持ち、そこからメソッドを継承します。
他の言語との違い
オブジェクトが別のオブジェクトを直接継承 — クラスというテンプレートの段階はありません。
プロトタイプチェーン
プロパティを要求されると、JS は上に向かって探索します。これがプロトタイプチェーンです。
class 構文 — 見た目だけ
ES6 (2015) から class キーワードが使えますが、内部はいまもプロトタイプ。
クラスベース言語のスタイルで記述できます。しかし内部では:
プロトタイプチェーンはそのままです。
よく見るプロトタイプのメソッド
すべての組み込みメソッド (map・filter・toUpperCase など) がプロトタイプに定義されており、すべての配列・文字列が共有しています。メモリ効率 ↑。
自分で作ってみる
古いコンストラクタ関数スタイルです。現在は class 構文の方がすっきりしているので、ほぼ常に class を使います。
よくある落とし穴
1. アロー関数にはプロトタイプがない:
2. __proto__ を直接操作するのは危険:
3. for...in の意外な挙動:
まとめ
- ▸JS = プロトタイプベースのオブジェクト指向
- ▸すべてのオブジェクトは親 (プロトタイプ) を持つ
- ▸
classは syntactic sugar — 内部はプロトタイプ - ▸継承とメソッド共有のメカニズム
⚡ 実際に試してみよう — クラス継承 + プロトタイプチェーン
クラス継承が内部的にはプロトタイプチェーンであることを実際に確認してみましょう。
✏️ JS 코드
📟 コンソール出力
▶ 実行ボタンを押してください
⚠️ ブラウザのサンドボックスで実行 — console.log()のみ対応、alert/fetchは不可
🤖 AI にこう聞いてみよう
このレッスンの概念を知っていれば、AI に具体的に指示できます。漠然とした「直して」ではなく、語彙を持ったリクエスト — それがトークン節約の出発点です。
- ▸「この変数に適切な TypeScript 型アノテーションを付けて」
- ▸「この === と == の混在を === に統一して意図を明確にして」
- ▸「このコードの JSON.parse 結果に unknown 型 + 型ガードを追加して」
なぜこれがトークンを減らすのか
概念を知らないと、AI の返答を受けても「それってどういう意味ですか?」と再度聞く必要があります。その「再質問」がトークンを消費します。概念を一度身につけておけば、会話が一度で終わります。
先に読むとよい概念: ES2022〜2025 最新構文 — AI生成コードの定番