前回はちょっと寄り道してデザインやら公開する方法をかじってみました。
今回は本筋に戻って、実際にサマになるもんを作ってみたいと思います。 とはいうものの、下の本の内容を踏まえてガチャガチャいじった程度ですが。
- 作者: 川口和也,喜多啓介,野田陽平,手島拓也,片山真也
- 出版社/メーカー: 技術評論社
- 発売日: 2018/09/22
- メディア: 単行本（ソフトカバー）
- この商品を含むブログを見る
時間かけて何度も読み直せばいい本ですね。毎回新しい発見がある感じです。
その他、この辺を参考にさせていただきました。非常に参考になりました。ありがとうございます。
設計
本の内容そのままだといろいろまずいので、だいぶ改編を加えます。 まずベースになるのは前回作ったVuetifyのサンプルを使った残骸ですね。
それにいろいろ変更を加える形で作っていきます。
作りたいページ概要
全体はこんな感じ。
細かいとこはこんな感じ。
ボード
詳細表示ダイアログボックス
その他
この手の設計はすべてStoryBookを使えばチーム内で共有するのは効率化しそうですね。 最近はこんなものまで出来てるんですね。知らなかったっす。。。
コンポーネント設計
Atomic Designに則って考えます。Atomic DesignとはAtoms, Molecules, Organisms, Templates, Pagesの5段階にコンポーネントを分割するデザイン手法です。 それぞれの粒度としてはこんな感じです。
- Atoms : 最小の構成単位。ボタンやラベルなど。
- Molecules : Atomsを組み合わせたもの。ラベル付きフォームなど。
- Organisms : Moleculesより複雑なもの。ナビゲーションバーやログインフォームなど。
- Templates : ページ構成が説明できる粒度。デザインするワイヤーフレームなど。
- Pages : 実際のデータをTemplateに当てはめたもの。
今回は1ページしか作る気がないので、TemplateとPageはどちらか省略ですね。
状態管理
次に状態管理について考えていきます。
状態としては、下記のように設定しました。
- Tasks
- Stage
Tasks
複数のボードが横向きに順序を持つように配置されます。 ボードには詳細情報であるInfoのリストが格納されます。
| 属性名 | 型 | 説明 | 例 |
|---|---|---|---|
| Tasks | list | Stage | stage1, stage2, ... |
Stage
各ボードを選択した際に、その詳細を表示します。 実際にはDialog Boxの中に表示され、その中に記載される状態をStageとして管理します。
| 属性名 | 型 | 説明 | 例 |
|---|---|---|---|
| title | string | タスク名 | 味付け、煮込み、洗い物 |
| detail | string | タスク詳細 | 塩小さじ一杯を投入、コトコト煮込む、洗剤を投下 |
データフロー
今回は外面だけになったので、データフローは省略。 覚えてたらそのうち更新処理とか別記事で書きます。
実装
そんなこんなで、できたものはこんな感じです。 (途中過程はだいぶ端折りましたが、まあコード見ればわかるでしょう。。。)
おまけ
全然関係無いですけど、localhostのサービスを埋め込むことって出来るのかな？って思ってやってみたら意外といけました。
追加したVueのコードはこんだけ。
意外といけるもんですね。勉強になりました。
感想
ちゃんと設計しようとすると大変ですね。 ラフスケッチをササッと設計を書き出す能力が必要になってきますね。
