ReactでWebアプリケーション開発する際に参考にした記事と書籍

大里 匠 / フロントエンドエンジニア

こんにちは。
フロントエンドエンジニアとしてWebアプリケーション開発に携わる者です。
Reactを使ったアプリケーション開発を任された際に、色々な記事を読んだ中で本当に役に立ったものを厳選してまとめてみました。

ここから紹介する記事は、「Reactでアプリケーション開発している、したことがある」ということが前提になってきます。
Reactをさわったことが無い。
Hello,Worldくらいしかしたことない。
という状態の方にはオススメできません。
そういった方はまずはチュートリアルをこなした方がいいかもしれませんm(_ _)m

「Reactでとりあえず動くアプリケーションは作れるけど、正しい実装ができているか不安」というような方にとっては参考になると思います。


React hooksについて

「Reactはクラスコンポーネントと関数コンポーネントがあるけど、なぜ？」
「hookのメリットって何？」
「hook使いたいけど、よくわからん」
という状態から色々ドキュメントを読み漁ったのですが、一番この記事がわかりやすかったです。


ざっくり記事の内容をまとめると


これまで
・Class構文で書くと記述量が多い。
・ライフサイクルメソッドが煩雑で複雑でバグの温床
・stateを持たず、ただrenderしたいだけなのに、Classを書くのがオーバーな感じがあった。
　→Stateless functional componentで、ただJSXをreturnする関数として定義していた。
　→しかし、後々stateを持たせたいとなった時に、Class構文に書き換えが必要になっていた。
・HoCパターンなどが生まれたが、componentのネストが増えて嫌な感じ

Hooks登場後
・基本的に関数コンポーネントで書けばいい
　→stateが不要なら書かず、必要になればuseStateを追加すれば良い。
・ライフサイクルメソッドから解放
　→基本的にロジックはreturnする前に書けば良く、コードを上から下に読める。
　→ロジックとビューを切り分けやすくなった。


TypeScriptについて

React + TypeScriptはデファクトスタンダードになりつつあります。
実装コストが増えることは間違い無いので、バランスを見る必要はありますが、堅牢なアプリケーション開発をしたいなら、TypeScript導入は１つ検討するに値すると思います。


custom hookについて

Webアプリケーション開発において「ロジックとビューをいかに分離させるか」が超重要になってきます。
Reactでロジックとビューを分離させようと思ったら、色々なやり方があると思うのですが、カスタムフックを使うという方法がオススメです。

最低限、アプリケーション内の主要なロジックはカスタムフック化しておくと、かなり便利です。
ロジックの再利用性、保守性が高まるので、開発がめちゃくちゃ捗ります。


Atomic Designについて

フロントエンド開発においてAtomic Designの概念はぜひ知っておくべきです。
Atomic Designをしっかり勉強し始めてから、UI設計に対する考え方や実装スキルがワンランクアップしたような実感がありました。


Atomic Designに興味が湧いた！
Atomic Designを取り入れたい！
という方はこちらの本は必読です。

著者は、AbemaTVの開発に携わったフロントエンドエンジニアです。
Atomic Designの概念や導入手順などが書かれており、実装サンプルがReactで書かれています。
この本が、実際にアプリケーション開発するうえで本当に役立ちました。
・コンポーネントの命名
・ディレクトリ構成
・コンポーネントにできるだけ状態を持たせないようにすることの重要性
などなど、開発するうえでのリアルな知見が得られます。


この記事が気に入ったらサポートをしてみませんか？