Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

daitasu

October 24, 2019
Tweet

More Decks by daitasu

Other Decks in Programming

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

    View full-size slide

  2. 2019 STORES.jp, Inc., All Rights Reserved
    2
    2
    自己紹介
    Like: Vue, React Native, Mongo
    2
    Job: Frontend-Engineer
    Community: YOUTH TECH
    藤井 大祐
    @daitasu

    View full-size slide

  3. 2019 STORES.jp, Inc., All Rights Reserved
    3
    本日のテーマ
    Nuxt.js 移行における
    未来を見据えたコンポーネント設計
    STORES.jp入社3ヶ月で気づいたこと

    View full-size slide

  4. 2019 STORES.jp, Inc., All Rights Reserved
    4
    今日お話ししたいこと
    入社3ヶ月間で関わった
    アイテム編集ページNuxt.js移行での
    ● 共通基盤(コンポーネント)
    ● コンポーネント設計
    ● ストア設計

    View full-size slide

  5. 2019 STORES.jp, Inc., All Rights Reserved
    5
    STORES.jpでできること
    誰でも簡単に、本格的なネットショップを作成できる

    View full-size slide

  6. 2019 STORES.jp, Inc., All Rights Reserved
    6
    STORES.jpでできること
    顧客管理
    アイテム編集
    倉庫サービス
    お問い合わせ
    メルマガ
    クーポン
    ストアデザイン
    売上管理
    注文一覧
    アクセス解析

    View full-size slide

  7. 2019 STORES.jp, Inc., All Rights Reserved
    7
    アイテム編集ページNuxt.js移行
    商品の登録・編集
    を行うコア機能
    Nuxt.jsに移行。別repo構成へ。

    View full-size slide

  8. 2019 STORES.jp, Inc., All Rights Reserved
    8
    今日お話ししたいこと
    入社3ヶ月間で関わった
    アイテム編集ページNuxt.js移行での
    ● 共通基盤(コンポーネント)
    ● コンポーネント設計
    ● ストア設計

    View full-size slide

  9. 2019 STORES.jp, Inc., All Rights Reserved
    9
    今日お話ししたいこと
    入社3ヶ月間で関わった
    アイテム編集ページNuxt.js移行での
    ● 共通基盤(コンポーネント)
    ● コンポーネント設計
    ● ストア設計

    View full-size slide

  10. 2019 STORES.jp, Inc., All Rights Reserved
    10
    STORES.jpのフロントエンド特徴①
    2018年4月
    1名
    2019年10月
    9名
    社員
    業務委託
    社員
    9倍
    成長
    発足してまだ1年。出来立てほやほや。

    View full-size slide

  11. 2019 STORES.jp, Inc., All Rights Reserved
    11
    STORES.jpのフロントエンド特徴②
    STORES.jp以外にも多くのPJTが存在
    STORES.jp
    セレクトシ
    ョップ
    サービス
    ページ
    他サービス
    新規事業
    新規事業

    View full-size slide

  12. 2019 STORES.jp, Inc., All Rights Reserved
    12
    STORES.jpのフロントエンド特徴③
    様々なPJTが並走で進行

    View full-size slide

  13. 2019 STORES.jp, Inc., All Rights Reserved
    13
    人が足りない...

    View full-size slide

  14. 2019 STORES.jp, Inc., All Rights Reserved
    14
    フロントエンド困ったこと
    1PJT1~2人 散りぢりになる

    View full-size slide

  15. 2019 STORES.jp, Inc., All Rights Reserved
    15
    フロントエンド避けたいこと
    情報共有できず、同じ(or 微妙に違う)ものを作成
    できた! 作った! どや! 完成!

    View full-size slide

  16. 2019 STORES.jp, Inc., All Rights Reserved
    16
    フロントエンド避けたいこと
    できた! 作った! どや! 完成!
    情報共有できず、同じ(or 微妙に違う)ものを作成

    View full-size slide

  17. 2019 STORES.jp, Inc., All Rights Reserved
    17

    View full-size slide

  18. 2019 STORES.jp, Inc., All Rights Reserved
    18
    デザイナーチームによるガイドライン作成
    Zeplin上に絶対的指針(神)を作成

    View full-size slide

  19. 2019 STORES.jp, Inc., All Rights Reserved
    19
    Storybook v5上に共通コンポーネント作成
    使用手順, UIの認識共有 仕様書も一元管理

    View full-size slide

  20. 2019 STORES.jp, Inc., All Rights Reserved
    20
    ガイドラインに即した共通基盤
    Loading FileUploader
    Alert
    InputNumber

    View full-size slide

  21. 2019 STORES.jp, Inc., All Rights Reserved
    21
    reg-suitを用いた画像差分テスト
    Visual Regression Testing
    PR時に画像の差分を自動チェック
    意図していないスタイル崩れを発見できる

    View full-size slide

  22. 2019 STORES.jp, Inc., All Rights Reserved
    22
    ふりかえり
    ● 被らない、間違わない!安心の意思決定!
    ● デザイナーとの認識合わせにもなる
    ● 共通基盤が整うほど開発速度UP !!
    ● 整うまでが大変
    ● アクションをどこまで汎用的にするか

    View full-size slide

  23. 2019 STORES.jp, Inc., All Rights Reserved
    23
    今日お話ししたいこと
    入社3ヶ月間で関わった
    アイテム編集ページNuxt.js移行での
    ● 共通基盤(コンポーネント)
    ● コンポーネント設計
    ● ストア設計

    View full-size slide

  24. 2019 STORES.jp, Inc., All Rights Reserved
    24
    コンポーネント設計の王道といえば...
    Atomic Design

    View full-size slide

  25. 2019 STORES.jp, Inc., All Rights Reserved
    25
    Atomic Designの避けたいこと
    粒度の肌感に
    個人差
    Organisms?
    Atom?
    Atom?
    Atom?

    View full-size slide

  26. 2019 STORES.jp, Inc., All Rights Reserved
    26
    明確な名前付け 例①
    Form
    Field
    Input
    Icons
    大きな粒度は明確な
    名付けをする
    Page
    Form
    Field
    Input
    etc
    小さな粒度は
    共通コンポーネント
    以外作らない

    View full-size slide

  27. 2019 STORES.jp, Inc., All Rights Reserved
    27
    明確な名前付け 例②
    Form
    Field
    フォーム全体
    Page
    Form
    Field
    共通基盤
    Block
    Block
    一つの区画
    1つの情報
    詳細情報/UI
    レイアウト

    View full-size slide

  28. 2019 STORES.jp, Inc., All Rights Reserved
    28
    それぞれの役割
    Page
    Form
    Field
    共通基盤
    Block
    ・・・ ルーティング/外部通信
    ・・・ 画面全体デザイン/store更新
    ・・・ 1つにまとまる情報群の表示/管理
    ・・・ 一意的な情報の表示/管理
    ・・・ デザイン/アクションの統一

    View full-size slide

  29. 2019 STORES.jp, Inc., All Rights Reserved
    29
    ふりかえり
    ● 新規メンバーが迷わずJOINできる
    ● 足りないパーツは共通基盤で、というルール化
    ● どのPJTも統一でき、Issueの粒度も等しくなる
    ● PJTリポジトリ、共通基盤を往復する改修

    View full-size slide

  30. 2019 STORES.jp, Inc., All Rights Reserved
    30
    今日お話ししたいこと
    入社3ヶ月間で関わった
    アイテム編集ページNuxt.js移行での
    ● 共通基盤(コンポーネント)
    ● コンポーネント設計
    ● ストア設計

    View full-size slide

  31. 2019 STORES.jp, Inc., All Rights Reserved
    31
    Vuexの避けたいところ①
    ● Store使いたい放題問題
    表示用/更新用Componentsで
    分けたい
    Page
    Form
    Field
    Input
    etc
    ダメ、絶対
    Store

    View full-size slide

  32. 2019 STORES.jp, Inc., All Rights Reserved
    32
    Vuexの避けたいところ②
    ● ルール厳しすぎる問題
    バケツリレーは開発しづらい
    Page
    Form
    Field
    Input
    etc
    ちょっと辛い
    Store

    View full-size slide

  33. 2019 STORES.jp, Inc., All Rights Reserved
    33
    やってみよう①
    ● Storeを細分化し責務を分ける
    親: 外部通信、全体集約
    子: 各Fieldデータの保持

    Store

    Store

    Store

    Store
    Field Field Field

    View full-size slide

  34. 2019 STORES.jp, Inc., All Rights Reserved
    34
    やってみよう②
    ● Presentationalコンポーネント
    (表示用) 必要なdataはpropsでもらう
    ● Containerコンポーネント
    Storeとのやりとり専門
    ViewはPresentationalコンポーネントのみで構成
    表示/データ通信でComponentを分ける

    View full-size slide

  35. 2019 STORES.jp, Inc., All Rights Reserved
    35
    親 / 子 Storeが存在
    Page
    Form
    Field
    Input
    etc
    親 Store
    子 Store
    データの流れ
    Form
    Field
    Input
    Icons

    View full-size slide

  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取得

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  40. 2019 STORES.jp, Inc., All Rights Reserved
    40
    ふりかえり
    ● 責務が明白でレビューもしやすい
    ● 考える内容が減り、開発がしやすい
    ● ファイル数が多い
    ● テストでのprops漏れによるWarning多発
    → テストのutilsほしい

    View full-size slide

  41. 2019 STORES.jp, Inc., All Rights Reserved
    41
    その他 3ヶ月の感想

    View full-size slide

  42. 2019 STORES.jp, Inc., All Rights Reserved
    42
    Docめちゃくちゃある
    tag: UI改善チーム
    211件

    View full-size slide

  43. 2019 STORES.jp, Inc., All Rights Reserved
    43
    今後について
    まだまだ移行は続いてく
    To Be Continued ...
    - 共通ロジックの整備 (自動生成)
    - ガイドラインの拡張/整備
    - サーバ/デザイナー連携強化
    - TS化 ? E2Eテスト ?

    View full-size slide

  44. 2019 STORES.jp, Inc., All Rights Reserved
    44
    note書きました
    STORES.jp(hey)に入社して3ヶ月がたちました
    heyの制度や文化について

    View full-size slide