第5回：ボタンを押したら文字が変わる魔法（JavaScriptの第一歩）

みなさん、こんにちは！ついにこの日がやってきましたね。Webアプリ開発の心臓部、JavaScript（ジャバスクリプト）の世界へようこそ！前回作ったボタン、ただ押せるだけじゃ物足りないと思いませんか？今回は、そのボタンに「魔法」をかけて、押した瞬間に画面の文字を書き換えるという、感動的な体験を一緒に作り上げましょう！準備はいいですか？キーボードを叩く指がうずうずしますね！さあ、いきましょう！

ステップ1：魔法の呪文を置く場所を作る

まずは、HTMLファイルを開いてください。文字が変わる場所と、魔法のスイッチとなるボタンを作ります。以下のコードを追記してみてください。

<p id="message">まだ何も起きていません</p>

<button onclick="changeText()">魔法をかける！</button>

ここで重要なのはid=”message”です。これは「この場所を後で書き換えるから目印をつけておくね！」という名札のようなもの。そしてボタンのonclickは「クリックされたら、この命令を実行して！」という合図です！

ステップ2：JavaScriptで魔法を実装する！

さあ、いよいよ頭脳部分です。HTMLの中に<script>というタグを作って、以下のコードを書き込んでください！

<script>
function changeText() {
document.getElementById("message").innerText = "やった！文字が変わった！";
}
</script>

解説しますね！
document.getElementById(“message”)は、「さっき名札をつけた場所を見つけて！」という命令。
innerTextは、「その中身の文字を書き換えるよ！」という合図です。
これだけで、あなたの書いたコードがブラウザの中で生き物のように動き出すんです！ワクワクしませんか？

さあ、ブラウザを更新してボタンを押そう！

準備ができたら保存して、ブラウザをリロードしてください。ボタンをクリックした瞬間……どうですか？文字が変わりましたよね！おめでとうございます！あなたは今、Webページに「動き」を与えるエンジニアの第一歩を踏み出しました！

まとめ：次回のワクワクに向けて

今日の体験、いかがでしたか？「自分の書いたコードで画面が変わる」という快感、これがプログラミングの醍醐味です。今回は文字を変えるだけでしたが、JavaScriptを使えば計算をしたり、写真を表示したり、無限の可能性が広がっています！

次回は、この仕組みをさらに進化させて、もっと複雑な動きに挑戦してみますよ。みなさんのコードがどんな進化を遂げるのか、今から楽しみでたまりません！この調子で、一緒に最高のアプりを作り上げましょう！また次回のレッスンでお会いしましょうね！

« 前：第4回：ボタンを作って、クリックできるようにしよう | 次：第6回：クリックするたびにキャラクターのセリフを変えてみよう »