bulletproof-reactとは
React開発におけるベストプラクティスである、bulletproof-reactを紹介します。
bulletproof-reactはReactアプリ開発のベストプラクティスとして作られたリポジトリです。
Reactには多くのライブラリがあり便利ですが、その反面多過ぎてどのライブラリを利用するのが良いのか選定に悩む場合があります。また、Reactはディレクトリ構造など自由に作ることができ柔軟性があります。しかし、ある程度決められた構成が無いと、コードに一貫性が無くなったり、複雑で読みにくくなる場合があります。bulletproof-reactでは、パフォーマンスや保守性、拡張性を踏まえてどのようなプロジェクト構成が良いかを提案しています。もちろんあくまで参考程度であり、実際に採用するかは個人の判断になります。
プロジェクト構成
bulletproof-reactで勧められている、React開発を行う際に使うツールや言語についてです。 [Project Configuration](https://github.com/alan2207/bulletproof-react/blob/master/docs/project-configuration.md)
- ・TypeScript (開発言語)
- TypeScriptは静的型付け言語なのでエラーがあった場合は、コンパイル時に分かります。実行時のエラーを減らすことができコードの品質を高めることができます。
- ・ESLint (リンター)
- ESLintは、静的コード解析ツールです。自分でコードの規約や構文エラーなどを定義でき、警告を出してくれるので一貫性のあるコードになります。
- ・Prettier (フォーマッター)
- コードを自動で整形してくれるツールです。prettierの設定ファイル(.prettierrc)を作成しておくと、その設定に基づいてコードを整形してくれます。VSCode側で設定しておけば保存時に自動で整形してくれます。
- ・Husky (gitフック)
- Huskyはgitフックを実行するツールです。git commitやgit pushした時にコードの検証、整形、テストの実行などを自動で行うことができます
- ・絶対パス
- 複雑なディレクトリ構成で相対パスを使ってimportを行うと、分かりづらいパス指定になる場合があります。またエイリアスを使った絶対パスだと、インポート元のファイルをどこに移動してもimport文を変更する必要がありません。
自分がReact開発するときもこれらのツールを使っています。ESLintについては既存プロジェクトに後から導入すると複数のエラーが出るので、プロジェクト作成時に導入します。以前Huskyを初めて使ったのですが、コミット前に未使用のimport文やconsole.logなど不要なコードを見つけてくれるので便利でした。
コンポーネントとスタイリング
コンポーネントの作成やスタイリングにどのライブラリがおすすめされているか見ていきます。 [Components And Styling](https://github.com/alan2207/bulletproof-react/blob/master/docs/components-and-styling.md)
コンポーネントライブラリ
UIを作る際に、モーダルやメニューのUIを１から自分で作ると大変です。そういった場合にコンポーネントライブラリを使用すると簡単に実装できます。一方でコンポーネントライブラリは破壊的変更(ライブラリのアップデートにより、以前のコードのままだとエラーが発生すること)が出てきて保守の工数が増える可能性もあります。シンプルな画面の開発であれば、あまり使わない方がいいかもしれません。burretproofでは以下のようなコンポーネントライブラリが挙げられています。
- Chakra UI
- AntD
- MUI
自分はMUIが一番聞き馴染みがあります。人気ライブラリなので、検索したときの情報量も多いです。Chakra UIは学習コストがMUIより低い他、スタイルに柔軟性があったり、応答性も高いようです。これからさらに人気が出てくるのかなと思います。Ant Designは中国のアリババが公開しているUIライブラリで、日本ではあまり聞きませんが、中国を中心に海外で人気のようです。
ヘッドレスコンポーネント
ヘッドレスコンポーネントは、UIの要素やコンポーネントのロジックを提供するライブラリで、スタイルを持ちません。スタイルはtailwindなどを使って自分で指定する必要があります。これにより柔軟なスタイルを割り当てることができたり、コンポーネントの再利用性を高めることができます。
- Reakit
- Headless UI
- Radix UI
- react-aria
自分はヘッドレスコンポーネントを使ったことが無く、どういうものかも知りませんでした。ロジック部分のみを債務としたUIのようです。フレームワークへの依存性が少なくなるので、使用しているフレームワークで問題が起きた時に影響が少なかったり他のフレームワークへの移行がしやすいなどのメリットがあります。
スタイルライブラリ
Reactコンポーネントに対してスタイルを割り当てる際に使うCSSライブラリです。いっぱいあるのでどれを選んでいいのか迷いそうです。
- tailwind
- styled-components
- emotion
- stitches
- vanilla-extract
- CSS modules
- linaria
tailwindはクラス名を考えなくていいという利点がある一方、スタイルを当てる際のクラス名を覚える必要があります。
自分は最近はstyled-componentsを使う機会が多いです。styled-componentsは一度書いたスタイルの再利用がしやすいです。またCSS in JSなのでCSSファイルが不要です。一方でコンポーネント名を考えるのが煩わしく思う時があります。
CSS ModulesはCSSと同じように利用できるため学習コストが低く、グローバル汚染を回避できます。一方でCSSファイルを作成する必要がありファイル管理が冗長になります。
状態管理ライブラリ
[State Management](https://github.com/alan2207/bulletproof-react/blob/master/docs/state-management.md)
アプリケーションの状態
複数のコンポーネント間で利用する状態を管理するライブラリについてです。Reactではコンポーネント間で状態を共有する際にpropsを使います。しかしコンポーネントの階層が増えてくるとバケツリレーのような形になり複雑になります。そこで状態管理ライブラリを使うことでアプリケーション全体で状態を管理、共有ができるようになります。
- context + hooks
- redux + redux toolkit
- mobx
- zustand
- constate
- jotai
- recoil
- xstate
React Context/hooksはReactに組み込まれているため、追加のパッケージを必要としません。単にバケツリレーを避けるためだったり、比較的小さい規模のアプリ開発にはContext/hooksが向いています。
Reduxは初版が2015年と、他の状態管理ライブラリと比べて以前からあり広く利用されてきました。ダウンロード数が最も多く、検索しても多くの情報が出てきます。 またRedux toolkitを使うと、より効率的にReduxを扱うことができコード量を減らすことができます。
最近ではgithubのスターの増加数を見るとzustandが最もよく伸びていたり、ダウンロード数も2023年以降伸びてきています。もしかすると将来的にReduxを抜くかもしれません。
参考
bulletproof-reactでは、他にもReactプロジェクトのフォルダ構成やテストライブラリ、デプロイ先のホスティングサービスについても紹介されているので、技術選定やReactプロジェクトを見直したい人はbulletproof-reactを見てみるといいと思います。
4
