JavaScript | プロトタイプ継承」アニメーション

javascrpit JavaScript
スポンサーリンク

JavaScript の「プロトタイプ継承」は、
初心者が「？」となりやすいけど、実際に“矢印でつながる”動きを見ると一気に理解できる部分なんです。

プロトタイプ継承とは？

🧠 一言で言うと…

「オブジェクトが、親（＝プロトタイプ）のプロパティやメソッドを自動的に引き継ぐ仕組み」

たとえばこんな感じ

const animal = {
  walk() {
    console.log("トコトコ歩く");
  }
};

const dog = Object.create(animal);
dog.bark = function() {
  console.log("ワンワン！");
};

dog.walk(); // ← animal から継承したメソッド
dog.bark(); // ← 自分で持っているメソッド
JavaScript

ここでの関係は以下の通り

dog ──▶ animal ──▶ Object.prototype ──▶ null

JavaScript では「クラス」ではなく「オブジェクト同士のつながり」で継承を表すんです。
これを「プロトタイプチェーン」と呼びます。

アニメーションつき継承デモ（HTML + JS）

以下をそのままブラウザに貼り付けてください。
プロトタイプチェーンが 矢印で動いて見える インタラクティブ図解です。

See the Pen Prototype Inheritance Animation by MONO365 -Color your days- (@monoqlo365) on CodePen. 

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>プロトタイプ継承アニメーション</title>
<style>
  body {
    font-family: "Segoe UI", sans-serif;
    background: #f9fafb;
    text-align: center;
    padding: 2rem;
  }
  .obj {
    display: inline-block;
    border: 2px solid #4f46e5;
    border-radius: 1rem;
    padding: 1rem 1.5rem;
    margin: 1rem;
    background: white;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    position: relative;
  }
  .arrow {
    position: absolute;
    top: 50%;
    left: 100%;
    width: 120px;
    height: 2px;
    background: #22c55e;
    transform-origin: left center;
    transition: all 1s ease-in-out;
  }
  .arrow::after {
    content: "▶";
    position: absolute;
    right: -15px;
    top: -7px;
    color: #22c55e;
  }
  button {
    margin: 1rem;
    background: #4f46e5;
    color: white;
    border: none;
    border-radius: 0.5rem;
    padding: 0.6rem 1.2rem;
    cursor: pointer;
  }
  button:hover {
    background: #3730a3;
  }
  #log {
    margin-top: 2rem;
    background: #eef2ff;
    border-radius: 0.5rem;
    padding: 1rem;
    text-align: left;
    white-space: pre-line;
  }
</style>
</head>
<body>

<h2>🐾 プロトタイプ継承の流れをアニメーションで見てみよう</h2>

<div class="obj" id="dogBox">
  <strong>dog</strong><br>
  { bark() }
  <div class="arrow" id="arrow1"></div>
</div>

<div class="obj" id="animalBox">
  <strong>animal</strong><br>
  { walk() }
  <div class="arrow" id="arrow2"></div>
</div>

<div class="obj" id="objectBox">
  <strong>Object.prototype</strong><br>
  { toString(), hasOwnProperty(), ... }
</div>

<div>
  <button onclick="callDogMethod()">dog.walk()</button>
  <button onclick="callOwnMethod()">dog.bark()</button>
</div>

<div id="log"></div>

<script>
const animal = {
  walk() {
    log("animal.walk() が呼ばれた 🐾");
    animateArrow("toAnimal");
  }
};

const dog = Object.create(animal);
dog.bark = function() {
  log("dog.bark() が呼ばれた 🐶（自分のプロパティ）");
  animateArrow("self");
};

function callDogMethod() {
  // dog.walk() は自分にはない → prototype (animal) に探しに行く！
  dog.walk();
}
function callOwnMethod() {
  dog.bark();
}

function log(text) {
  document.getElementById("log").textContent = text;
}

function animateArrow(mode) {
  const a1 = document.getElementById("arrow1");
  const a2 = document.getElementById("arrow2");
  if (mode === "toAnimal") {
    a1.style.background = "#22c55e";
    a2.style.background = "#22c55e";
    a1.style.transform = "scaleX(1)";
    a2.style.transform = "scaleX(0)";
  } else {
    a1.style.background = "#ef4444";
    a2.style.background = "#ef4444";
    a1.style.transform = "scaleX(0)";
    a2.style.transform = "scaleX(0)";
  }
}
</script>

</body>
</html>
HTML

動作の流れ（アニメーションの意味）

操作起きていること矢印の動き
dog.bark()dog 自身がメソッドを持っている → そのまま実行🔴 矢印は動かない（自分で完結）
dog.walk()dog には walk がない → 親 (animal) を探す → 発見！🟢 矢印が dog → animal に伸びる

補足：プロトタイプチェーンの探索

  1. dog.walk() が呼ばれる
  2. JavaScript は dog に walk があるか調べる
  3. ない場合、[[Prototype]]（＝__proto__）で親をたどる
  4. animal.walk を見つけて実行する
  5. さらに animal にもなければ、Object.prototype までさかのぼる

👉 これが「プロトタイプチェーン」です。

コードで確認してみよう

console.log(Object.getPrototypeOf(dog) === animal); // true
console.log(Object.getPrototypeOf(animal) === Object.prototype); // true
console.log(Object.getPrototypeOf(Object.prototype)); // null
JavaScript

クラス構文でも同じ仕組み

実は ES6 の class も、この「プロトタイプ継承」を内部的に使っています。

class Animal {
  walk() {
    console.log("トコトコ歩く");
  }
}

class Dog extends Animal {
  bark() {
    console.log("ワンワン！");
  }
}

const dog = new Dog();
dog.walk(); // ← Animal から継承
dog.bark(); // ← Dog 自身
JavaScript

中身を見てみると：

Object.getPrototypeOf(Dog.prototype) === Animal.prototype; // true
JavaScript

つまり、クラスも中では同じ「Object.create() 的な仕組み」でつながっているんです。

まとめ：プロトタイプ継承の覚え方

しくみ説明
Object.create(parent)親オブジェクトを継承して新しいオブジェクトを作る
__proto__ / [[Prototype]]継承関係を内部的に表すリンク
プロトタイプチェーンメソッドやプロパティを上へ上へ探す流れ
class / extends見た目は違うけど中身は同じ継承構造

スポンサーリンク
タイトルとURLをコピーしました