ReactでTodoアプリを作ろう!

Todoアプリは、プログラミング初学者の方が学習するには、うってつけです。

何故なら、Todoアプリには、登録・参照・更新・削除のいわゆるCRUD(クラッド)と呼ばれる機能を詰め込み、かつ、シンプルに実装できるからです。

以前、Javascriptで実装したこともありますが、今回は、Reactを使ってコーディングしていこうと思います。

事前準備

下記を参考に「create-react-app」を使えるようにしてください。

また、任意の場所に以下のプロジェクトを作成します。

次のコマンドで、正常にプロジェクトが起動するか確認します。

プロジェクトの構成

デフォルトのプロジェクト構成を少し変更します。

src配下は以下のようになりました。

src/index.jsの中身を修正します。

これでOKです。

Bootstrapの導入

先に、Bootstrapを導入してしまいましょう。

画面を表示してみましょう。

Reducerの導入

Reactには、Stateと呼ばれるアプリケーションの状態を保持する機能があります。

アプリケーションは、ユーザーからのアクションにより、常に状態が変化します。

Todoリストで例を挙げてみましょう。

例えば、予定を追加した時に、リストのアイテム数が1つ増えます。

逆に削除した場合は、リストのアイテムが1つ減ります。

このリストのアイテムは、特定のアクションにより、アイテム個数の状態が変化します。

Reactでは、このリストアイテムの要素をStateで管理するわけです。

そして、その状態管理を担う機能の一つが、Reducerとなります。

これは、Reduxとよばれるフレームワークの機能ですが(後で導入します)、useReducerを使うとReactでも使用可能です。

以下のフォルダとファイルを作成してください。

このファイルには、状態管理によって処理したいことを書きます。

Reducerは、アプリケーションの状態を変えるために利用します。

要素としては、「state」と「action」の二つが存在します。

以下のように利用します。

上記の実装では、「import Todo from ‘./Todo’」の部分でエラーになると思います。Evnet.jsファイルを作成していないからです。

ひとまず、ここは無視してください。

次のインポートでは、useStateuseReducerを取り込んでいます。

続いて、以下の文でReducerの初期値を設定しています。

また、次の処理でstateの状態を取得、設定しています。

最後に、目的のreducerを発動させるためにdispatch関数の利用の例を以下に示します。

ここでは、作成ボタンを押下したらdispatchが動作するようになっています。

Todoコンポーネントの作成

続いて、Todoコンポーネントを作成しましょう。

「予定を追加する」ボタンを押下したら予定一覧にアイテムが表示されるようになりました。

ついでに、実装途中で合ったアイテムの削除を実装しましょう。

これで完了ボタンを押下したら、アイテムを削除できるようになっているはずです。

全ての予定を削除する。

全ての予定を削除する機能を実装しましょう。

「全ての予定を削除する」を押下するとアイテムが全件削除できるようにしました。

リファクタリング

App.jsの記述が大きくなってきたので、リファクタリングしましょう。

まずは、以下のファイルを作成します。

App.jsがだいぶすっきりしましたね。

こんどは、reducerをリファクタリングしましょう。

べた書きしていたactionを別ファイルに切り出す作戦です。

お疲れ様でした。今回は、ここまでにしましょう。

次回

Reduxを導入して、Todoアプリをパワーアップしましょう。

コメントを残す