JavaScriptのきほん「ToDoリストを作ろう（１）フォームからデータを受け取る」

スポンサーリンク
JavaScript

これまでの記事では、ブラウザに時計やカレンダーを表示する題材を通して、DOM要素の操作やイベントリスナーの使い方を扱った。今回からは、それらの知識を踏まえて「ToDoリストアプリ」を3回に分けて作っていくことにしよう。

初回となる今回は、フォームに入力された内容をJavaScriptで受け取るところまでを扱う。

1. 完成イメージ

今回作るものは、入力欄と「追加」ボタンだけのシンプルなフォームである。
ボタンを押すと、入力した文字列がコンソールに表示されるところまでを確認する。
画面への表示は次回以降で扱う。

想定するローカル環境

javascript-todo-app/
├── index.html
├── style.css
└── script.js

2. index.html（HTMLファイル）

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>ToDoリストを作ろう</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>ToDoリスト</h1>

  <form id="todo-form">
    <input type="text" id="todo-input" placeholder="やることを入力">
    <button type="submit">追加</button>
  </form>

  <ul id="todo-list"></ul>

  <script src="script.js"></script>
</body>
</html>

HTML構造はいたってシンプルである。フォーム（form）の中にテキスト入力欄（input）とボタン（button）を置き、リストを表示するための空のul要素をその下に用意している。
このulの中身は、次回の記事でJavaScriptから動的に生成していくことになる。

（注意）<script>タグは必ず</body>の直前、</form>や</ul>より後ろに置くこと。
<head>の中や<form>より前に置いてしまうと、まだ読み込まれていないHTML要素をJavaScriptが取得しようとしてエラーになるので注意しよう。

3. style.css（CSSファイル）

body {
  font-family: sans-serif;
  max-width: 480px;
  margin: 40px auto;
}

#todo-form {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

#todo-input {
  flex: 1;
  padding: 6px;
}

見た目については最低限のスタイルのみとし、本筋であるJavaScriptの動作確認に集中できるようにしている。

4. script.js（JavaScriptファイル）

// フォームとリストの要素を取得する
const form = document.getElementById('todo-form');
const input = document.getElementById('todo-input');

// ToDoを保持しておく配列
const todos = [];

// フォームが送信されたときの処理
form.addEventListener('submit', (event) => {
  // ページの再読み込みを防ぐ
  event.preventDefault();

  // 入力値を取得する（前後の空白は除去）
  const text = input.value.trim();

  // 空文字だった場合は何もしない
  if (text === '') {
    return;
  }

  // 配列に追加する
  todos.push(text);

  // 確認のためコンソールに表示する
  console.log(todos);

  // 入力欄を空にする
  input.value = '';
});

（注意）コピー＆ペーストする際は、1行に複数の処理が詰まってしまわないよう注意しよう。
特に//から始まるコメントは、その行の末尾まで丸ごとコメント扱いになる。もしevent.preventDefault();のような処理がコメントと同じ行にくっついてしまうと、その処理ごと無視されてしまうので気をつけたい。

5. コードの解説

まず、form.addEventListener('submit', ...)の部分に注目してほしい。以前の記事「JavaScriptのきほん「イベントリスナー」」で紹介した通り、特定のイベントが発生したときに実行する関数をここで登録している。フォームのsubmitイベントは、テキストを入力した状態でボタンをクリックしたとき、あるいは入力欄でEnterキーを押したときに発生する。

event.preventDefault()は今回はじめて登場する処理である。HTMLのフォームは、本来サーバーにデータを送信してページを再読み込みする性質を持っている。これを放置すると、せっかく取得した値が画面のリロードとともに消えてしまう。そこでpreventDefault()を呼び出すことで、この既定の動作をキャンセルし、ページ内だけで処理を完結させている。

input.valueは、入力欄に入力されている文字列を取得するためのプロパティである。trim()メソッドを付け加えているのは、入力の前後にスペースだけが入力されているようなケースを弾くためである。

取得した文字列は、todosという配列にpush()メソッドで追加している。この配列が、ToDoリストのデータそのものということになる。今回はまだ画面には反映せず、console.log(todos)でブラウザの開発者ツール（コンソール）に出力し、正しくデータが溜まっていることだけを確認する。

最後にinput.value = ''として、入力欄を空にしている。これを忘れると、追加のたびに前回の文字列が入力欄に残ったままになってしまう。

6. コンソールを開いてみよう

今回の動作確認には、ブラウザの「コンソール」という画面を使う。
コンソールとは、ブラウザに標準で搭載されている開発者向けの画面のことで、console.log()で出力した内容やエラーメッセージなどが表示される。

コンソールは、次の方法で開くことができる。

  • Google Chrome（Windows / Linux）：F12キー、またはCtrl + Shift + I
  • Google Chrome（Mac）：Command + Option + I
  • Firefoxも同様にF12キーで開発者ツールが開く

開発者ツールが開いたら、上部に並んでいるタブの中から「Console（コンソール）」を選択しておこう。

7. 動作確認

コンソールを開いた状態でindex.htmlをブラウザで開き、入力欄に何か文字を入力してから「追加」ボタンを押してみよう。コンソールに

["牛乳を買う"]

のように、配列の中身が表示されれば成功である。ボタンを押すたびに要素が増えていく様子を確認しておこう。空欄のまま追加ボタンを押した場合は、何も起こらないことも合わせて確認しておこう。

なお、index.htmlをブラウザで直接開く（file://で始まるURL）と、コンソールにUnsafe attempt to load URL ...という警告が表示されることがあるが、これは動作に影響のない注意書きなので気にしなくてよい。

次回は、このtodos配列の中身を実際に画面上のリストとして表示する処理を作っていくことにする。

コメント

タイトルとURLをコピーしました