【実践】JavaScriptでTODOアプリを作成しよう！第3回ボタンと処理を紐付ける

こんにちは、Reiです！

HTMLで骨組みを作り、CSSで見た目を整えました。
いよいよここからは、JavaScriptを使って
ページに「動き」をつけていきます。

今回はその最初のステップとして、
ボタンのクリックを検知する仕組みを作っていきます。

JavaScriptで「動き」をつける
今回の処理の流れ
1. 全体像の確認
まとめ

JavaScriptで「動き」をつける

ここからは、JavaScriptを使って
ユーザーの操作に反応する「動き」を実装していきます。

Webページは、

・HTML → 構造を作る
・CSS → 見た目を整える
・JavaScript → 動きをつける

という3つの役割で成り立っています。

今回はその中でもまず、
「ボタンが押されたことを検知する」 というとても基本的な仕組みを作ります。

そして、ボタンが押されたときに
メッセージを表示する処理を通して、JavaScriptが正しく動いているかを確認していきます。

この仕組みができると、

・入力された文字を取得する
・TODOを追加する
・ボタンで削除する

といった、アプリらしい機能を
少しずつ実装できるようになります。

まずは、JavaScriptを使うための準備から進めていきましょう！

準備：JSファイルを読み込む設定

JavaScriptを動かすためには、
JSファイルを作成して、HTMLから読み込む必要があります。

順番に準備していきましょう。

1. フォルダとファイルを作成する

まずは、JavaScriptを書くためのファイルを用意します。

プロジェクトのルートフォルダ直下に src フォルダ を作成し、
その中にindex.js というファイルを作成してください。

構成は次のようになります。

プロジェクトフォルダ（ルート） ├ index.html（ルート直下）
├ style.css（ルート直下） └ src/（新規作成したフォルダ）　　└ index.js（これから処理を書いていく空ファイル）

2. HTMLでファイルを読み込む

作成したJSファイルを
HTMLから読み込む設定を行います。

HTMLは 上から順に読み込まれる という特徴があります。

そのため、先にHTMLの部品（ボタンなど）を読み込み、
そのあとでJavaScriptを実行させる必要があります。

そこで、<body> タグの一番下（</body>の直前） に
次の1行を追加します。

【編集ファイル：index.html】

<script src="src/index.js"></script>

この設定により、

HTML → 読み込み完了
↓
JavaScript → 実行

という順番で処理が行われるようになります。

もしJavaScriptを先に実行してしまうと、
まだHTMLのボタン要素が読み込まれていない状態になるため、

・要素が取得できない
・クリックイベントが登録できない

といった不具合が発生してしまいます。

1. HTMLのボタンに「目印」をつける

次に、JavaScriptから
特定のボタンを見つけられるようにする準備をします。

そのために使うのが id です。

【編集ファイル：index.html】

<button id="add-button">追加</button>

id
特定のHTML要素を識別するための属性です。
ページ内で一意の名前として扱われるため、JavaScriptから「この要素だけ」を正確に取得して操作できるようになります。

ページの中には、完了ボタン・削除ボタンなどの複数のボタンを用意してあります。

JavaScriptが「どのボタンが押されたのか」 を判断できるようにするため、
今回の 追加ボタンだけに専用のIDを付けておきます。

2. 実行したい「処理の塊（関数）」を用意する

次に、ボタンが押されたときに実行する処理を追加します。

まずはテストとして、
ボタンが押されたときにメッセージを表示させます。

本来はここでTODOを追加する処理を書きますが、
最初の段階では
「ボタンが押されたことをJavaScriptが検知できているか」を確認できれば十分です。

そのため、今回はシンプルにメッセージを表示する処理を用意します。

【編集ファイル：src/index.js】

/**
 * 追加ボタンが押された時に実行する関数
 */
const onClickAdd = () => {
  alert("ボタンが押されました！");
};

alert()
ブラウザに小さな通知ウィンドウを表示する命令です。
ユーザーにメッセージを伝えたいときや、処理の結果を画面に知らせたいときなどに使用されます。

このコードが実行されると、
「ボタンが押されました！」というメッセージが表示されます。

まずはこの仕組みを使って、
JavaScriptが正しく動いているかを確認します。

3. ボタンと関数を「紐付ける」

最後に、HTMLのボタンとJavaScriptの処理の
この2つを連携させます。

【編集ファイル：src/index.js】

// 追加ボタンの要素を取得
const addButton = document.getElementById("add-button");

// ボタンがクリックされたら onClickAdd を実行
addButton.addEventListener("click", onClickAdd);

document.getElementById
HTML全体（document）の中から、指定した id を持つ要素 を取得する命令です。
これによって、「追加ボタン」というHTML要素をJavaScriptから操作できるようになります。

addButton.addEventListener(“click”, onClickAdd)
要素に対してユーザーの操作（イベント）を登録する命令です。
今回の場合は、追加ボタンがクリックされたときに onClickAdd の処理を実行するよう設定しています。

このように、

HTMLから要素を取得する → その要素にイベントを登録する

という手順を行うことで、
ユーザーの操作に応じて処理を実行できるようになります。

今回の処理の流れ

ここまでのコードでは、
ユーザーが「追加」ボタンをクリックすると、次のような順番で処理が動きます。

JavaScriptがHTMLの中から 追加ボタンの要素を取得する
そのボタンに クリックイベントを登録する
ボタンがクリックされると onClickAdd の処理が実行される
関数の中で alert が表示される

つまり、「ボタンが押されたことをJavaScriptが検知して処理を実行する」という、
Webアプリの基本的な動きができている状態です。

全体像の確認

最終的に、次のような形になっていればOKです。

index.html
　ページの構造と、JavaScriptの読み込み設定
src/index.js
　ボタンの取得と、クリックイベントの登録処理

このように、

HTMLに id を付ける
JavaScriptで 要素を取得する
クリックイベントを登録する

という流れを作っておくと、あとから

入力欄の文字を取得する
TODOを追加する
ボタンで削除する

といった機能を、スムーズに実装できるようになります！

【完成ファイル：index.html（一部抜粋）】

〜省略〜

<body>
    <div class="input-area">
      <input placeholder="TODOを入力">
      <button id="add-button">追加</button>
    </div>

〜省略〜
    
    <script src="src/index.js"></script>
  </body>
</html>

【完成ファイル：src/index.js】

/**
 * 追加ボタンが押された時に実行する関数
 */
const onClickAdd = () => {
  alert("ボタンが押されました！");
};

// 追加ボタンの要素を取得
const addButton = document.getElementById("add-button");

// ボタンがクリックされたら onClickAdd を実行
addButton.addEventListener("click", onClickAdd);

まとめ

今回は、JavaScriptを使って
「ボタンのクリックを検知する仕組み」 を作りました。

＼＼　今回のポイント　／／

・ <script> タグでJavaScriptファイルを読み込む
・ id を使って、JSから操作するHTML要素を指定する
・ addEventListener でクリックイベントを登録する

「ボタンが押されたら処理を実行する」

この仕組みができたことで、
JavaScriptでページを 自由に動かせる土台 が整いました。

次はいよいよ、入力欄の文字を読み取って、TODOリストに追加する という、
アプリのメイン機能を実装していきます！