アニメーションで見えるHTMLデモ（クリックでthisが変化）
See the Pen How JavaScript’s `this` Works and Object Structure by MONO365 -Color your days- (@monoqlo365) on CodePen.
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>JavaScript this の動きとオブジェクト構造</title>
<style>
body {
font-family: 'Segoe UI', sans-serif;
background: #f8fafc;
padding: 2rem;
color: #333;
}
h1, h2 { text-align: center; }
.object-box {
display: flex;
justify-content: center;
gap: 2rem;
margin-top: 2rem;
}
.box {
background: white;
border: 2px solid #ccc;
border-radius: 1rem;
padding: 1rem 2rem;
width: 220px;
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
position: relative;
transition: 0.4s;
}
.box.active {
border-color: #4f46e5;
box-shadow: 0 0 12px rgba(79,70,229,0.5);
transform: scale(1.05);
}
.arrow {
text-align: center;
font-size: 2rem;
margin: 1rem 0;
}
button {
display: block;
margin: 1rem auto;
padding: 0.6rem 1.4rem;
font-size: 1rem;
border: none;
border-radius: 0.5rem;
background: #4f46e5;
color: white;
cursor: pointer;
transition: 0.3s;
}
button:hover { background: #4338ca; }
#log {
background: #1e293b;
color: #f1f5f9;
padding: 1rem;
border-radius: 0.5rem;
margin-top: 2rem;
min-height: 3rem;
font-family: monospace;
}
</style>
</head>
<body>
<h1>🧩 JavaScript の this の動き</h1>
<p style="text-align:center">ボタンを押して、どのオブジェクトが <code>this</code> になるか見てみよう！</p>
<div class="object-box">
<div id="personBox" class="box">
<strong>person</strong><br>
name: "Alice"<br>
greet() → <button id="btnPerson">呼び出す</button>
</div>
<div class="arrow">➡️</div>
<div id="sayBox" class="box">
<strong>say</strong><br>
person.greet をコピー<br>
<button id="btnSay">呼び出す</button>
</div>
</div>
<div id="log">結果がここに表示されます</div>
<script>
const person = {
name: 'Alice',
greet() {
log(`Hi! I'm ${this.name}`);
activateBox('personBox');
}
};
const say = person.greet;
const logBox = document.getElementById('log');
const personBox = document.getElementById('personBox');
const sayBox = document.getElementById('sayBox');
function log(text) {
logBox.textContent = text;
}
function activateBox(id) {
personBox.classList.remove('active');
sayBox.classList.remove('active');
document.getElementById(id).classList.add('active');
}
document.getElementById('btnPerson').onclick = () => {
person.greet();
};
document.getElementById('btnSay').onclick = () => {
activateBox('sayBox');
try {
say();
} catch {
log('Hi! I\'m undefined (thisが失われた)');
}
};
</script>
</body>
</html>
このHTMLをブラウザで開くと、「person.greet()」とコピーした「say()」で this がどう変わるかがアニメーション的に体験できます。
call() や bind() を使って this を固定できるバージョン
See the Pen How JavaScript’s `this` Works and Object Structure #2 by MONO365 -Color your days- (@monoqlo365) on CodePen.
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>JavaScript this の動きとオブジェクト構造</title>
<style>
body {
font-family: 'Segoe UI', sans-serif;
background: #f8fafc;
padding: 2rem;
color: #333;
}
h1, h2 { text-align: center; }
.object-box {
display: flex;
justify-content: center;
gap: 2rem;
margin-top: 2rem;
}
.box {
background: white;
border: 2px solid #ccc;
border-radius: 1rem;
padding: 1rem 2rem;
width: 220px;
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
position: relative;
transition: 0.4s;
}
.box.active {
border-color: #4f46e5;
box-shadow: 0 0 12px rgba(79,70,229,0.5);
transform: scale(1.05);
}
.arrow {
text-align: center;
font-size: 2rem;
margin: 1rem 0;
}
button {
display: block;
margin: 0.6rem auto;
padding: 0.6rem 1.4rem;
font-size: 1rem;
border: none;
border-radius: 0.5rem;
background: #4f46e5;
color: white;
cursor: pointer;
transition: 0.3s;
}
button:hover { background: #4338ca; }
#log {
background: #1e293b;
color: #f1f5f9;
padding: 1rem;
border-radius: 0.5rem;
margin-top: 2rem;
min-height: 3rem;
font-family: monospace;
}
</style>
</head>
<body>
<h1>🧩 JavaScript の this の動き（call / bind 含む）</h1>
<p style="text-align:center">ボタンを押して、どのオブジェクトが <code>this</code> になるか見てみよう！</p>
<div class="object-box">
<div id="personBox" class="box">
<strong>person</strong><br>
name: "Alice"<br>
greet() → <button id="btnPerson">呼び出す</button>
</div>
<div class="arrow">➡️</div>
<div id="sayBox" class="box">
<strong>say</strong><br>
person.greet をコピー<br>
<button id="btnSay">呼び出す</button>
<button id="btnCall">call(person)</button>
<button id="btnBind">bind(person)</button>
</div>
</div>
<div id="log">結果がここに表示されます</div>
<script>
const person = {
name: 'Alice',
greet() {
log(`Hi! I'm ${this.name}`);
activateBox('personBox');
}
};
const say = person.greet;
const logBox = document.getElementById('log');
const personBox = document.getElementById('personBox');
const sayBox = document.getElementById('sayBox');
function log(text) {
logBox.textContent = text;
}
function activateBox(id) {
personBox.classList.remove('active');
sayBox.classList.remove('active');
document.getElementById(id).classList.add('active');
}
document.getElementById('btnPerson').onclick = () => {
person.greet();
};
document.getElementById('btnSay').onclick = () => {
activateBox('sayBox');
say(); // this は undefined
log(`Hi! I'm ${window.name || 'undefined'} (this が失われた)`);
};
document.getElementById('btnCall').onclick = () => {
activateBox('sayBox');
say.call(person);
log(`say.call(person) → this は person になった`);
};
document.getElementById('btnBind').onclick = () => {
activateBox('sayBox');
const bound = say.bind(person);
bound();
log(`say.bind(person) → this は永久に person に固定された`);
};
</script>
</body>
</html>
ボタンを押すと、this が失われたり固定されたりする様子が視覚的に確認できます。