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

38b31e2f4877c8216969f152e4fb11d9?s=47 Fuya
February 20, 2019

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

https://raksul.connpass.com/event/115120/ のイベントで発表した内容です。

一部のデモを画像に置き換えている版です。

口頭補足していた箇所が多いですがそちらは反映されていません、近い内に記事を書きます。

38b31e2f4877c8216969f152e4fb11d9?s=128

Fuya

February 20, 2019
Tweet

Transcript

  1. © RakSul,Inc. All Rights Reserved. FrontendNight 実践 Vue x Storybook

    Storybookを使って安心しながら開発を進める ~ ラクスルTVCMオンラインストア開発 ~ ラクスル株式会社 古谷文弥 2019年2月20日 ラクスル×KCF FrontendNight 実践 Vue x Storybook
  2. © RakSul,Inc. All Rights Reserved. FrontendNight 実践 Vue x Storybook

    自己紹介 Fumiya FURUYA (@_fuya) • 前職ではHTML5ゲームプラットフォームの開 発 • 2018年8月中途入社 • フロントエンドミートアップ Meguro.es 運営 • 実家がいちご農家 Web Front-end Engineer
  3. © RakSul,Inc. All Rights Reserved. FrontendNight 実践 Vue x Storybook

    • 会社・事業紹介 • TVCMオンラインストアについて • 期間内で安心してリリースする技術選定の話 • まとめ 本日話すこと
  4. © RakSul,Inc. All Rights Reserved. FrontendNight 実践 Vue x Storybook

    会社・事業紹介
  5. © RakSul,Inc. All Rights Reserved. FrontendNight 実践 Vue x Storybook

    「仕組みを変えれば、     世界はもっと良くなる」 VISION Better System, Better World
  6. © RakSul,Inc. All Rights Reserved. FrontendNight 実践 Vue x Storybook

    ラクスルの事業意義は産業の在り方をトランスフォーメーションすること Mission
  7. © RakSul,Inc. All Rights Reserved. FrontendNight 実践 Vue x Storybook

    伝統的で巨大なBtoBの業界のデジタル化を推進する Mission
  8. © RakSul,Inc. All Rights Reserved. FrontendNight 実践 Vue x Storybook

    TVCMオンラインストアについて 1枠で買えるオンラインストア
  9. © RakSul,Inc. All Rights Reserved. FrontendNight 実践 Vue x Storybook

    • あのテレビ局のCMの放映が15秒10万円〜!? • 詳しくはこちらのサイトを御覧ください ◦ https://tvcm.raksul.com/store TVCMオンラインストアとは
  10. © RakSul,Inc. All Rights Reserved. FrontendNight 実践 Vue x Storybook

    ※ 番組名、価格はサンプルです。発表時点のものです。
  11. © RakSul,Inc. All Rights Reserved. FrontendNight 実践 Vue x Storybook

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

    短期間で安心してリリースする為の 技術選定 期間・安心を考えて過不足のない選定をする
  13. © RakSul,Inc. All Rights Reserved. FrontendNight 実践 Vue x Storybook

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

    • 既存のレールに乗る • 人間は本質に集中する • 怪しいポイントには規約を作る • リスクを考えて対策を打つ 速度を出すために基本方針を定めた
  15. © RakSul,Inc. All Rights Reserved. FrontendNight 実践 Vue x Storybook

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

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

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

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

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

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

    人間は本質に集中する CSS Modules を入れる <template> <span :class="$style.monthUnit">月</span> </template> <style lang="scss" module> .month-unit { font-size: $large-font-size; } </style> 開発環境 ファイル名 本番環境 ハッシュ値 元のクラス名
  22. © RakSul,Inc. All Rights Reserved. FrontendNight 実践 Vue x Storybook

    • 既存のレールに乗る • 人間は本質に集中する • 怪しいポイントには規約を作る ◦ z-index, color, @mixin を使う温度感を決める • 実装物のリスクを考えて対策を打つ 速度を出すために基本方針を定めた
  23. © RakSul,Inc. All Rights Reserved. FrontendNight 実践 Vue x Storybook

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

    • 既存のレールに乗る • 人間は本質に集中する • 怪しいポイントには規約を作る • 実装物のリスクを考えて対策を打つ ◦ 何が怖いかを考えてどんな対策をするか、しないか 速度を出すために基本方針を定めた
  25. © RakSul,Inc. All Rights Reserved. FrontendNight 実践 Vue x Storybook

    ところで、一番のリスクってなんだろうか そもそもロジックのミス 通しで動いているか不安 エッジケースのUI ロジックの考慮漏れ 仕様変更でどこに影響があったかわからない
  26. © RakSul,Inc. All Rights Reserved. FrontendNight 実践 Vue x Storybook

    ところで、一番のリスクってなんだろうか そもそもロジックのミス 通しで動いているか不安 エッジケースのUI ロジックの考慮漏れ 仕様変更でどこに影響があったかわからない Storybook ユニットテスト e2e テスト スナップショットテスト
  27. © RakSul,Inc. All Rights Reserved. FrontendNight 実践 Vue x Storybook

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

    ところで、一番のリスクってなんだろうか そもそもロジックのミス 通しで動いているか不安 エッジケースのUI ロジックの考慮漏れ 仕様変更でどこに影響があったかわからない Storybook ユニットテスト e2e テスト スナップショットテスト
  29. © RakSul,Inc. All Rights Reserved. FrontendNight 実践 Vue x Storybook

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

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

    ところで、一番のリスクってなんだろうか そもそもロジックのミス 通しで動いているか不安 エッジケースのUI ロジックの考慮漏れ 仕様変更でどこに影響があったかわからない Storybook ユニットテスト e2e テスト スナップショットテスト
  32. © RakSul,Inc. All Rights Reserved. FrontendNight 実践 Vue x Storybook

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

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

    exports[`Storyshots Atoms/PriceText CM枠の価格 1`] = ` <span class="mock--price mock--large" > - ¥1,000 + $1,000 </span> `; exports[`Storyshots Atoms/PriceText CM枠の価格 桁区切り 1`] = ` <span class="mock--price mock--large" > - ¥1,234,567 + $1,234,567 </span> `; ¥を$に変更してみる
  35. © 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で管理できる • 想定外の影響がないか、レビューを通せる
  36. © RakSul,Inc. All Rights Reserved. FrontendNight 実践 Vue x Storybook

    ところで、一番のリスクってなんだろうか そもそもロジックのミス 通しで動いているか不安 エッジケースのUI ロジックの考慮漏れ 仕様変更でどこに影響があったかわからない Storybook ユニットテスト e2e テスト スナップショットテスト
  37. © RakSul,Inc. All Rights Reserved. FrontendNight 実践 Vue x Storybook

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

    まとめ
  39. © RakSul,Inc. All Rights Reserved. FrontendNight 実践 Vue x Storybook

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

  41. © RakSul,Inc. All Rights Reserved. FrontendNight 実践 Vue x Storybook

    仕組みを変えれば、 世界はもっと良くなる Our Vision