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

8875e86a57aad1f0f716374bcb6507c7?s=47 daitasu
October 24, 2019

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でのコンポーネント設計について発表しました。

8875e86a57aad1f0f716374bcb6507c7?s=128

daitasu

October 24, 2019
Tweet

Transcript

  1. 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. 2.

    2019 STORES.jp, Inc., All Rights Reserved 2 2 自己紹介 Like:

    Vue, React Native, Mongo 2 Job: Frontend-Engineer Community: YOUTH TECH 藤井 大祐 @daitasu
  3. 3.

    2019 STORES.jp, Inc., All Rights Reserved 3 本日のテーマ Nuxt.js 移行における

    未来を見据えたコンポーネント設計 STORES.jp入社3ヶ月で気づいたこと
  4. 6.

    2019 STORES.jp, Inc., All Rights Reserved 6 STORES.jpでできること 顧客管理 アイテム編集

    倉庫サービス お問い合わせ メルマガ クーポン ストアデザイン 売上管理 注文一覧 アクセス解析
  5. 10.

    2019 STORES.jp, Inc., All Rights Reserved 10 STORES.jpのフロントエンド特徴① 2018年4月 1名

    2019年10月 9名 社員 業務委託 社員 9倍 成長 発足してまだ1年。出来立てほやほや。
  6. 11.
  7. 16.

    2019 STORES.jp, Inc., All Rights Reserved 16 フロントエンド避けたいこと できた! 作った!

    どや! 完成! 情報共有できず、同じ(or 微妙に違う)ものを作成
  8. 21.

    2019 STORES.jp, Inc., All Rights Reserved 21 reg-suitを用いた画像差分テスト Visual Regression

    Testing PR時に画像の差分を自動チェック 意図していないスタイル崩れを発見できる
  9. 22.

    2019 STORES.jp, Inc., All Rights Reserved 22 ふりかえり • 被らない、間違わない!安心の意思決定!

    • デザイナーとの認識合わせにもなる • 共通基盤が整うほど開発速度UP !! • 整うまでが大変 • アクションをどこまで汎用的にするか
  10. 26.

    2019 STORES.jp, Inc., All Rights Reserved 26 明確な名前付け 例① Form

    Field Input Icons 大きな粒度は明確な 名付けをする Page Form Field Input etc 小さな粒度は 共通コンポーネント 以外作らない
  11. 27.

    2019 STORES.jp, Inc., All Rights Reserved 27 明確な名前付け 例② Form

    Field フォーム全体 Page Form Field 共通基盤 Block Block 一つの区画 1つの情報 詳細情報/UI レイアウト
  12. 28.

    2019 STORES.jp, Inc., All Rights Reserved 28 それぞれの役割 Page Form

    Field 共通基盤 Block ・・・ ルーティング/外部通信 ・・・ 画面全体デザイン/store更新 ・・・ 1つにまとまる情報群の表示/管理 ・・・ 一意的な情報の表示/管理 ・・・ デザイン/アクションの統一
  13. 29.

    2019 STORES.jp, Inc., All Rights Reserved 29 ふりかえり • 新規メンバーが迷わずJOINできる

    • 足りないパーツは共通基盤で、というルール化 • どのPJTも統一でき、Issueの粒度も等しくなる • PJTリポジトリ、共通基盤を往復する改修
  14. 31.

    2019 STORES.jp, Inc., All Rights Reserved 31 Vuexの避けたいところ① • Store使いたい放題問題

    表示用/更新用Componentsで 分けたい Page Form Field Input etc ダメ、絶対 Store
  15. 32.

    2019 STORES.jp, Inc., All Rights Reserved 32 Vuexの避けたいところ② • ルール厳しすぎる問題

    バケツリレーは開発しづらい Page Form Field Input etc ちょっと辛い Store
  16. 33.

    2019 STORES.jp, Inc., All Rights Reserved 33 やってみよう① • Storeを細分化し責務を分ける

    親: 外部通信、全体集約 子: 各Fieldデータの保持 親 Store 子 Store 子 Store 子 Store Field Field Field
  17. 34.

    2019 STORES.jp, Inc., All Rights Reserved 34 やってみよう② • Presentationalコンポーネント

    (表示用) 必要なdataはpropsでもらう • Containerコンポーネント Storeとのやりとり専門 ViewはPresentationalコンポーネントのみで構成 表示/データ通信でComponentを分ける
  18. 35.

    2019 STORES.jp, Inc., All Rights Reserved 35 親 / 子

    Storeが存在 Page Form Field Input etc 親 Store 子 Store データの流れ Form Field Input Icons
  19. 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取得
  20. 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
  21. 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
  22. 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
  23. 40.

    2019 STORES.jp, Inc., All Rights Reserved 40 ふりかえり • 責務が明白でレビューもしやすい

    • 考える内容が減り、開発がしやすい • ファイル数が多い • テストでのprops漏れによるWarning多発 → テストのutilsほしい
  24. 43.

    2019 STORES.jp, Inc., All Rights Reserved 43 今後について まだまだ移行は続いてく To

    Be Continued ... - 共通ロジックの整備 (自動生成) - ガイドラインの拡張/整備 - サーバ/デザイナー連携強化 - TS化 ? E2Eテスト ?