第4回：ボタンを作って、クリックできるようにしよう！

みなさん、こんにちは！プログラミングの楽しさに目覚めてきましたか？前回までに画面の土台ができましたね。でも、ただ見るだけのページなんてつまらない！今回は、いよいよ「ユーザーと会話できる」Webアプリの第一歩、ボタンを作っていきましょう！

ステップ1：ボタンは「魔法の入り口」！

ボタンは、Webアプリにおける「魔法のスイッチ」です。ボタンを置くことで、初めてユーザーがアプリに「お願い」をできるようになるんです。さあ、まずはHTMLファイルを開いて、以下のコードを書き込んでみてください！

<button>ここを押して！</button>

保存してブラウザを更新（リロード）してみてください。どうですか？ボタンが現れましたよね！でも、今のままだと押しても何も起きません。そこで、次が一番大事なステップです！

プログラムの世界では、たくさんのボタンを使い分けるために、それぞれに「id（アイディー）」という名前をつけてあげます。これをつけておかないと、将来「どのボタンが押されたの？」とコンピュータに聞いても、迷子になっちゃうんです。

さっきのボタンを、このように書き換えてみましょう！

<button id=”my-button”>ここを押して！</button>

これだけでOKです！このid="my-button"という部分が、コンピュータに対する「このボタンの名前は『my-button』だよ！」という自己紹介なんです。

今回の作業、本当にお疲れ様でした！これで、あなたのアプリには「名前つきのボタン」が設置されました。名前があるということは、これからJavaScriptという言語を使って、「もしこのボタンが押されたら、画面を光らせる！」といった命令を出す準備が完璧に整ったということです！

次回は、いよいよこのボタンに「命」を吹き込みます。クリックしたら何かが起きる……そんなワクワクする体験が待っていますよ！準備はいいですか？このままの勢いで、次回のレッスンにも飛び込んできてくださいね！一緒に最高のWebアプリを作り上げましょう！