第9回：クリックで画像が切り替わる「変身ボタン」を作ろう！

みなさん、こんにちは！プログラミングの世界へようこそ！インストラクターの熱血指導の時間です！今日も一緒に、最高のワクワクを体験していきましょう！

前回はボタンで文字を変える魔法を学びましたね。でも、Webアプリの表現力はそんなものじゃありません！今日はもっとエキサイティングです。「クリック一つで、画像そのものを別の姿に変身させる」という、まさに魔法のような機能を実装しちゃいます！準備はいいですか？キーボードを叩きたくてウズウズしてきましたね！さあ、出発しましょう！

ステップ1：画像を表示する準備をしよう！

まずは、HTMLで「変身前の姿」を画面に表示させましょう。ここでは、適当な画像URLを用意してくださいね。以下のコードをHTMLファイルに書いてみてください！

<img id=”my-character” src=”変身前の画像URL” alt=”キャラクター”>
<button id=”transform-btn”>変身する！</button>

ポイントは「id」です。JavaScriptという魔法使いに、「どの画像を変えるか」を教えるための名札みたいなものですね！

ステップ2：JavaScriptで魔法をかける！

さあ、ここからが本番です！ボタンが押されたとき、「src（画像の中身）」を書き換える命令を出しましょう。scriptタグの中に、以下の熱いコードを書き込んでください！

const btn = document.getElementById(‘transform-btn’);
const chara = document.getElementById(‘my-character’);

btn.addEventListener(‘click’, () => {
chara.src = ‘変身後の画像URL’;
alert(‘変身完了！’);
});

たったこれだけです！やっていることはシンプル。「ボタンをクリックしたら、キャラのsrcを新しいURLに書き換える」。これだけで、あなたの画面の中のキャラクターがパッと別の姿に変わるんです！感動しますよ！

さあ、今すぐコードを打ち込もう！

どうですか？画面上のボタンを押して、画像が切り替わったときのあの快感！これこそがプログラミングの醍醐味です。「もっと別の画像に変えたい！」「変身を解除するボタンも作ろうかな！」そんなアイデアが湧いてきたなら、あなたはもう立派なエンジニアの卵です！

まとめ：あなたのアプリはどんどん進化している！

今回、画像という「見た目」を自由に操る力を手に入れましたね！これで、クイズアプリの正解画像を表示したり、着せ替えゲームのようなものだって作れるようになります。あなたのアイデア次第で、アプリは無限の可能性を秘めているんです！

次は、さらに複雑な条件で画像を切り替える「if文」の世界へご案内します。もっともっと面白くなりますよ！準備はいいですか？次回も最高のテンションで会いましょう！諦めずに打ち続けたその先に、必ず夢のアプリが完成します！頑張れ！

« 前：第8回：プログラムの裏側を覗き見！console.log の使い方 | 次：第10回：完成！話しかけるとポーズが変わる「おしゃべり相棒アプリ」 »