25 App Component How should we use App Component ? - アプリケーションの全体の設定や、各 Serviceの初期化処理などを行う - 例)APIからの初期データの取得、WebSocketの接続処理など - 初期化処理は基本的に Service に移譲し、シンプルに保つ Component Design
42 Module - Module は 機能単位での Component の集合 - Service なども含めることができるが、アプリケーション用の Module は Component 群のカプセル化と考えるのが良い Module Structure Module is a set of Components has Module Components
50 State Management State Management - State とは、移り変わるアプリケーションの状態を表す - State Management とは アプリケーションのデータ管理方法 - Angularでは、主に Component と Service の連携方法 Component Component State Service
51 2種類の State Management Component Single Data Service Data Service Global Store Store Data Service Data Service Component Component Component Component Component State Management
53 Single Data Service - 1つのデータタイプ (モデル) につき、1つの Serviceを作成し状態管理する - Service はデータを Stream として提供し、 Component はそれらを subscribe する形で、リアルタイムにデータを受け取る Data Service Component Component update subscribe State Management
55 Single Data Service Data Service Component Component - 小さく始められる - シンプルで仕様理解が簡単 Pros - Serviceの数が増えた時に急激に複雑化 - どのデータがどの Service にあるのか分かりづらい - 各 Service毎に仕様が異なる可能性がある Cons update subscribe State Management
56 Single Data Service - 小規模なアプリケーション (1-3人程度の開発者) - 仕様が開発と同時に進むような、スピードの求められる開発 - ある程度の大規模なアプリケーションが予定される場合は、 後述の Global Storeを使用すべき State Management When should we use Single Data Service ?
58 Global Store - 1つの Store が全てのデータを管理 (Databaseとなる) - Component は Actionを使用して Store を更新 - Data (State) の更新処理には reducer という関数を使用 Store reducer dispatch Action subscribe Component Component State Management
63 Action Design - Data Service と違い、Store はアプリケーションの中央 Database そのもの - 直接 Database の書き換えができないように、 Store の直接の更新はできない - Action / Reducer は、Database に対しての更新クエリと見なせる State Management Why should we use Action ?
64 Action Design - Actionはアプリケーションの状態変更を示す - 分かりやすい Actionの設計は、アプリケーション仕様の理解を簡単にする - Global Store を使う上で、Actionの設計が最も重要になる State Management How should we use Action ?
66 Action Design Login後、User一覧ページから指定のUser情報を閲覧、アップデートする一連の処理 [ Login Page ] Login [ User List Page ] Load Users [ User Detail Page ] Update User Detail [ User Detail Page ] Load User Detail [ User List Page ] Reload Users Login Load Users Update User Detail Load User Detail Reload Users State Management
67 Action Design Login後、User一覧ページから指定のUser情報を閲覧、アップデートする一連の処理 [ Login Page ] Login [ User List Page ] Load Users [ User Detail Page ] Update User Detail [ User Detail Page ] Load User Detail [ User List Page ] Reload Users [ Login API ] Login Success [ Router ] Move Page [ User API ] Load Users Success [ User API ] Load User Detail Success [ Router ] Move Page [ User API ] Update User Detail Success [ User API ] Reload Users Success [ Router ] Move Page State Management