以下は HTML + JavaScript で動く、初心者向けの「クラス構造可視化アプリ」です。
ブラウザに貼り付けて動かすだけで、class の仕組みと prototype チェーンがリアルタイムで見られます。
See the Pen Visualizing the Internal Structure of JavaScript Classes 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: #f6f8fa;
padding: 20px;
}
h1 {
font-size: 1.4em;
margin-bottom: 0.5em;
}
#editor {
width: 100%;
height: 180px;
font-family: monospace;
}
#runBtn {
margin: 10px 0;
padding: 6px 12px;
background: #007acc;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
#output {
background: white;
border: 1px solid #ccc;
padding: 10px;
border-radius: 5px;
min-height: 120px;
white-space: pre-wrap;
font-family: monospace;
}
#diagram {
margin-top: 20px;
display: flex;
justify-content: center;
}
.node {
background: #e8f0fe;
border: 2px solid #007acc;
border-radius: 10px;
padding: 10px 20px;
margin: 10px;
position: relative;
text-align: center;
}
.arrow {
position: absolute;
top: 40%;
right: -30px;
font-size: 20px;
}
</style>
</head>
<body>
<h1>🧠 クラスの内部構造を可視化しよう</h1>
<p>クラスを自由に書いて、プロトタイプチェーンを確認できます。<br>
例：
<code>class Animal { speak() { return "ワン！"; } }<br>const dog = new Animal();</code></p>
<textarea id="editor">class Animal {
speak() { return "ワン！"; }
}
const dog = new Animal();</textarea>
<br>
<button id="runBtn">▶ 実行してプロトタイプ構造を表示</button>
<h2>結果</h2>
<div id="output">(結果がここに表示されます)</div>
<h2>プロトタイプチェーン</h2>
<div id="diagram"></div>
<script>
function visualizeChain(obj) {
const diagram = document.getElementById("diagram");
diagram.innerHTML = "";
let current = obj;
while (current) {
const node = document.createElement("div");
node.className = "node";
node.textContent = current.constructor ? current.constructor.name : "Object.prototype";
diagram.appendChild(node);
const proto = Object.getPrototypeOf(current);
if (proto) {
const arrow = document.createElement("div");
arrow.className = "arrow";
arrow.textContent = "⬆";
node.appendChild(arrow);
}
current = proto;
}
}
document.getElementById("runBtn").onclick = () => {
const code = document.getElementById("editor").value;
const output = document.getElementById("output");
output.textContent = "";
try {
eval(code);
// 最後のオブジェクトを探す
const names = Object.keys(window);
const last = names[names.length - 1];
const value = window[last];
if (typeof value === "object") {
output.textContent = "最後に生成されたオブジェクトを解析します。\n";
visualizeChain(value);
} else {
output.textContent = "オブジェクトが見つかりませんでした。\nクラスを作って new してください。";
document.getElementById("diagram").innerHTML = "";
}
} catch (err) {
output.textContent = "⚠️ エラー: " + err.message;
document.getElementById("diagram").innerHTML = "";
}
};
</script>
</body>
</html>
使い方
- コードエディタに
classを書きます。
class Animal {
speak() { return "ワン！"; }
}
const dog = new Animal();
- 「▶ 実行」ボタンを押すと…
dog → Animal.prototype → Object.prototypeのように、
プロトタイプチェーン が図で表示されます。
- クラスを継承した場合（
extendsを使う）も確認できます：
class Animal {}
class Dog extends Animal {}
const pochi = new Dog();
→ pochi → Dog.prototype → Animal.prototype → Object.prototype
学習ポイント
| 概念 | 説明 |
|---|---|
prototype | すべてのクラスには「プロトタイプオブジェクト」があり、メソッドがそこに保存される |
__proto__ | 各インスタンスが自分の親（クラスの prototype）を指す内部リンク |
extends | 継承したクラスでは、プロトタイプチェーンがさらに1段階伸びる |
Object.prototype | 最後の親。ここでチェーンが終わる。 |
アニメーション付きクラス実験ツール
See the Pen Animated Class Experiment Tool by MONO365 -Color your days- (@monoqlo365) on CodePen.
「JavaScript のメソッド探索（プロトタイプチェーンを上にたどる様子）」をアニメーションで視覚化する実験ツール
dog.speak() が呼ばれたときに、
「dog → Dog.prototype → Animal.prototype → Object.prototype」
と順に探索され、
メソッドが見つかった段階で「✅ 見つかった！」と表示されるようにします。
See the Pen JavaScript Method Search by MONO365 -Color your days- (@monoqlo365) on CodePen.
見どころ
- 各ノードが順番にハイライトされ、
dog → Dog.prototype → Animal.prototype → Object.prototype
とたどる様子が1秒ごとに見える。 speak()が見つかった場所（例：Animal.prototype）で緑に光って停止。- 見つからなければ「❌ 見つかりませんでした」。
