「後悔しないためのVueコンポーネント設計」を読みました

技術書典5で、悩める私を救ってくれると信じて購入した本です。

ponyhead.booth.pm

TOC

はじめに

本書は、筆者が業務および個人プロジェクトで得たVue.jsの知見を文書化したもの。

第1章 なぜテストを書くのか

「他人に迷惑をかけるコードを書きたくない」わかりが過ぎる…

第2章 テストしやすいコンポーネントと、テストしづらいコンポーネント

後悔しないためにはテストを書く、テストを書くためにテストしやすいコンポーネントを作る、そのためには下記を押さえようという話。

  • テストしやすいコンポーネント
    • 機能が少ない(メソッド数ではなく、担う役割)
    • 依存がない/少ない
    • 状態をもたない

依存は少なく

値を取り出すコンポーネントと値を表示するコンポーネントに分けることで、Storeに依存する場所をなるべく少なくする。

dataを使うパターン

コンポーネントに閉じた状態を表現するとき。トグルとか。

propsの型指定で避けたほうがいい型

  • Number
  • String
  • Array
  • Object
  • Boolean

上記はJSONで表現可能。それ以外の型(Dateなど)を使うと通信やデータストアで型変換が必要になりテストが複雑になるため、避けたほうがいい。

props down event up

  • 親から子へは props でデータを渡し、子から親へは this.$emit でイベントを返す。
  • 子からのイベントを購読するやり方か、propsでFunctionを渡すやり方かは、プロジェクトで統一されていればいい。

ライフサイクルフックに直接処理を書かない

  • vue-test-utilsではフックをmockできないのでテストできなくなる。

第3章 コンポーネントを分類する

コンポーネントを Presentational Component と Container Component に分類する。

  • Presentational
    • 主にpropsで渡されたデータを表示する
    • これ以外の機能を持たないようにいろいろ制約をつける(割愛)
  • Container

第4章 ディレクトリ構成とコンポーネントの分類

こんな風にディレクトリ切ると良いよという話。

  • basics
  • components
  • containers
  • pages

私は普段こんな感じ。

  • atoms
  • molecules
  • organisms
  • pages

どちらも小さい順に上から下へフォルダが並びますね。役割も一致してる。

第5章 なにをテストするか

  • templateで次の項目が正しく動作するか
  • propsが正しく受け取れるか
  • methodsが正しく動作するか
  • $emitでイベントが正しく発火するか
  • slotが正しく動作するか
  • コンポーネント同士が正しく協調しているか

最後のはざっくりした結合テストだけど業務ではここでやってしまったほうが良い箇所のような気がする。

第6章 テスト実行環境の構築

割愛。

第7章 テストを書く

ここではコンポーネントごとのテスト方法をJest,vue-test-utilsの使い方も含め、具体例を挙げて紹介している。実際にテストを書くときに参考にします。

あとがき

書きたいことが多くてそこそこのボリュームになったということ。確かに同人誌としては想像以上のボリュームだった。

感想

恥ずかしながら知らないことが結構あって非常に参考になりました。なにかに特化したソフトウェアエンジニアではないのもあり、どの分野も知識が浅いんだよなあと反省しました。フロントエンドのデザインパターンてどこで勉強してるんだろう。何をテストしたら良いのか、というのはしょっちゅう悩んでしまうので、実践する際に繰り返し読み返そうと思います。あと表紙がかわいい。

素晴らしい本をありがとうございました。