Vue.js v-tokyo Meetup #10に行ってきました

オープニング

Vue Fes Japan 2019チケット発売中ダヨ！

DMM GAMES VenturesをNuxtでリニューアルした話

• DMM Games VenturesをNuxt + Typescript で構成
• Headless CMSも検討したが断念(メンテナンスコスト増加が懸念された)
  例：WP APIを使っても問題点がどこに依存するかスキルを問われる
• vue-property-decoratorを使ってるらしい(Nuxtならnuxt-property-decoratorを使わなかったのはなぜだろうか？)
• 環境構築(Webpackとか)の工数削減
• UIのコンポーネント化での調整コスト削減
• scoped 指定でCSSカプセル化が便利だった

処理の共通化とコンポーネントの分割/分類/粒度について

スライド

• 処理の共通化
  • コンポーネントのmixin
    • 簡単に共通化できるけどデメリットが多い
      • 見通しが悪くなる
      • 超便利mixinみたいな大きなものができがち
      • どこで使われているか把握が難しく、変更時の影響範囲が読みづらい
    • $routerなどthisに生えるのが仕方ないものを共通化する目的なら許容できるかな？くらい
      • mixinだけに限らずthisに何か生やすのは基本よくない
      • 便利(簡単)な一方コードの見通しと変更しやすさを犠牲にしてしまう
  • storeのgetters(storeのstateを都合いい感じに整形して使える)
    • storeはapiの値をそのままstateで保持して各ページコンポーネントで整形する
      • 特定のコンポーネントと1:1になるようなgettersができてしまうから
      • gettersに処理があるせいでstoreを介さないと使えないコンポーネントが存在してしまうから
      • ページAでは使うけどページBでは使わないgettersが存在してしまうから
    • 関数を外に出そう。使いまわしの都合がよくなる
      • mixinでthisに生やす意味もgetters事態に整形処理をもたせる必要もない
      • helperとかtransformerとか用途ごとに名前をつけてディレクトリを切っておくと取り回しやすい
        • ファイルが多くなるとimportめんどくない？
          • めんどくささから逃げた先は別のめんどくささ
          • 片付けがめんどくて引き出しに全部ぶちこんだ状態は健全ではない
• コンポーネントの分割/分類/粒度
  • 優れた分類方法の要素
    • 迷わず分類できる
    • 複数人の間で共通認識として機能する
      • 共通認識できる指標を定める
      • 機能するなら指標はなんでもいい
      • 関係する人たちの間でだけ通じればよい
    • 開発体験を損なわない
      • 正しく分類されてるけど細かすぎて使いづらい
      • 特定のコンポーネントでしか絶対使わないのに分類上別のディレクトリにあってしんどい
      • 変更するときも考慮されてる？(ぼくはこれを捨てやすさと呼んでいる)
  • Atomic Designがもたらした分類は価値がある一方、与えた混乱も大きい
    • ボタンで迷ったことはありませんか？
      • Atomic Designを再定義、追加しなければ人の数だけ捉え方が違うので共通認識として機能しない
      • 誰かが考えた分類がぼくらにとっての最良の分類である可能性は低い
        • 最良の分類方法の模索をやめてはいけない。考えよう

なぜから始める、現場のVue.jsアプリの自動テスト

スライド

• テストを書く理由
  • 人に依存せずに繰り返し動作検証をするため
    • テストを書く
    • CIを整備する
  • 生きた仕様書(挙動・見た目)がほしいため
    • BDDのように、テストケースで要求仕様を言語化する
    • VRT(Visual Regression Testing)を導入する
• The Testing Trophy
  • Static
    • ESLint・静的解析を使ってtypoや型チェック
  • Unit
    • Store, Validation rules, Filters
  • Integration
    • SFCの動作
      • フォーム入力→バリデーション→結果検証
    • VRT
      • Props, Storeからデータを受け取る→コンポーネントの表示
  • E2E
    • アプリケーションを動かして、シナリオ通りに動作するかチェック

Vuex Appをあらゆる場所で簡単に動かす方法

スライド

• テスト時のStorybook上で気軽にmountしたい
  • inversifyJSというDIライブラリを使う
  • 他にもnest.jsっていうのもあるぽい

レガシーでウォーターフォールなVue.jsでの大規模開発に捧げるテスト駆動フロントエンド開発の話

スライド

• vue-testing-library
  • コンポーネントが結合された実際の表示画面に近い環境でテストできるので、結合時のバグを見つけやすい
  • react-testing-library