STORES.jp入社3ヶ月で気づいたこと ~Nuxt.js 移行における 未来を見据えたコンポーネント設計~ / Components Design of Frontend in STORES.jp

STORES.jp Meetup for Front-end Engineers #1 (https://hey.connpass.com/event/143246/ )の発表資料です。

STORES.jp入社3ヶ月で関わったアイテム編集ページ移行PJTでのコンポーネント設計について発表しました。

Transcript

1. 2019 STORES.jp, Inc., All Rights Reserved 1 STORES.jp入社3ヶ月で気づいたこと ストアーズ・ドット・ジェーピー株式会社 UI改善チーム 藤井 大祐(@daitasu) Nuxt.js 移行における 未来を見据えたコンポーネント設計 STORES.jp Meetup for Front-end Engineers #1
2. 2019 STORES.jp, Inc., All Rights Reserved 2 2 自己紹介 Like: Vue, React Native, Mongo 2 Job: Frontend-Engineer Community: YOUTH TECH 藤井 大祐 @daitasu
3. 2019 STORES.jp, Inc., All Rights Reserved 3 本日のテーマ Nuxt.js 移行における 未来を見据えたコンポーネント設計 STORES.jp入社3ヶ月で気づいたこと
4. 2019 STORES.jp, Inc., All Rights Reserved 4 今日お話ししたいこと 入社3ヶ月間で関わった アイテム編集ページNuxt.js移行での • 共通基盤(コンポーネント) • コンポーネント設計 • ストア設計
5. 2019 STORES.jp, Inc., All Rights Reserved 5 STORES.jpでできること 誰でも簡単に、本格的なネットショップを作成できる
6. 2019 STORES.jp, Inc., All Rights Reserved 6 STORES.jpでできること 顧客管理 アイテム編集 倉庫サービス お問い合わせ メルマガ クーポン ストアデザイン 売上管理 注文一覧 アクセス解析
7. 2019 STORES.jp, Inc., All Rights Reserved 7 アイテム編集ページNuxt.js移行 商品の登録・編集 を行うコア機能 Nuxt.jsに移行。別repo構成へ。
8. 2019 STORES.jp, Inc., All Rights Reserved 8 今日お話ししたいこと 入社3ヶ月間で関わった アイテム編集ページNuxt.js移行での • 共通基盤(コンポーネント) • コンポーネント設計 • ストア設計
9. 2019 STORES.jp, Inc., All Rights Reserved 9 今日お話ししたいこと 入社3ヶ月間で関わった アイテム編集ページNuxt.js移行での • 共通基盤(コンポーネント) • コンポーネント設計 • ストア設計
10. 2019 STORES.jp, Inc., All Rights Reserved 10 STORES.jpのフロントエンド特徴① 2018年4月 1名 2019年10月 9名 社員 業務委託 社員 9倍 成長 発足してまだ1年。出来立てほやほや。
11. 2019 STORES.jp, Inc., All Rights Reserved 11 STORES.jpのフロントエンド特徴② STORES.jp以外にも多くのPJTが存在 STORES.jp セレクトシ ョップ サービス ページ 他サービス 新規事業 新規事業
12. 2019 STORES.jp, Inc., All Rights Reserved 12 STORES.jpのフロントエンド特徴③ 様々なPJTが並走で進行
13. 2019 STORES.jp, Inc., All Rights Reserved 13 人が足りない...
14. 2019 STORES.jp, Inc., All Rights Reserved 14 フロントエンド困ったこと 1PJT1~2人 散りぢりになる
15. 2019 STORES.jp, Inc., All Rights Reserved 15 フロントエンド避けたいこと 情報共有できず、同じ(or 微妙に違う)ものを作成 できた！ 作った！ どや！ 完成！
16. 2019 STORES.jp, Inc., All Rights Reserved 16 フロントエンド避けたいこと できた！ 作った！ どや！ 完成！ 情報共有できず、同じ(or 微妙に違う)ものを作成
17. 2019 STORES.jp, Inc., All Rights Reserved 17
18. 2019 STORES.jp, Inc., All Rights Reserved 18 デザイナーチームによるガイドライン作成 Zeplin上に絶対的指針(神)を作成
19. 2019 STORES.jp, Inc., All Rights Reserved 19 Storybook v5上に共通コンポーネント作成 使用手順, UIの認識共有 仕様書も一元管理
20. 2019 STORES.jp, Inc., All Rights Reserved 20 ガイドラインに即した共通基盤 Loading FileUploader Alert InputNumber
21. 2019 STORES.jp, Inc., All Rights Reserved 21 reg-suitを用いた画像差分テスト Visual Regression Testing PR時に画像の差分を自動チェック 意図していないスタイル崩れを発見できる
22. 2019 STORES.jp, Inc., All Rights Reserved 22 ふりかえり • 被らない、間違わない！安心の意思決定！ • デザイナーとの認識合わせにもなる • 共通基盤が整うほど開発速度UP !! • 整うまでが大変 • アクションをどこまで汎用的にするか
23. 2019 STORES.jp, Inc., All Rights Reserved 23 今日お話ししたいこと 入社3ヶ月間で関わった アイテム編集ページNuxt.js移行での • 共通基盤(コンポーネント) • コンポーネント設計 • ストア設計
24. 2019 STORES.jp, Inc., All Rights Reserved 24 コンポーネント設計の王道といえば... Atomic Design
25. 2019 STORES.jp, Inc., All Rights Reserved 25 Atomic Designの避けたいこと 粒度の肌感に 個人差 Organisms? Atom? Atom? Atom?
26. 2019 STORES.jp, Inc., All Rights Reserved 26 明確な名前付け 例① Form Field Input Icons 大きな粒度は明確な 名付けをする Page Form Field Input etc 小さな粒度は 共通コンポーネント 以外作らない
27. 2019 STORES.jp, Inc., All Rights Reserved 27 明確な名前付け 例② Form Field フォーム全体 Page Form Field 共通基盤 Block Block 一つの区画 1つの情報 詳細情報/UI レイアウト
28. 2019 STORES.jp, Inc., All Rights Reserved 28 それぞれの役割 Page Form Field 共通基盤 Block ・・・ ルーティング/外部通信 ・・・ 画面全体デザイン/store更新 ・・・ 1つにまとまる情報群の表示/管理 ・・・ 一意的な情報の表示/管理 ・・・ デザイン/アクションの統一
29. 2019 STORES.jp, Inc., All Rights Reserved 29 ふりかえり • 新規メンバーが迷わずJOINできる • 足りないパーツは共通基盤で、というルール化 • どのPJTも統一でき、Issueの粒度も等しくなる • PJTリポジトリ、共通基盤を往復する改修
30. 2019 STORES.jp, Inc., All Rights Reserved 30 今日お話ししたいこと 入社3ヶ月間で関わった アイテム編集ページNuxt.js移行での • 共通基盤(コンポーネント) • コンポーネント設計 • ストア設計
31. 2019 STORES.jp, Inc., All Rights Reserved 31 Vuexの避けたいところ① • Store使いたい放題問題 表示用/更新用Componentsで 分けたい Page Form Field Input etc ダメ、絶対 Store
32. 2019 STORES.jp, Inc., All Rights Reserved 32 Vuexの避けたいところ② • ルール厳しすぎる問題 バケツリレーは開発しづらい Page Form Field Input etc ちょっと辛い Store
33. 2019 STORES.jp, Inc., All Rights Reserved 33 やってみよう① • Storeを細分化し責務を分ける 親： 外部通信、全体集約 子： 各Fieldデータの保持 親 Store 子 Store 子 Store 子 Store Field Field Field
34. 2019 STORES.jp, Inc., All Rights Reserved 34 やってみよう② • Presentationalコンポーネント (表示用) 必要なdataはpropsでもらう • Containerコンポーネント Storeとのやりとり専門 ViewはPresentationalコンポーネントのみで構成 表示/データ通信でComponentを分ける
35. 2019 STORES.jp, Inc., All Rights Reserved 35 親 / 子 Storeが存在 Page Form Field Input etc 親 Store 子 Store データの流れ Form Field Input Icons
36. 2019 STORES.jp, Inc., All Rights Reserved 36 storeはFormとFieldから取得 Form Field Input Icons Form Field Input etc 親 Store 子 Store Page asyncで初期化 初期化 state取得
37. 2019 STORES.jp, Inc., All Rights Reserved 37 親は設定関連、子StoreはFieldに対し責務を持つ Form Container 親 Store Form Field Field Field 子 Store 子 Store 子 Store field data 設定情報のみ保持 特定Field情報 のみ保持 データの取得フロー field data field data config data
38. 2019 STORES.jp, Inc., All Rights Reserved 38 更新時、子Storeでバリデーション、エラー保持 Form Container 親 Store Form Field Field Field 子 Store 子 Store 子 Store 各Fieldでデータ更新、 バリデーション データの更新フロー config data field data error field data error field data error
39. 2019 STORES.jp, Inc., All Rights Reserved 39 親Storeはdata集約、外部通信の責務を持つ Form Container 親 Store Form Field Field Field 子 Store 子 Store 子 Store 全data集約、 errorがなければPOST データの保存フロー field data error field data error
40. 2019 STORES.jp, Inc., All Rights Reserved 40 ふりかえり • 責務が明白でレビューもしやすい • 考える内容が減り、開発がしやすい • ファイル数が多い • テストでのprops漏れによるWarning多発 → テストのutilsほしい
41. 2019 STORES.jp, Inc., All Rights Reserved 41 その他 3ヶ月の感想
42. 2019 STORES.jp, Inc., All Rights Reserved 42 Docめちゃくちゃある tag: UI改善チーム 211件
43. 2019 STORES.jp, Inc., All Rights Reserved 43 今後について まだまだ移行は続いてく To Be Continued ... - 共通ロジックの整備 (自動生成) - ガイドラインの拡張/整備 - サーバ/デザイナー連携強化 - TS化 ? E2Eテスト ?
44. 2019 STORES.jp, Inc., All Rights Reserved 44 note書きました STORES.jp(hey)に入社して3ヶ月がたちました heyの制度や文化について