Storybookを使って安心しながら開発を進める_ラクスルテレビCMオンラインストア開発

by Fuya

Slide 1

Slide 1 text

Slide 2

Slide 2 text

Slide 3

Slide 3 text

Slide 4

Slide 4 text

Slide 5

Slide 5 text

Slide 6

Slide 6 text

Slide 7

Slide 7 text

Slide 8

Slide 8 text

Slide 9

Slide 9 text

Slide 10

Slide 10 text

Slide 11

Slide 11 text

© RakSul,Inc. All Rights Reserved. FrontendNight 実践 Vue x Storybook ● リリースしたい時期がある程度決まっている ● メンバーのうちフロントエンジニアは2名 ● 開発初期時点では、価格・番組の本番データは無い ○ ある程度見切りで作り始める ○ プロトタイプの作成・技術検証も同時にやる ● 番組表UIとカート、申込機能を作るオンラインストアを作ろう！要求は...

Slide 12

Slide 12 text

Slide 13

Slide 13 text

© RakSul,Inc. All Rights Reserved. FrontendNight 実践 Vue x Storybook ● 番組表・カートなどは既に概念があり、作りやすい ○ 要件を詰めず、モックを見せながら進められそう ● 業界知識が開発チームに無く、仕様変更が必至 ● サービスが当たるかどうかわからない、仕様変更が必至 ● 本番データが揃っていない、仕様変更が... ● なんとなく進めたら確実に炎上！変更に臨機応変に対応するため速度を出そう！要求を整理して技術選定の基本方針をたてる

Slide 14

Slide 14 text

Slide 15

Slide 15 text

© RakSul,Inc. All Rights Reserved. FrontendNight 実践 Vue x Storybook ● 既存のレールに乗る ○ Vue.js の中でも規約があるNuxt.jsを利用 ○ コンポーネントの粒度は Atomic design を意識 ● 人間は本質に集中する ● 怪しいポイントには規約を作る ● 実装物のリスクを考えて対策を打つ速度を出すために基本方針を定めた

Slide 16

Slide 16 text

© RakSul,Inc. All Rights Reserved. FrontendNight 実践 Vue x Storybook ● Vue.js のフレームワーク ○ Router, Store, SSR, webpack などを含む ○ ディレクトリ構成のレールがある ■ エンジニア間で共通認識を持てる ○ いざとなったら取り外せそう既存のレールに乗る Nuxt.js を利用当時はこちらのロゴ。 v1を使用 https://nuxtjs.org/

Slide 17

Slide 17 text

© RakSul,Inc. All Rights Reserved. FrontendNight 実践 Vue x Storybook ● 粒度の認識合わせ会を実施 ○ ポンチ絵を元に認識合わせ ○ エンジニア間の認識を揃えた ● 自分が思っているレールと他人が思っているレールをすり合わせるのはとても大事既存のレールに乗る Atomic Design を意識プロジェクタで、ホワイトボードにモックの画像を移しながらエンジニアで粒度の認識を合わせている写真がありました。 (非公開)

Slide 18

Slide 18 text

© RakSul,Inc. All Rights Reserved. FrontendNight 実践 Vue x Storybook ● 既存のレールに乗る ● 人間は本質に集中する ○ lint formatterは初めに導入 ○ TypeScriptの導入を考える ○ css modulesを使ってクラス名を考えずに済ませる ● 怪しいポイントには規約を作る ● 実装物のリスクを考えて対策を打つ速度を出すために基本方針を定めた

Slide 19

Slide 19 text

© RakSul,Inc. All Rights Reserved. FrontendNight 実践 Vue x Storybook ● prettier, eslint, stylelint などを使う ● CIを使って、lintが通らないものはmergeさせない ○ 書き方によるレビューの往復をさせない ● エディタの自動修正を設定しておく ○ そもそも書き方を意識させない人間は本質に集中する lint formatter を入れる

Slide 20

Slide 20 text

© RakSul,Inc. All Rights Reserved. FrontendNight 実践 Vue x Storybook ● 型というドキュメントが定義される ● 型があれば変更に強くなる ● 今回は見送りした ○ Nuxt + TypeScript に慣れていない ○ 周辺ツールの導入・管理コストを積みたくなかった ○ Nuxt 2.4 が出た今だったら導入したかもしれない人間は本質に集中する TypeScriptの導入を考える

Slide 21

Slide 21 text

Slide 22

Slide 22 text

Slide 23

Slide 23 text

© RakSul,Inc. All Rights Reserved. FrontendNight 実践 Vue x Storybook 怪しいポイント = コンポーネントに閉じないであろう箇所 ● 色の定数これを使う ● z-indexはこれで管理する ● store はこの方法で接続する等々、これらの認識を合わせる前提としてはコンポーネントに閉じる事が大事怪しいポイントには規約をつくる最低限のルールだけ決める

Slide 24

Slide 24 text

Slide 25

Slide 25 text

Slide 26

Slide 26 text

Slide 27

Slide 27 text

© RakSul,Inc. All Rights Reserved. FrontendNight 実践 Vue x Storybook ● 複雑な処理をしている箇所は、関数にしてテストを書く ○ テストが書けない場合、関数が仕事しすぎ ○ それぞれの関数の責任が分かれる ● 境界値の振る舞いなどもカバーできる ○ テストを書くことで考慮漏れを減らせる Storeのビジネスロジックのユニットテストを書く

Slide 28

Slide 28 text

Slide 29

Slide 29 text

© RakSul,Inc. All Rights Reserved. FrontendNight 実践 Vue x Storybook ● すべてのコンポーネントに対してエッジケースを書く ○ 時刻のComponentであれば、8時、11時、25時など考えられるパターンを書いておく ● デザインカンプではエッジケースの漏れは多い ○ 結合してから「想定していませんでいた」を減らす Storybookを書く

Slide 30

Slide 30 text

© RakSul,Inc. All Rights Reserved. FrontendNight 実践 Vue x Storybook ● こんなカンプが来たらデザイナーに何か聞く? ○ 100万円以上の商品は? ○ 長い番組名は? ○ 番組放送時間が短かったら? ● デザイナーとのコミュニケーション大切 ○ カンプで全パターン網羅は不毛 ○ ただ、動かしてみて分かる事もある ○ Storybookで再現しようデザインカンプではエッジケースの漏れは多い

Slide 31

Slide 31 text

Slide 32

Slide 32 text

© RakSul,Inc. All Rights Reserved. FrontendNight 実践 Vue x Storybook ● @storybook/addon-storyshots を使う ○ Storyがテストのケースになる ○ Storyの実行結果のHTMLをGitで管理するイメージ ■ Storybookでエッジケースを試すほど、精度が上がる ○ 末端の実装修正による影響範囲が分かるスナップショットテストを書く

Slide 33

Slide 33 text

© RakSul,Inc. All Rights Reserved. FrontendNight 実践 Vue x Storybook exports[`Storyshots Atoms/PriceText CM枠の価格 1`] = ` ¥1,000 `; exports[`Storyshots Atoms/PriceText CM枠の価格桁区切り 1`] = ` ¥1,234,567 `; スナップショットテスト

Slide 34

Slide 34 text

© RakSul,Inc. All Rights Reserved. FrontendNight 実践 Vue x Storybook exports[`Storyshots Atoms/PriceText CM枠の価格 1`] = ` - ¥1,000 + $1,000 `; exports[`Storyshots Atoms/PriceText CM枠の価格桁区切り 1`] = ` - ¥1,234,567 + $1,234,567 `; ￥を＄に変更してみる

Slide 35

Slide 35 text

© RakSul,Inc. All Rights Reserved. FrontendNight 実践 Vue x Storybook 影響するコンポーネント一覧がわかる $ git status modified: components/Atoms/PriceText/__snapshots__/index.stories.storyshot modified: components/Molecules/CartItem/__snapshots__/index.stories.storyshot modified: components/Molecules/OrderItem/__snapshots__/index.stories.storyshot modified: components/Molecules/OrderTotalPrice/__snapshots__/index.stories.storyshot modified: components/Molecules/Program/__snapshots__/index.stories.storyshot …… ● 影響範囲をGitで管理できる ● 想定外の影響がないか、レビューを通せる

Slide 36

Slide 36 text

Slide 37

Slide 37 text

© RakSul,Inc. All Rights Reserved. FrontendNight 実践 Vue x Storybook ● e2eはデグレ検知に効果が高い方法の1つ ○ しかし記述・メンテコストが高い ○ 仕様変更との戦いになる今回は... 複数ページにまたがる仕様の変化が予想された人数的にもスピード的にも面倒を見るのは当初は断念したリリースのときの安心感を無くすという負債を積むこととしたコストの高いe2eを書くのか

Slide 38

Slide 38 text

Slide 39

Slide 39 text

© RakSul,Inc. All Rights Reserved. FrontendNight 実践 Vue x Storybook ● 何がリスクかを想定する。対応しないのもまた対応 ○ 技術力・知識は対応手段の選択肢を増やす ○ 想定した選択の精度をあげる必要がある ● 負債を積まずに高速な開発はできません ○ 何を負債とするか取捨選択が大事 ○ 負債は把握して、返せるものだけ借りましょう過不足のない選定が大事