Mima Design MemottoWEB DESIGNER · mima

JavaScriptで作るシンプルなToDoアプリ入門

タスクの登録、完了状態の切り替え、削除という基本機能を使って、ブラウザーで動くToDoアプリを作ります。特別な開発環境やフレームワークを使わず、HTML、CSS、JavaScriptの役割を分けながら実装するため、プログラミング学習の題材にも向いています。

Webデザインでは、見た目の整え方と同じくらい、入力した内容がどのように保存され、画面に反映されるかを理解することが大切です。スマートフォンアプリ開発にも関心がある場合は、まずブラウザー上で小さな機能を完成させると、画面とデータの関係をつかみやすくなります。関連して、iOSアプリ開発入門のような学習記録にも目を通すと、別の開発分野との違いも見えてきます。

作成する機能とファイル構成

今回のアプリには、タスクを入力するフォーム、追加したタスクを表示する一覧、完了と削除のボタンを用意します。入力欄が空のまま送信された場合は登録せず、タスクをクリックすると完了状態に切り替わる仕様です。

ファイルは次の3つに分けます。

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

HTMLは画面の骨組み、CSSは色や余白、JavaScriptはタスクの追加や削除を担当します。役割を分けておくと、デザインを変更したいときに機能部分へ影響を与えにくくなります。

HTMLで画面の土台を作る

まずはindex.htmlに入力フォームと一覧表示用の要素を記述します。id属性はJavaScriptから要素を取得するために使うため、名前を途中で変更しないようにします。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ToDoアプリ</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="container">
    <h1>やることリスト</h1>

    <form id="todoForm">
      <input id="todoInput" type="text" placeholder="タスクを入力">
      <button type="submit">追加</button>
    </form>

    <ul id="todoList"></ul>
  </main>

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

フォームを使うと、ボタンのクリックだけでなく、入力欄でEnterキーを押した場合も登録できます。スマートフォンでは入力欄の幅やボタンの押しやすさが操作感に直結するため、後から画面幅に合わせて調整します。

CSSで見やすく整える

次に、一覧が読みやすくなる最低限のスタイルをstyle.cssへ追加します。複雑なレイアウトを最初から作らず、余白、文字サイズ、背景色を整えるだけでも、試作品として十分に確認しやすくなります。

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 40px 16px;
  background: #f5f6f8;
  color: #333;
  font-family: sans-serif;
}

.container {
  max-width: 560px;
  margin: 0 auto;
  padding: 24px;
  background: #fff;
  border-radius: 12px;
}

form {
  display: flex;
  gap: 8px;
}

input {
  flex: 1;
  padding: 10px;
}

button {
  padding: 10px 16px;
  cursor: pointer;
}

li {
  display: flex;
  justify-content: space-between;
  margin-top: 12px;
  padding: 10px;
  background: #f0f1f3;
}

配色を決めるときは、好きな色を並べるだけでなく、背景と文字のコントラストや操作対象の目立ち方を確認します。色選びの基本を整理したい場合は、配色の基礎記事も参考になります。

JavaScriptでタスクを追加する

script.jsでは、フォームの送信を検知して新しいリスト項目を作成します。preventDefaultを使うことで、フォーム送信時にページ全体が再読み込みされるのを防ぎます。

const form = document.querySelector('#todoForm');
const input = document.querySelector('#todoInput');
const list = document.querySelector('#todoList');

form.addEventListener('submit', (event) => {
  event.preventDefault();

  const text = input.value.trim();

  if (text === '') {
    return;
  }

  const item = document.createElement('li');
  const label = document.createElement('span');
  const deleteButton = document.createElement('button');

  label.textContent = text;
  deleteButton.textContent = '削除';

  item.append(label, deleteButton);
  list.appendChild(item);

  input.value = '';
});

入力値をtextContentで表示しているのは、安全に文字列として扱うためです。innerHTMLへそのまま代入すると、入力内容によっては意図しないHTMLとして解釈される可能性があります。

完了と削除を実装する

タスクをクリックしたときに完了用のクラスを付け、削除ボタンを押したときに項目を取り除きます。イベントが発生した要素を確認することで、一覧全体に複雑な処理を書かずに済みます。

  label.addEventListener('click', () => {
    item.classList.toggle('done');
  });

  deleteButton.addEventListener('click', () => {
    item.remove();
  });

この処理を先ほどの追加処理へ組み込み、CSSに完了状態を追加します。

li.done span {
  color: #888;
  text-decoration: line-through;
}

完成後は、空文字の登録、長いタスク名、連続した追加、削除後の表示などを確認します。さらに実用性を高めるなら、localStorageへ配列を保存して、ページを閉じてもタスクが残る機能を追加できます。

まずは今回のコードを実際に動かし、文字色やボタンの形を自分の好みに調整してみてください。小さな機能を一つずつ追加しながら、作成したToDoアプリを自分の開発メモやポートフォリオとして公開していきましょう。