第10回：完成！話しかけるとポーズが変わる「おしゃべり相棒アプリ」
みなさん、こんにちは！ついにこの日がやってきましたね！これまでコツコツと積み上げてきたスキルを総動員して、世界にたったひとつの「相棒」を完成させる時です！
今日の目標は、ボタンをクリックするたびに「セリフ」と「ポーズ（画像）」が同時に切り替わる、最高にクールなアプリを仕上げることです。さあ、深呼吸して、キーボードを叩く準備はいいですか？ワクワクする旅のフィナーレ、一緒に駆け抜けましょう！
ステップ1：HTMLで「相棒」の土台を作ろう！
まずは、画面に相棒を表示する場所と、話しかけるためのボタンを用意しましょう。HTMLファイルを開いて、以下のコードを書き込んでみてください！
<p id=”buddy-text”>「こんにちは！何か話しかけてね！」</p>
<button id=”chat-button”>話しかける！</button>
どうですか？画面に相棒の姿が見えましたか？ここからが魔法の時間ですよ！
ステップ2：JavaScriptで命を吹き込む！
さて、ここからが心臓部です！ボタンを押したときに「画像」と「セリフ」をチェンジする命令を書きます。JavaScriptファイルに、こんなふうに書き込んでみましょう！
const img = document.getElementById(‘buddy-image’);
const txt = document.getElementById(‘buddy-text’);
btn.addEventListener(‘click’, () => {
img.src = ‘pose2.png’;
txt.textContent = ‘「おっ、いい反応だね！最高だよ！」’;
});
たったこれだけ？と思うかもしれませんが、これがプログラミングの第一歩にして最強の瞬間です！保存してブラウザを更新し、ボタンを思いっきりクリックしてください！
さあ、君だけの相棒と一緒に冒険へ！
おめでとうございます！ついに完成ですね！あなたが書いたコードが、画面の中で生き生きと動き出しました。ボタンを押すたびに相棒が反応してくれる…この感動、一生忘れないでくださいね。これが「開発する」ということの醍醐味です！
でも、これで終わりではありません。ここからが本当の始まりです。色を変えたり、セリフを増やしたり、自分だけのカスタマイズをどんどん楽しんでください！もっとすごい機能を作りたい、そう思ったらまたいつでも戻ってきてくださいね。あなたの挑戦を、僕はいつでも全力で応援しています！
さあ、次はどんな素晴らしいものを作りましょうか？未来はあなたのコードの中にあります！
コメント