[前回] Django+Reactで学ぶプログラミング基礎(30): Reduxチュートリアル(概念とデータフローの詳細)
はじめに
前回まで、Reduxの概念とデータフローを深掘りしました。
今回から、Reduxを用いてTodoアプリ作成に取り組みます。
今回の内容
- スターター(starter)プロジェクトを設定
- Todoアプリの要件定義
- Todoアプリの設計
- stateの値を設計
- stateの構造を設計
準備
スタータープロジェクトをcloneし、設定
-
スタータープロジェクトには、以下が事前構成されている
- Reactの設定
- デフォルトのスタイル
- APIリクエストを記述するためのREST API
-
VS Codeの、
ファイルメニューからフォルダーを開くを選択- プロジェクトのフォルダーを選択(ここでは、
C:\kanban\todo)
- プロジェクトのフォルダーを選択(ここでは、
-
Ctrl + @で、ターミナルを開き、GitHubからスタータープロジェクトをclone
C:\kanban\todo>git clone https://github.com/reduxjs/redux-fundamentals-example-app
-
redux-fundamentals-example-appフォルダーに移動し、プロジェクトに必要なツールをインストール
C:\kanban\todo>cd redux-fundamentals-example-app
C:\kanban\todo\redux-fundamentals-example-app>npm install
- プロジェクトを起動
C:\kanban\todo\redux-fundamentals-example-app>npm start
- ブラウザが開き、アプリ画面が表示される
プロジェクトの初期状態
- スタータープロジェクトは、標準のCreate-React-Appプロジェクトテンプレートに基づいている
- いくつかの変更が加えられている
プロジェクトの構成
-
/src-
index.js: アプリのエントリポイントで、メインの<App>コンポーネントをレンダリング -
App.js: アプリのメインコンポーネント -
index.css: アプリのスタイルシート -
/api-
client.js: AJAXリクエストのクライアントで、GETとPOSTリクエストを発行可能 -
server.js: アプリがデータ取得時にアクセスする、ダミーのREST APIエンドポイント
-
-
/exampleAddons: 追加のReduxアドオン(addon)
-
Todoアプリの要件定義
- 要件定義は、システム開発工程において、フェーズ①に該当
- ①要件定義→②設計→③実装→④テスト→⑤リリース/保守
Todoアプリのビジネス要件
- Todoアイテムリストを操作
- ユーザー入力を処理
- データ変更時にUIを更新
Todoアプリに必要な機能
- アプリ最終ゴールのイメージ
※ 引用元: アプリ最終ゴールのイメージ
- UIは、3つのセクションで構成される
- 新しいTodoアイテムを入力する入力ボックス
- 既存のTodoアイテムのリスト
- フッターセクション
- 未完了Todoの数
- フィルタリングオプション
- Todoアイテムに必要な機能
-
完了状態に切り替えるためのチェックボックス - カテゴリ別色分けされたタグ機能
- Todoアイテム削除機能
-
- カウンターは、アクティブTodoの数を複数形にする必要あり
- "0 items"/"1 item"/"3 items"
- 一括操作ボタン
- すべてのTodoを完了としてマーク
- 完了したすべてのTodoを削除
- タスクフィルタリングの方法
- "All"/"Active"/"Completed"などアイテム状態に基づくフィルタリング
- 選択しされたカラータグに基づくフィルタリング
Stateの値を設計
- ReactとReduxのコア原則
- UIは、stateに基づきレンダリングされる
- アプリ設計のアプローチ
- 最初に、アプリ機能に必要なすべてのstateを考える
- UIは、できるだけ少ないstateを使用し表現
- 追跡/更新が必要なデータを少なくするため
- Todoアプリで考慮すべき2種類の状態
- Todoアイテムのリスト
- アプリの状態を表す
- アプリの動作に必要なコアデータ
- フィルタリングオプション
- UIの状態を表す
- アプリの今現在の実行状態を表す
- Todoアイテムのリスト
- Todoアイテムごとに保存すべき情報
- ユーザーが入力したテキスト
- 完了したか否かを示すフラグ
- 一意のID値
- カラーカテゴリ(指定された場合)
- フィルタリングの種類を表す列挙値
- 完了ステータス: "All", "Active", "Completed"
- 色: "Red", "Yellow", "Green", "Blue", "Orange", "Purple"
Stateの構造を設計
- stateは、プレーンなJavaScriptオブジェクトと配列に保持
- stateに、以下のようなプレーンでないJSデータを使用できない
- クラスを持たないインスタンス
- 組み込みJSタイプ(Map/Set Promise/Dateなど)
- 関数
- stateに、以下のようなプレーンでないJSデータを使用できない
- ルートのRedux stateは、通常プレーンなJSオブジェクト
- その中に他のデータがネストされる
- Todoアプリで、stateに必要な値
- Todoアイテムオブジェクトの配列
- 各アイテムのフィールド
- id: 一意の番号
- text: ユーザーが入力したテキスト
- completed: 完了したか否かを表すフラグ
- color: カラーカテゴリ(オプショナル)
- 各アイテムのフィールド
- フィルタリングオプション
-
完了状態に基づくフィルタリング - 選択されたカラーカテゴリの配列によるフィルタリング
-
- Todoアイテムオブジェクトの配列
- Todoアプリで、stateの例
const todoAppState = {
todos: [
{ id: 0, text: 'Learn React', completed: true },
{ id: 1, text: 'Learn Redux', completed: false, color: 'purple' },
{ id: 2, text: 'Build something fun!', completed: false, color: 'blue' }
],
filters: {
status: 'Active',
colors: ['red', 'blue']
}
}
- ※注意: Reduxの外にstateを持っても問題ない
- 以下のようなstateは、Reduxに保持する必要なし
このドロップダウンメニューは開いていますか?フォーム入力の現在値
- 以下のようなstateは、Reduxに保持する必要なし
おわりに
Reduxを用いて、Todoアプリの要件定義と設計を行いました。
次回も続きます。お楽しみに。