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