More Related Content
Similar to Atomic design+vue (20)
Editor's Notes
- 観測範囲内での偏見
レベル２くらいまでは当たり前。
３になると市場価値が一気に上がる。
４は稀有。
５はまちまち、４と５両方できる人は間違いなく価値がある
- 再利用性：
テスト済コンポーネントについて再利用することで品質を担保しながら再利用
UI設計に秩序：
コンポーネント化することで似たようなアイテムをまとめる役割を果たす
この結果、見た目や利便性が統一されやすい
並行開発：
一つの画面で複数のコンポーネントを組み合わせることになる為、コンフリクトさせずに開発可能になる
なので、多人数で１つの画面を開発しやすい
手戻りが減る：
関係するコンポーネントだけ改造すれば良いから影響範囲が明確になる、または別のコンポーネントで代替するといったことが可能になる
他のシステムに持ち出す：
関連するコンポーネントを一式持っていけば他のシステムで使える
- 再利用性：
テスト済コンポーネントについて再利用することで品質を担保しながら再利用
UI設計に秩序：
コンポーネント化することで似たようなアイテムをまとめる役割を果たす
この結果、見た目や利便性が統一されやすい
並行開発：
一つの画面で複数のコンポーネントを組み合わせることになる為、コンフリクトさせずに開発可能になる
なので、多人数で１つの画面を開発しやすい
手戻りが減る：
関係するコンポーネントだけ改造すれば良いから影響範囲が明確になる、または別のコンポーネントで代替するといったことが可能になる
他のシステムに持ち出す：
関連するコンポーネントを一式持っていけば他のシステムで使える
- 実際Vueに限った話ではない
- ざっくり見ていく
- HTML/CSS/JS：
単一ファイルコンポーネントで実現、レンダリングはJSで行われる
JSはコンポーネントごとに閉じる
Scoped CSS：
単一ファイルコンポーネントでCSSが閉じるため、階層による上書きとかされなくて済む
ここまで使うとコンポーネントのカプセル化が実現する
- テスト容易性：
DOMと紐づくからテストしづらかったけど、仮想DOM（オンメモリ）のおかげでテストがしやすくなった
- テスト容易性：
DOMと紐づくからテストしづらかったけど、仮想DOM（オンメモリ）のおかげでテストがしやすくなった
- ボトムアップ：
テストコードを後から足してるからトップダウンになってる
データの連携方法が親から子に伝搬するようになってちゃってるから、コンポーネントで閉じれてない
しんどい：
並行開発してこそのスピード感がある気がしている
一人で全部作ると遅い気がする（慣れの問題な気もするけど）
