Reactハンズオンラーニングを読んだので感想
はじめに
この記事はこれからReactやJavaScriptを0から学びたいと思う人に向けての記事です。
こちらの本を紹介したいなという、ただの布教記事です。
自分もそれなりにJavaScriptを書いて、Reactを勉強してきたと思っていましたが
こちらの本を読んで、まだまだ序の口だったのだなと感じました。
もちろん、何年もJavaScriptを書いてきて、ここに書いてある事は常識だぜ！っていう人もいるかと思います。
ただ、最初にも書いたように、0から学ぼうとしている人に向けてなので
そういった人にはとても有益な本になるのではないかと思います。
こちらのスクラップに自分で理解するためにコードのメモなどもとってあるので、参考にしてみてください。
本の構成について
ツールの紹介
から始まります。
- Github
- React Dev Tools
- Node
などの説明があります。
JavaScriptの基本構文
について書かれています。
ただ、ここで書かれているのはよくある、for文であったり、if文の紹介ではなく
ES6記法に焦点を当てた
- const、letの使い分け
- アロー関数のスコープ
- デストラクチャリング
- Promiseについて
- クラスについて
などを重点に書かれているので、他の言語の感覚でJavaScriptを書いてきた人にとっては
新鮮な気持ちで学ぶ事ができると思います。
JavaScriptの関数型プログラミング
について書かれています。
関数型プログラミングという言葉に馴染みがない人もいるかもしれないです。
所謂、機能毎に関数を作り、それを組み合わせるようなプログラミングのことで
array.map((item) => `${item}だよ`)
このようにmap関数のようなもののことを指します。
高階関数と呼ばれる、関数を引数に取るような関数を使い
再帰を利用したプログラミングが、関数型プログラミングのイメージになります。
このことについて、（部分的には難しいですが）基本的な書き方で分かりやすく書いてくれてるので
まず概念を理解するにはとても有益に感じます。
Reactについて
こちらの本では、Reactのベストプラクティスと謳っていることもあり
昨今なかなか見られなくなったクラスコンポーネントについては1、２ページ程でまとめられています。
基本は関数コンポーネントについての説明になります。
しかし、これまでのReactの歴史や、レンダリングシステムについては関数コンポーネントでも理解しておくのはとても有益だと思います。
この本では、React.createElementを使うことで、これまで自分たちで使っていた
const div = document.createElement('div')
div.innerText = 'inner text'
などのようなコードをReactのシステムを使って描画する方法を説明してくれています。
DOMの扱いについてのJavaScriptについては触れてはいないものの、Reactでの描画の基礎となる部分を書いてくれていて、何気なく今まで作っていたコンポーネントの知識も高まります。
そして、宣言型プログラミング（命令型プログラミングは対となる）でコンポーネントを作成する、所謂JSXについて、上記の流れで解説してくれているので、今のReactへの繋がり方も必要なところだけに焦点を絞ることで長たらしくもなく読みやすいです。
ステートについて
関数コンポーネントは内部でステートを持つことができません。
そのため、外部ステートを管理するものを注入する必要があります。
その一つとしてHooksの機能を使います。
Hooksの紹介の切り口として、ステートの管理から始まるuseStateを使った実装を実際のユースケースを考えて紹介してくれています。
ここではよくある星印のレーティングのUI実装です。
どのようにステートを管理して、子コンポーネントに伝播させるかをこれまでの紹介であったデストラクチャリングなどを利用しながら教えてくれます。
もちろん、グローバルステートについても記載はされていて
createContext, useContextを使った実装例が表記されています。
これにより、コンポーネントを跨いだステートの管理が可能となります。
さらに、カスタムプロバイダーの作成、さらに踏み込んだContextの使い方についても言及されていて、実際のプロダクトコードでも使えるような活用方法を紹介されています。
宣言的にReactを操作する
フォームなどでinputとかの入力値を送信時に取得するのは、useStateを使って、入力の度に値を変更するというのはReactを勉強始めた初期に通る道だと思います。
これはuseRefを使っても取得はできます。
しかし、これは宣言的ではないという概念からuseStateを使いましょうという説明が追加されています。
こういった観点からも、パターンを印しつつ、良いパターン、Reactの思想を持ちながら実装を行うという観点も得られます。
同時に、カスタムフックによる抽象化の概念についても触れられているので、Hooksの機能の重複を抽象化することも説明されています。
この辺りの抽象化の概念は、プログラムを書く上で避けては通れない概念だと思うのでReact、ないしはJavaScriptが初めての言語で、今まで手続き型でプログラムを書いてきた人にとってもとても良い体験になると思います。
フックについて
ステートに関するフックを筆頭に紹介されていますが
もちろん、他のフックにも触れています。
特にパフォーマンスに大きく影響するものから紹介されていて
useEffect, useLayoutEffect, useReducerから紹介されています。
それに伴い、パフォーマンスに関することにも言及していることで、実際のプロダクトに当てはめることもしっかり想定されていることが伝わってきます。
メモ化についても言及していて、useMemoや、useCallbackといったものを使うことで無駄なレンダリングを避けるような書き方やユースケースについても書かれているのも分かりやすかったです。
UIとfetchの分離
fetchというのは、JavaScriptのFetch APIのことで、所謂外部データの取得などの通信を行うAPIのことですが、
UIコンポーネントとfetchを行うコンポーネントが同じにならないような作り方
それぞれの責務を分けた分離の仕方を紹介してくれています。
この辺りになると、Reactを初めて触るという人には少し難しくなる内容の気がします。
コンポーネントが並列にある時、外部APIの呼び出しを並列的に行う必要があり
ネスト構造のコンポーネントであれば、逐次実行で呼び出されるfetchからデータの描画を行うことができますが、それだと取得にかかる時間が加算したり、コンポーネント構造が複雑化することがあるため並列処理で行われることが多いという観点で、並列でのコンポーネントの配置の仕方を紹介されています。
また抽象コンポーネントを挟むことで、よりシンプルなコンポーネント構造になるように紹介がありますが、こちらは必ずしもするべきものではなく、コードの複雑さに繋がることもあるのでケースバイケースというような紹介もあります。こういった、選択の幅を持たせてくれるのも良い点だと思いました。
同時に外部API呼び出しの際のネットワーク通信によるエラー処理など、なかなか気づけないところについてもテストケースを教えてくれるという点では、これからプロダクトを作る上で必要な視点になるのではないかと思います。
用語について
Reactを使う上でかなり多くの用語が出てくるかと思います。
- 副作用
- 宣言型
- ステート
- 描画
- predicate
などなど
このような用語が頻繁に使われるので、読み終わる頃にはかなり親しみのある言葉になるかと思います。
この本だけでなくいろんな所でも目にする用語なので、この本に限った使われ方をしてるとかではなく
一般的によく使われるドメインとして共通しているものを使っていて、分かりやすく解説も含めてくれているのもこの本の良さなのではないかと思います。
サスペンスについて
必ず必要というわけではないけど、Facebookが取り入れている開発手法についても触れています。
アプリケーションによっては必ず必要ではない上に、これから変更が入る可能性が高いということで優先度は低いものになるかもしれないですが、そういうものがあるのだと知るだけでも全然違うと思います。
その他
大きい項目ではないですが
JavaScriptに対するテストや
Reactコードに対するテストも紹介として書かれています。
- ESLint
- Prettier
- PropTypes, Flow, TypeScript(型チェックの面が強い)
- テスト駆動開発について
- Jest
- React Testing Library
などの紹介があります。
他にも、ルーティングについてや
サーバーサイドReactとしてサーバーサイドレンダリング、Next.js, Gatsby
開発環境についても触れていて、知っておくだけでも全然違う情報になるかと思います。
まとめ
こちらの本は、自分にとっていろいろと整理ができる本でした。
仕事でフロントエンドを触る際には、JavaScript、TypeScriptを触って来ましたが、
もっともっと自分のコードを洗練させることができそうだという可能性を感じることもできました。
関数型を意識した書き方の方がスケールのしやすさや
非破壊的な変更の反映など
これから始める方には身につけておいた方がいい知識がちゃんと記載されているのが良かったです。
そしてReactに関しても、パフォーマンスの向上の具体的な方法であったり
上記のような関数型を当てはめた実装例などを参考にすることで
まだ実務でReactを触ったことがない自分としても、全くヒントがない状態で行うことがなくなり、
恐怖心が少し薄らいだような気がします。
また、そこまで深くは触れていないですが、GraphQLやsocketなども部分的に登場したりと
これから興味を持てれば深く知って行ける技術の紹介などもあるので、是非勉強してみるのもいいかと思います。
なので、もしこれからReactやったりJavaScriptを今一度振り返りたいという方にはうってつけの一冊なのじゃないかと思います！
Discussion
Reactハンズオンラーニング、気になっていたので買ってみようかなと思います！
2点ほど、誤字かなと思った箇所があったので、お伝えしておきますね(^^)
・ contst、letの使い分け -> const、letの使い分け
・高級関数 -> 高階関数
僕が間違ってたら申し訳ないです🙇♂️
ありがとうございます！！
誤字連絡ありがとうございます！
助かりました！