Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

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

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

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

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

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

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

© RakSul,Inc. All Rights Reserved. FrontendNight 実践 Vue x Storybook 仕組みを変えれば、 世界はもっと良くなる Our Vision