こちらのサイトからサンプルコードをダウンロードできます。
↑のサンプルに簡易的な説明を付与する形でまとめさせていただきます。

雑な記事スマセン。

中規模・大規模向けのアプリケーション開発② 設計

今回扱うのは、

コンポーネント設計
状態モデリングとデータフロー設計
ルーティング設計

9.1 コンポーネント設計

ある程度大きな規模のアプリケーションを作成するときは、
ワイヤーフレームレベルのUIイメーシからコンポーネントの設計をしておくと良い。

メリット

一貫性：アプリケーション全体で統一感のあるコンポーネントを開発できる
重複排除：同じような機能を提供するコンポーネントを排除できる
生産性向上：チームで開発するコンポーネントの大枠を共有することで開発効率を高められる

→とにかく大規模開発の際はちゃんと前もって設計しましょう

9.1.1 Atomic Designによるコンポーネントの抽出

コンポーネント設計の手法。以下の粒度でコンポーネントを分割していく。

Atoms
Molecules
Organisms
Templates
Pages 詳細は後述。

9.1.2 Atoms

UIを構成するための基本的な要素、機能的にこれ以上分割できないレベル。

ラベル
テキストボックス
ボタン
アイコン

P325の図を参照。

9.1.3 Molecules

Atomsをいくつか組みわせて作られたもの。

ログインフォーム
タスク詳細フォーム
タスクカード
...etc

P326, 327

9.1.4 Organisms

Atoms Molecules Organimsを組み合わせて作られた要素。

タスクリスト
ボードタスク

P328

9.1.5 Templates

ワイヤーフレーム。Pagesのテンプレートとなるもの。

ログインビュー(ページ)
ボードビュー(ページ)
モーダルビュー(ページ)

9.2 単一ファイルコンポーネント化

StomicDesignをもとに、タスク管理アプリのコンポーネントを抽出。
P331の図を参照。
　→各ファイルは積極的に単一ファイルコンポーネント化しましょう。

9.2.1 ディレクトリの構造化と各ファイルの配置

以下の単位でコンポーネントのディレクトリを分割する。

Atoms
Molecules
Organisms
Templates

詳細はP331の図を参照。

コンポーネントの名称・ファイル名にkbnが入っているのは、
html標準の要素や外部のライブライトのコンフリクトを防ぐため。

9.2.2 コンポーネントのAPI

再利用可能なコンポーネントにするためには以下をAPIとして定義する。

プロパティ
イベント
スロット(slot要素)

9.2.3 KbnButtonコンポーネントのAPI

プロパティ・イベント・スロットにそれぞれについてKbnButtonコンポーネントを例に見てみましょう。

詳細はP333

9.3 状態モデリングとデータフローの設計

9.3.1 状態のモデリング

このアプリでは以下の状態を管理しています。詳細はP334~335参照。
storeの中身を見るとピンと来るかも。

Auth : vuexで持つ
Task :
TaskList :
Board : vuexで持つ

ただし、状態は全てストアでもてばいいわけではない。
コンポーネントで持つ状態もある。

9.3.2 データフロー

アクションの抽出

データフローの設計として、必要な状態(state)を洗ったら、、
Vuexのアクション(Ajaxなどの非同期なやりとり、LocalStrageへの書き込みなど)を抽出しましょう。

本アプリケーションで使用するアクションの詳細はp336

loginアクションをトリガーとするデータフロー

fetchListsアクションをトリガーとするデータフロー

addTaskアクションをトリガーとするデータフロー

updateTaskアクションをトリガーとするデータフロー

removeTaskアクションをトリガーとするデータフロー

logoutアクションをトリガーとするデータフロー

結局のところ、、

・コンポーネント(画面)場でイベント発生  
　↓  
・アクションの呼び出し(dispatch)  
　↓  
・アクションの中で外部APIとのやりとり等を行い、その結果をmutetionをミューテーションにcommit  
　↓  
・mutationがステートの値を最新化する  
　↓  
・画面に反映される

9.3.3 データフロー周りの雛形コードのセットアップ

ミューテーションとアクションのハンドラを準備

src/store/mutation-types.jsにミューテーション情報を定義
src/store/mutation.jsにミューテーションハンドラの雛形を定義

9.3.4 アクションの雛形

src/store/action.jsにアクションハンドラを定義

バックエンドAPIとの通信のための準備

以下の処理では外部APIとのやりとりがあるので、その準備をします。

Auth : ログイン・ログアウト
List : タスクリスト周りの情報処理
Task : タスク周りの情報処理

// まとめて作成
$ touch src/api/{auth,list,task}.js

9.4 ルーティング設計

実際にアプリを触りながら、ルーティングの定義ファイルを確認してみましょう！！！

開発日報

窓際エンジニアの開発備忘。日報は嘘です。

vuejs入門中規模・大規模向けのアプリケーション開発② 設計