技術書典9 の新刊として「Clean Architecture for React」を執筆しました

「Clean Architecture for React」というタイトルの本を執筆し、技術書典 9 にて頒布しています。技術書典はオンライン上で開催されている技術同人誌の即売会です。技術書典9 は2020/09/12-09/22 の期間開催されています。本記事では「Clean Architecture for React」を執筆した背景や概要を説明したいと思います。

技術書典のオンラインマーケット：https://techbookfest.org/market
「Clean Architecture for React」の販売ページ：https://techbookfest.org/product/5680749227278336
「Clean Architecture for React」の試し読み：https://note.com/imamori/n/n5a7ebdbd4260

想定読者

本書は、React アプリケーションを開発した経験がある方を想定読者として執筆しました。そのため、TypeScript, React, Redux の技術的な詳細については説明は行わず、すでにある程度の知識がある前提で話を進めています。本文中では、できるだけコードを使って解説を試みていますが、コードは TypeScript で書かれており、加えて、React の基本的な書き方がわかっている前提となっていますのでご注意ください。

「Clean Architecture for React」はどんな本？

本書は Clean Architecture と呼ばれる設計手法の観点から React アプリケーション開発を捉え直すことで、React アプリケーション設計のその一歩先にいたることを目標としています。Clean Architecture は 2012 年 8 月に Robert C. Martin に発表されて以来、プロダクト設計の方法 論として注目を集めています。この手法はプロダクト開発全体をターゲットと しているため、従来は主にバックエンド開発やネイティブアプリ開発で採用されてきました。しかし、近年のブラウザの高機能化と JavaScript 周辺技術の発展により、SPA や WPA のような技術が普及し、Web フロントエンド単体で高度なアプリケーションを構築することが増えてきました。このような潮流の変化に伴って、Web フロントエンド開発においても Clean Architecture の考え方を取り入れる余地が生まれたといえます。本書では、Web フロントエンドの中でも React に焦点を絞り議論をおこないます。Clean Architecture の背景や基本的な原則を解説し、これらの原則を踏まえた上で React や Redux のスタンダードな設計を見つめ直します。誤解のないように補足をしておくと、本書は従来の React アプリケーション設計を否定するものではなく、Clean Architecture の言葉で従来の設計方法を翻訳することで、その合理性や注意点を明らかにすることを目的（の一つ）としています。例えば、React のコンポーネント設計では、上流のコンポーネントが下流のコンポーネントに依存することになります。一方で、上流のコンポーネントほど多くのアプリケーションロジックを含んでいるため、Clean Architecture の観点からは、より安定しているべきであり、そのためには依存関係を極力持たないようにする必要があります。しかし、実際には React のコンポーネント設計方法が十分にスケールすることは、多くの既存のプロダクトが実証しているといえます。このように React アプリケーションを開発する上で、 Clean Architecture の原則を常に守れるわけではありません。重要なのは、Clean Architecture がどのような考えの上に成り立っているのかを理解した上で、従来の React アプリケーション設計を捉え直すことで、今までは見えてこなかった別の側面を発見することなのです。
ちなみに、「なぜ Clean Architecture の原則を満たして否にもかかわらず React のコンポーネント設計はスケールするのか？」という問いに対する考察は本書の中で議論しています。気になる方は本書を手に取っていただけると幸いです。

本書で伝えたいこと

もともと Clean Architecture は Java のようなコンパイル言語で書かれた大規模のプロダクト開発で得た知見が元となっています。このような Clean Architecture の背景を考慮すると、そのすべてをそのまま React アプリケーションに適用できるわけではありません。例えば、Java アプリケーションの場合、デプロイ時にコンパイルが必要となるため、コードが複雑に依存しあっていると、少しの修正のために多くのコードのコンパイルが必要となってしまうという問題点があります。このような点が、Clean Architecture において重要な依存関係の原則を要請しているといえます。一方、React のような Web アプリケーションでは、コード分割をすることはあれど、基本的には一括でトランスパイルしても問題のない開発速度が得られます（少なくとも一般的な規模のアプリケーションであれば）。このように、Web アプリケーション開発は、Clean Architecture が前提としていることから外れてしまっていることもあるのです。つまり、Clean Architecture に盲目的に従ったからといって、いい設計になるわけではありません。
とはいえ、Uncle Bob は「アーキテクチャのルールはどれも同じである!」といっています。そして、どのようなプロダクト開発でも共通して必要とされる要素を抽象化しようとする試みが Clean Architecture といえます。つまり、Clean Architecture の中には、React アプリケーション設計においても重要となる要素が少なからず含まれているはずであり、それを読み取る力をつけることが、本書を通して読者の方々に伝えたいことであり、少しでも参考になれば、著者としてこれ以上の喜びはありません。

やりのこしたこと

Clean Architecture の原著では、フレームワークは実装の詳細であり、ドメインロジックはこれらに依存してはならないとされています。そのため、Web アプリケーション開発においても React のような View ライブラリに依存しない設計を模索できれば理想だったのですが、筆者の経験が足りず、そこまでの議論を行うことができませんでした。将来的には Clean Architecture の考え方を取り入れて、Vue.js やその他のフレームワーク・ライブラリに依存しない Web アプリケーション開発設計手法を議論するような本「Clean Architecture for SPA」を執筆したいものです。

最後に

Clean Architecture は全ての設計手法がそうであるように、銀の弾丸ではありません。プロダクトやチームによって向き不向きも変わってきます。しかし、その判断をするためには、まずはその設計手法を適切に理解する必要があり、また、その設計手法を自身のプロダクトに適用したときにどのような姿になるのかを想像できる必要があります。本書が、その一助になれば幸いです。

「Clean Architecture for React」の販売ページ：https://techbookfest.org/product/5680749227278336
「Clean Architecture for React」の試し読み：https://note.com/imamori/n/n5a7ebdbd4260