バニラ JavaScript で ToDo リストを作成する

Apr 03 2023

バニラ JavaScript を使用して todo リストアプリケーションを構築するための概要。この記事では、単純な todo リストを作成するための基本について説明し、クリーンで効率的なコードを作成するためのヒントとベストプラクティスを紹介します。

フロントエンド開発者の面接の準備は進んでいますか? それとも、JavaScript のスキルを磨きたいだけですか? いずれにせよ、To Do リストアプリを作成することは、すばらしい練習方法です。これは数え切れないほどの Web アプリケーションに見られる機能であり、うまく使えば、JavaScript、HTML、および CSS を熟知していることを示すことができます。

このチュートリアルでは、バニラの JavaScript を使用してゼロから独自の To Do リストアプリを作成する方法を紹介します — フレームワークやライブラリは必要ありません!

このチュートリアルを終了すると、完全に機能する To Do リストアプリが完成し、ポートフォリオプロジェクトとして、またはさらに学習するための出発点としても使用できます。それでは、一緒に素晴らしいものを作りましょう!

入門

コードに入る前に、開発環境がセットアップされていることを確認しましょう。このチュートリアルでは主に JavaScript に焦点を当てるため、HTML と CSS の基本的な理解が必要です。

開発環境をセットアップするには、私が作成した Webpack ボイラープレートを使用します。こちらの GitHub で見つけることができます。

このボイラープレートには、Webpack、Babel、開発サーバーなど、最新の JavaScript 開発を開始するために必要なすべてのツールと構成が含まれています。

Webpack に慣れていなくても心配はいりません。以前、Medium で Webpack の初心者向けガイドを作成しました。このガイドでは、Webpack を使用して Web アセットをバンドルするための基本について説明しているため、このチュートリアルを問題なく進めることができます。

Webpack の使用を開始する: Web アセットをバンドルするための初心者向けガイド

開発環境のセットアップが完了したら、To Do リストアプリケーションの構築に取り掛かりましょう。

To Do リストアプリケーションの JavaScript 機能の実装を開始するには、 Task.jsというファイルを作成します。このファイルには、タスクの保存、作成、完了、削除など、タスクに必要なすべてのコードが含まれます。また、すべてのタスク、すべての保留中のタスク、およびすべての完了したタスクを取得するためのメソッドも定義します。

さらに、ローカルストレージの getter メソッドと setter メソッドを含むStorage.jsという別のファイルを作成します。次に、 Task.jsで作成された Task クラスを、 Storage.jsで定義された Storage クラスで拡張します。

Task.jsファイルのコードは次のとおりです。

Storage.jsファイルのコードは次のとおりです。

これで、Task.js と Storage.js の実装が完了しました。UI の実装に移ります。UI レンダリングとユーザーインタラクションを処理するために、Layout.js という名前の新しいファイルを作成します。

Layout クラスは、UI のレンダリング、イベントリスナーの追加、および stateService オブジェクトからの適切なメソッドの呼び出しを担当して、アプリケーションの状態を操作します。stateService オブジェクトは、メインファイルから渡された Task のインスタンスであるコンストラクター関数に引数として渡され、TodoList インスタンスがアタッチされるラッパー要素への参照と共に渡されます。

Layout.js の Gist コードを見ると、Layout クラスには、イベントリスナーを関連する DOM 要素にバインドし、タスクとタブでクリックイベントを処理し、アクティブなタブに基づいて適切なタスクをレンダリングするいくつかのメソッドがあることがわかります。Layout クラスは、#tabItems というプライベートプロパティも定義します。これは、タブ ID とタイトルを含むオブジェクトの配列です。

Layout.js の要旨コードへのリンクは次のとおりです。

これで、最終的な JS ファイルである main.js の作成に進むことができます。このファイルは、todo アプリケーションのエントリポイントとして機能します。

ここでは、Task と Layout の 2 つのクラスを、前に作成した別のモジュール task.js と layout.js からそれぞれインポートします。これらのクラスは、データの管理と todo アプリケーションのユーザーインターフェイスのレンダリングを担当します。

loadApp関数は、アプリケーションの心臓部です。Todo リストの状態を管理する Task クラスの新しいインスタンスを作成し、DOM から #card-wrapper 要素を選択します。これは、Todo リストのコンテナーとして機能します。

Task インスタンスを作成し、ラッパー要素を選択した後、loadApp は Layout クラスの新しいインスタンスを作成します。これは、ユーザーインターフェイスを生成し、stateService インスタンスを使用してアプリケーションの現在の状態を追跡する、stateService インスタンスとラッパー要素を渡します。

main.js のコードは次のとおりです。

import Task from "./task";
import Layout from "./layout";

/*
 * Initializes the todo application by creating an instance of the Task class and the Layout class,
 * and passing the Task instance to the Layout constructor.
 */
const loadApp = () => {
  const stateService = new Task();
  const wrapper = document.querySelector("#card-wrapper");
  new Layout(stateService, wrapper);
};

loadApp();

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Todo Application</title>
  </head>
  <body>
    <section class="vh-100 gradient-custom">
      <div class="container py-5 h-100">
        <div class="row d-flex justify-content-center h-100">
          <div class="col col-xl-10">
            <div class="card" id="card-wrapper">
              <div class="card-body p-5" id="card-content">
                <form
                  class="d-flex justify-content-center align-items-center mb-4"
                  id="task-form"
                >
                  <div class="form-outline flex-fill d-flex">
                    <input type="text" name="task" class="form-control" />
                    <button type="submit" class="btn btn-info ms-2">Add</button>
                  </div>
                </form>

                <!-- Tabs navs -->
                <ul class="nav nav-tabs mb-4" id="tab" role="tablist"></ul>
                <!-- TODO Items -->
                <div id="tab-content"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </body>
</html>

yarn start

素晴らしい！これで、ブラウザーでユーザーインターフェイスを視覚化できるはずです。TODO アプリが完全に機能するようになりました。アプリの動作については、次のビデオデモンストレーションを参照してください。

Todo アプリケーションのデモ

Bootstrap、Local Storage API、オブジェクト指向アプローチを利用して、HTML、CSS、JavaScript を使用して堅牢な todo アプリを構築しました。このチュートリアルがお役に立てば幸いです。さらに参考資料やガイダンスが必要な場合は、お気軽にお問い合わせください。