忘れ去られそうになりますが、ゲーム開発企画、まだまだ裏でやってますよ。
不定期ですが、思い出すというトレーニングって、なかなか大事だな〜と思いつつ、今回もファンタジー・プログラミング学習問題を考えてみました。
ストーリー「なぜ魔法が発動しないのか？」
ここは魔法の国「コードリア王国」。
あなたは、王国の魔法ギルドに配属された
若き魔導士。
今日は、国王より「火の魔法ボタン」を押すことで「ファイアボール」が発動する仕組みを作るように命じられました。
しかし……
ボタンを押しても
魔法が発動しないという報告が、街中から届いてしまいます。
あなたが書いた魔法コード（JavaScript）
<script>
document.getElementById("magicBtn").onclick = castFireball;
function castFireball() {
alert("🔥 ファイアボールを放つ！");
}
</script>
<button id="magicBtn">🔥 ファイアボール発射！</button>
問題
なぜ、ファイアボール魔法が発動しないのか？
一番の原因として考えられるものを選びなさい。
選択肢（魔法の文献より）
1. 魔法陣（button）の呪文 id="magicBtn" が間違っている
2. 魔導書（script）の記述が古くて onclick が使えない
3. 魔導書が魔法陣より先に読み込まれてしまっている
4. ファイア属性の魔法は addEventListener でないと発動しない
答え
正解
3. 魔導書が魔法陣より先に読み込まれてしまっている
解説 : 時空を超える読み込みの罠
魔法のページは、上から下へ順に読み込まれます。
このコードでは、魔導書（<script>）が魔法陣（<button>）の読み込みより前に実行されてしまうため、
document.getElementById("magicBtn") が**null（空）**になってしまいます。
つまり、魔法をかける対象がまだ存在していないのです！
修正方法：魔導書を末尾に置け！
<button id="magicBtn">🔥 ファイアボール発射！</button>
<!-- 魔法の読み込みはここに置くべし -->
<script>
document.getElementById("magicBtn").onclick = castFireball;
function castFireball() {
alert("🔥 ファイアボールを放った！");
}
</script>
または、魔導書に defer 属性をつける手もあります。
<script defer>
// 中略...
</script>
魔導士の学び（ヒント）
教訓 :
魔法対象（HTMLの魔法実行用のscriptタグ）は先に存在していなければならない。
<script> はページの末尾に置くのが安全。（ただし、もっと別の方法もある）
onclick でも動くが、より強力な魔法（addEventListener）もある。
あとがき
自分がJavascriptを覚えたての時に、よくやっていた失敗です。
読み込みタイミングと実行タイミングによって、HTMLも順番が存在するという事に気がついて、
プログラミングと同様に、読み込みと実行のタイミングを学びました。
こういうのって、失敗してみて初めて理解できるという事もあるので、読み込み順番で失敗した時に、この魔法の国問題を思い出してもらえればと思います。
0 件のコメント:
コメントを投稿