はじめに
こんにちは。
Kojirockの1人アドベントカレンダー Advent Calendar 2018の9日目の記事です。
以下の本を読んで勉強できたことを記載していきます。
今回は第9章です。
- 作者: 川口和也,喜多啓介,野田陽平,手島拓也,片山真也
- 出版社/メーカー: 技術評論社
- 発売日: 2018/09/22
- メディア: 単行本（ソフトカバー）
- この商品を含むブログを見る
中規模・大規模向けアプリケーション開発② 設計
目次
9.1 コンポーネント設計
9.2 単一ファイルコンポーネント化
9.3 状態モデリングとデータフローの設計
9.4 ルーティング設計
9.1 コンポーネント設計
ここでは、今回作成するタスク管理アプリケーションのコンポーネント設計の方法が述べられています。
最初の手順として、Atomic Designに準拠した設計手法によるコンポーネント抽出を行います。
今回の場合は以下のような分け方になるようです。
| 粒度 | コンポーネント |
|---|---|
| Atoms | ラベル、テキストボックス、ボタン、アイコン |
| Molecules | ログインフォーム、ボードナビゲーション、タスクリストヘッダー、タスクフォーム、タスクカード、タスク詳細フォーム |
| Organisms | タスクリスト、ボードタスク |
| Templates | ログインビュー、ボードビュー、タスク詳細モーダル |
| Pages | ログインページ、ボードページ、タスク詳細ページ |
Atoms
最小粒度で、これ以上の分割ができないものが対象です。
今回でいうと、テキストボックスやボタンなどは、これ以上の分割ができないものなので、それぞれが該当します。
Molecules
もろキューみたいな読み方ですが、マリキュールというみたいです。
Atomsを組み合わせたコンポーネントです。
ログインフォームでいうと、ラベル、テキストボックス、ボタン、アイコンなどまさにAtomsとして分割したコンポーネントが組み合わさって作られています。
Organisms
Atoms, Moleculesそして、同レイヤーのOrganismsを組み合わせたコンポーネントです。
イメージ的には、Organismsからが、ドメインレイヤーという感じなのでしょうか？
Templates
Atoms, Molecules、Organismsを組み合わせたコンポーネントです。
本書ではTemplatesはワイヤーフレームと表現されています。
9.2 単一ファイルコンポーネント化
SFCでそれぞれ分割抽出したコンポーネントを作成していきます。
ここからは写経になります。
重要な点として、コンポーネント名(ファイル名)は、各プロジェクト毎(ベンダー毎？)のプレフィックスをつけることを推奨されています。
外部ライブラリを使用した際、コンポーネント名がかぶらないようにするためです。
9.3 状態モデリングとデータフローの設計
ここからは、今回のアプリケションで使用するデータ設計を行います。
ツールとしてはVuexを使用します。
本書で紹介されている状態は以下のとおりです。
| 状態 | 詳細 |
|---|---|
| Auth | 認証情報 |
| Task | タスク情報 |
| TaskList | タスクリスト情報 |
| Board | ボード情報 |
上記はトップレイヤで、それぞれの状態に更にデータがひも付きます。
例えば、Authの状態であれば、 token userId などを持っています。
各状態への変更(mutation)へアクセスするためのactionの定義になります。
例えば
- Authにアクセスするためのloginアクション
- タスクリストにアクセスするためのfetchListsアクション
などです。
9.4 ルーティング設計
最後にRouting設計ですが、こちらはもちろん Vue Routerを使用します。
今回作成する各種ルートの設定が記載されています。
終わりに
今回も前章と同じく、テキストのみの少々薄い内容となってしまいました。
次章がメインの開発になりそうです。
また、次章は写経がメインになりそうなので、こういった形式ではなく、気になったところをピンポイントで紹介していくスタイルになる可能性があります。
それか、本書では Vue CLIの init で作成しているので、 create で作成した手順を記載する可能性があります。
とりあえず今回はここまで。
おしまい。
