【応用】簡単なToDo管理ツールを作ろう

このレッスンでは、これまで学んだ配列・オブジェクト・関数・繰り返し・クラスを組み合わせて、簡単なToDo管理ツールを作りながら総合的な理解を深めることを目標にします。「JavaScript ToDoアプリ 作り方」で調べている方向けです。

ここまで学んだ配列・オブジェクト・関数・繰り返し・クラスを組み合わせて、簡単なToDo(やること)管理ツールを作ってみましょう。実際のアプリ開発でも、こうした小さな機能を組み合わせて大きなものを作っていきます。1つ1つのレッスンで学んだ知識が、こうして実際のアプリに応用できることを体感できる、総仕上げのレッスンです。

サンプルコードでは、TodoListクラスの中に、タスクを配列で管理するtasksプロパティと、add()・complete()・show()という3つのメソッドを用意しています。それぞれのメソッドが、配列への追加・オブジェクトのプロパティ変更・.forEach()による一覧表示という、これまで学んだ操作を実際に組み合わせています。

初心者がよくつまずくのが、複数の機能が絡み合ったコードの全体像をつかむことです。まずはadd()だけ、次はcomplete()だけ、というように1つずつのメソッドの動きを個別に確認してから、全体としてどう連携しているかを追いかけると理解しやすくなります。慣れてきたら、削除機能や優先度の追加など、自分なりの機能拡張にも挑戦してみましょう。

この例では画面(HTML)は使わず、実行結果に出力する形で「タスクの追加」「完了」「一覧表示」を行っています。慣れてきたら、Webページの<button>と組み合わせて本物のToDoアプリに発展させることもできます(HTML/CSSレッスンもあわせて学んでみましょう)。