「React ハンズオンラーニング」を読んだ
今までフロントエンドは Vue.js をメインに触ってきましたが、今後は React もやっていこうと思って久しぶりに勉強を始めました。 React は数年前にチュートリアルをやったくらいでほとんど知識はない状態だったのですが、Amazon でたまたま見つけてちょうど良さそうだと思って買いました。
ざっくりと内容
そもそもの JavaScript の基本の部分や、関数型の書き方から React の基本、フックなど幅広く説明されています。 オライリーのページの目次を見ると大体書かれている内容が把握できると思います。
7 章がフックになっていますが、6 章のステートからフックを使用しているので、実質 6 章と 7 章がフックの説明になっています。 大体ここら辺の内容は網羅されているかなという感じなので、すでにある程度 React できる人はここを読めば良いかもしれません。
私のようにこれから React を始める人や、いまいち良い書き方がわかってない人にはおすすめです。
React の書き方以前に関数型や JS の良い書き方について学習した後に、React の書き方を学ぶという流れがとても良かったです。
個別に学んでいくとなんとなく関数型はわかるし React の知識もあるけど、実際に React を書いていくと関数型っぽくならないということも起こり得る気がしていて、そこが通して学べるのがこの本の良いところだなと思いました。
コンポーネントの実態は関数
「4 章 React の基本」の中に、コンポーネントの実態は関数であると記載がありました。 個人的にはこれを理解しておくとコンポーネントを作成するときにわかりやすいと思っています。
前に書いた自分のコードを読むとロジックの部分は小さく分割できているけど、コンポーネントは大きくなっているということが多々発生していました。 バックエンドの開発メインで、そこからフロントエンドの開発を行うようになった人に多い傾向な気がしています。
「コンポーネントが大きい = めちゃくちゃ大きい関数を書いている」という感覚を持つと、どの粒度で分割すれば良いのか自分としてわかりやすくなりました。
特にこの本の中で関数型についても触れられていて、純粋関数や高階関数、イミュータブルなコードについての説明があります。
これもコンポーネントの設計に役立てると思っています。
親から渡されたデータにしか依存しないようにするとか、子から親のコンポーネントを直接変更するようなコードは避けて、結果を返すか関数を親から子へ渡すようにするなど。
関数であればやらないことは極力コンポーネントでもやらないようにすることで、コンポーネントも自然と分割できる気がしました。
書かれていないこと
特にディレクトリ構成については書かれていないです。 TDD や Jest なども目次の項目としてはありますが、ほんとに少しだけなので実際にやろうと思う場合には個別に調べる必要があります。 基本的に React 固有のもの以外は一通り説明はするから必要があれば他の本とかで調べてみてねっていうスタンスです。
読んでみた感想
composition api と近しいところも多々あり、Vue.js しか触ったことがなかったもののかなり理解はしやすかったです。 そういう意味では、Vue.js をメインでやる人にも参考になる部分は多かった気がします。特に最初の方は JavaScript についての説明なので、ここは JavaScript を書く人であれば必須かなと思っています。
これからやること
前に composition api の勉強用に作ったアプリがあるので、それを React で書いてみようと思っています。 たぶん本格的に始めたらもっと辛いところも出てくるとは思うのですが、一旦は知識のアップデートができて、これから React を使って開発を進められそうです。
