Bookレビュー:Test-Driven React

books

本の概要

タイトルのとおり、テスト駆動でReactアプリケーションを開発していく方法を学べる本。紙の本だと170ページとのことで、分量はそれほどでもない。ただ、チュートリアル形式の本なので、実際に手を動かしながら読んでいくのがよい。そうすると少し時間がかかる。

簡単なテストケースからスタートして段階的にコンポーネントを作成しながらReactについての説明もされるが、ある程度の知識(公式のドキュメントやチュートリアルを読み、簡単なReactアプリケーションを作成できるレベル)はあった方がよいと思われる。とくに5章のHOCはやや難易度が高い。

僕自身は実際にチュートリアルに沿って手を動かしながら、約2週間で読了した。1日1章、2時間ほど時間を確保できれば6日間でいけそうかな?

注意点としては、React Hooksには未対応である。

章レベルの目次は以下となっている。

  1. Test-Driven Development with Jest
  2. Integrated Tooling with VS Code
  3. Testing React with Enzyme
  4. Styling in JavaScript with Styled-Components
  5. Refactoring with Higher-Order Components
  6. Continuous Integration and Collaboration

以降、各章の内容についてまとめる。

1章 Test-Driven Development with Jest

この本を通してテスティングライブラリはJestを使うので、インストールや設定、テストの書き方が説明されている。ツールの基本的な使い方を学んだ後は、FizzBuzzを題材にテスト駆動開発のサイクルを体感していく。jest --watchAll は便利だよなぁ。

2章 Integrated Tooling with VS Code

VS CodeでJestを使って開発をする際の設定や、ESLintによるコードチェック、Prettierによるコード整形についてまとめられている。

3章 Testing React with Enzyme

ここから本格的にTDDによるReactコンポーネント開発の話題に入る。この章以降、画像を次々に表示していくカルーセルコンポーネントを少しずつ開発していく。まずはBabelとEnzymeを導入後、テストケースの記述、コンポーネントの実装を繰り返しながら少しずつ実装していく。

まずはプロパティすらもたないシンプルなJSXからスタートし、プロパティやステートを順次盛り込んでいく。子コンポーネントを持つ複合コンポーネントが徐々に実装されていく過程を体験することが可能だ。

4章 Styling in JavaScript with Styled-Components

この本では、コンポーネントに対するスタイルの適用とその検証方法にも1章割いて説明されている。使用するライブラリはCSS-in-JSタイプのStyled-Components。jest-styled-components というライブラリを用いてスタイルを検証する方法が書かれている。また、Jestのスナップショットによるテストについても説明がある。

5章 Refactoring with Higher-Order Components

この章では、作成したコンポーネントをHOCを使ってリファクタリングしていく。HOC本体、HOCを適用したコンポーネント、それぞれテスト駆動で開発していく。

6章 Continuous Integration and Collaboration

最後の章では、作成したアプリケーションをGitHubにpushし、Travis CIと連携した継続インテグレーションを行う他、Huskyを使ってコミット時にLintを適用したり、StoryBookでコンポーネントのドキュメントを作成する手順を学んでいく。

まとめ

テスト駆動でのUIコンポーネント開発について書かれた本は見たことがないので、なかなか貴重な本である。チュートリアル形式の本は、実際に手を動かして読むことで、ただ読んだときと比べて数倍の効果が得られるので是非そうするべきだ。

タグ: