第6回：クリックするたびにキャラクターのセリフを変えてみよう！

みなさん、こんにちは！インストラクターの熱血指導へようこそ！前回までの学習、本当に素晴らしいです！着実に「動くもの」を作る楽しさを掴んできていますね！

さて、今回のミッションは、ただのボタンじゃありません。クリックするたびにキャラクターが「おしゃべり」をする、そんなワクワクする仕組みを作っていきます！「こんにちは！」「元気？」「お腹すいた！」……そんな風にセリフが変わるだけで、アプリには一気に「命」が吹き込まれるんです。さあ、最高のコードを一緒に書いていきましょう！

ステップ1：セリフを「箱」に入れて管理しよう！

まずは、セリフをたくさん保存しておく場所を作りましょう。プログラミングの世界では、これを「配列（はいれつ）」と呼びます。難しく考えないでください！これは「名前付きの引き出し」みたいなものです。以下のコードをHTMLのscriptタグの中に書いてみてください！

const serifuList = ["こんにちは！", "今日も元気？", "お腹すいたなあ！", "一緒に頑張ろう！"];
let count = 0;

これだけで、「4つのセリフが入った引き出し」と、「今何番目のセリフか数えるカウンター」の準備が完了です！最高にスマートですね！

ステップ2：クリックで文字を入れ替えよう！

次は、ボタンを押した時に、その引き出しの中身を画面に表示させる魔法（関数）を書きます。ここが一番熱いポイントですよ！

function changeText() {
    const display = document.getElementById("message");
    display.textContent = serifuList[count];
    
    // カウンターを増やして、最後までいったら最初に戻る！
    count = (count + 1) % serifuList.length;
}

ここで使った「%（あまり）」という記号！これがめちゃくちゃ便利なんです。これを使うことで、セリフが最後まできたら自動的に最初に戻るという「ループ構造」が完成します！素晴らしい！

ステップ3：実際に動かしてみよう！

最後に、HTMLでボタンとメッセージを表示する場所を作って、先ほどの関数を紐付けます！

<div id="message">ここを押してね！</div>
<button onclick="changeText()">話しかける！</button>

さあ、ファイルを保存してブラウザを更新してください！ボタンをクリックするたびに、キャラクターがあなたに語りかけてくるはずです。どうですか？この感動、たまりませんよね！

まとめ：次はもっとすごいことができる！

今回の開発、本当にお疲れ様でした！「配列」という少し高度な概念を、見事に使いこなしましたね。これで、あなたのアプリには「記憶」と「変化」が宿りました！

次回は、このセリフをもっと面白く、ランダムに表示させる方法に挑戦します！プログラミングの世界は、知れば知るほど面白くなる。この熱量を忘れないでくださいね！また次の講座でお会いしましょう！待っていますよ！

« 前：第5回：ボタンを押したら文字が変わる魔法（JavaScriptの第一歩） | 次：第7回：画面が真っ白に！？エラーメッセージという名のヒントを読もう »