始めに
こんにちは😵
まんじです😃🙏
サーチコンソールを見てたら「React 実務レベル」でググってる人がいるのを見つけてしまいました😍
ということで今回はReactでフリーランスをしてるっていうのもあるので、Reactの実務レベルについて書いていきたいと思います。
結論から書くと職場次第でレベルが変わると思いますが、以下の項目らへんを満たすのがReactの実務レベルに落ち着くのではないかと思います。
- コンポーネントのライフサイクルを理解できてる
- カスタムフックが使える
- 状態管理ツールがなんかしら使える
- フェッチしたデータをキャッシュするSWRとかreact-queryとかが使える
- Next.jsなどの知見、SSG、SSR、CSRがある程度分かってるというか、分かってる
- サーバーサイドのAPI通信からデータベースにアクセスする層のコードがわりと読める
- CSSフレームワークが1個なんかしら使える
- バックエンドとの型の共通化の知見がなんかしらある
- TypeScriptの型がそれなりに使える
- JavaScriptのPromiseとCallback関数系のメソッドがそれなりに理解できていて使える
もうこの記事終わりな気がするんですけど、もう少し気合いで文字数稼ぎをします。
（Googleさん、ぼくは良い記事書いてます。）
Reactの実務レベルチックな部分を少し細かく解説
コンポーネントのライフサイクルを理解できている
ClassコンポーネントとかをReactでやるとわりとReactの順番というかライフサイクルが分かるんですけど、関数型のHookでも良いと思います。
いわゆるこういうやつらです。
- 再レンダリングがState更新すると発生するぞ的なやつとか
- 親コンポーネントが再レンダリングすると子コンポーネントも再レンダリングされるとか
- Propsが変わると再レンダリングされるとか
- コンポーネントのメモ化にともなって、useMemoとuseCallbackとか
- useEffectがクライアントサイドレンダリングのどのタイミングで動くのかとか
- 依存配列っぽいやつとか
最初は難しく感じるんですけど、慣れてくると徐々にフィーリングでどういう順番で処理が実行されるか（どこが再レンダリングされるかとか）が分かるようになってきます。
最近は関数型コンポーネントしかほぼ使われませんが、class型コンポーネントのcomponentDidMountなどを使って実装をすると理解がより深まると思います。（関数型で書く場合はそこまで知る必要がないんですけど。）
カスタムフックが使える
useウンタラってやつで、ただのReact版のメソッドです。
↓例えば、こんなやつ。
useModal()
useComponentDidMount()
useSomething()- ロジックをカスタムフックにつっこんでカプセル化したり
- 定番処理をカスタムフック化して使い回したり
- データフェッチとキャッシュライブラリをラップしてPropsリレーをやめたり
- グローバルステートを管理するためになんかをWrapしたり
カスタムフックも入門者、初心者の頃はすごく難しく感じますが、こちらも同様に慣れです。
すごく簡単に言うとカスタムフックはReactを使ったただの関数（メソッド）です。
状態管理ツールがなんかしら使える
大体グローバルステートを管理するために、useContextか軽量系の状態管理ツールかフェッチとキャッシュライブラリのkeyでキャッシュして状態管理ツールっぽく使うことになります。
こちらも最初は非常に難しいというか、「そんなんいらんだろ、useStateで十分や！」って思うわけなんですけど、徐々に状態管理をグローバルに持つ必要があるやつらがUIの機能的に出現してきて慣れていく必要に迫られます。
例えば、DrawerとかModalとかは状態管理ツールでグローバルステートでの管理ができると楽にコンポーネントの設計ができるようになります。
（何言ってるのか意味不明な場合は、フーンって思っておいてください。）
フェッチしたデータをキャッシュする系のライブラリが使える
- SWR
- react-query
大体ここらへんだと思うんですけど、なんかしら実務だと使われています。
というよりも、使わないといろいろと厳しくて、axiosにuseEffectとかでやるとむしろ複雑になるし書くのが面倒だし死ねます。
ただ、最初は理解するのが今まで書いたのと同様に難しいです。
「JavaScriptの実務レベルについて解説します」の記事でも解説しているコールバック関数（引数に関数を渡すやつ）ってやつをちゃんと理解していく必要性に迫られます。
ライブラリ側のメソッドに関数を渡してそれが内部で実行されるみたいなことが増えます。
それがコールバック関数ってやつです。
あとはフェッチしたデータが大体キャッシュされる（グローバルステートで保持するような感じ）ので、そういった挙動も慣れていく必要があります。
SSG,SSR,CSR系
Reactのフレームワーク（Next.jsなど）を使わずに使っているSPA（シングルページアプリケーション）だとあんまりいらない知識なんですけど、多分SSRとCSRあたりの知識はなんだかんだで知ってることが必然のように前提知識として必要になる可能性が高いです。
データの流れみたいなのを把握するのに必要です。
ReactのフレームワークのNext.jsを使うと理解が深まります。
Reactのバージョンアップデートをキャッチアップしていける
（突如マインドっぽい感じのものを入れちゃった）
ぼくがReactを使い始めたのはVersion16ぐらいだったんですけど、日進月歩のごとくバージョンがちょいちょい上がって仕様やできることも変わっていくのでキャッチアップ力が必要です。
要は勉強していける力です。
ただ、ベースとなる知識があればキャッチアップはわりと楽です。
業務時間に少しググったりGPTに聞いたりコードレビューしたりされたり、暇な時に適当にQiitaやらZennやらを読んでれば雰囲気で理解していけます。
バックエンドのコードがわりと読める
Reactで実務をする場合にはバックエンドのコードが読めないと普通にきついです。
労働現場によっては無理ゲーすぎて完全に分業だよねって感じのところもあるかと思いますが、そこそこ小規模なチームの場合にはバックエンドのコードが読めて簡単な修正ぐらいはできないと少しつらみがあります。
Reactを使って働いてても、APIつなぐところでバックエンドのコードを読んだり原因調査したりそういう系の作業が必要になるからです。
フロントエンドのデータはバックエンドから基本的には流れてきます。という当たり前のことを書いてみる。
ReactのCSSフレームワークがなんかしら使える
有名どころだとここらへんでしょうか。
- MUI
- Tailwind CSS
- BootStrap
1つをそこそこマスターというか使いこなせるようになれば他のものも似ているので、なんとかなります。
ぼくはBootStrapから入って、MUIばっか使ってます。
バックエンドとの型の共通化の知見がなんかしらある
- tRPC
- GraphQL(正直ぼくは分からない)
- Shareディレクトリ作ったりして型共通化
これに関してはなくてもいける気もするけど、型共通化の知見はあったほうがいいと思います。
TypeScriptの型がそれなりに使える
ジェネリクスゴリゴリのパズルみたいなことはできなくていいんですけど、基本的な型が使えて微妙にジェネリクスとかで型変数を使う必要性に迫られます。
あと、ライブラリのコードの中身を読む必要性に迫られた時に必須です。
ちなみにジェネリスクっていうのは型の変数のことで、TとかPとかがよく使われます。
例えば、useStateのuseState<string>とかのstringの部分とかはジェネリクスのところに型をつっこんでる感じです。
JavaScriptの関数型の処理とかPromiseとかCallbackとか
最初は発狂しますが、これは必須です。
- 関数型の処理: map, filter, forEach, every, some, reduce
- Promise: async await かthen
- Callback: 関数の引数に関数を渡して実行してやったりされたり
文法的な問題なので、慣れです。
慣れてなれない頃はfilterの中にsomeとかネストして関数型の処理を書くとつらいですけど、慣れです。（慣れです。）
実務レベルは実務で書いてボコられないとやっぱきつい
ということで、アーダコーダ書いてきました。
でも実際には実務レベルは実務でボコられて徐々に慣れてくるものだと思います。
ぼくもこういう記事を書いちゃってはいるものの、Reactは普通に普通ぐらいです。
労働現場にはできる人が死ぬほどは言い過ぎだけど、かなりいるのでその人からコードレビューでボコボコにされて実務レベルに近づいていくという定番の流れでReact力は上がります。
ポートフォリオ的な側面
ぼくはいくつかReactをフロントエンドに使ってウェブアプリを作っていて、それがフリーランス案件を取る時にも役立ったので、参考になるかもしれません。
いわゆる実務レベルができそうなんじゃないかと思われるようなポートフォリオになります。
KUJIRA SEO
- 概要
- SEOツールのウェブアプリ&ElectronとReactを使ったデスクトップアプリ
- 月間PV: 30付近
- 収益: 0
- 技術的な側面
- バックエンド: Express, Prisma, MySQL
- フロントエンド: React, Next.js
実際に見てもらえると「こんな感じか〜」ってのがなんとなく分かると思います。
アダルトウェブアプリ(非公開)
- 概要
- 雰囲気で稼げると信じて作ってしまったアダルトウェブアプリ
- 月間6万PV程度
- 収益: 月間1000~3000円程度
- 技術的な側面
- バックエンド: Express, Prisma, MySQL
- フロントエンド: React, Next.js
こっちは明らかに失敗しましたが、実際にユーザーをつけてアクセスを捌いたりしているところがフリーランスの面接時とかに役立ちました。
Timehub
最近ぼくが作ってる時間の売り買いプラットフォームです。
フロントエンドにNext.js(React)を使っていて、むしろほぼReactでできてると言っても過言ではないです（バックエンドはReactじゃないけど）。
あと、初期のユーザー集めのためにぼくが100円でReactやらフリーランスエンジニアの相談に乗っています🥲
よかったらぜひ🥲
【期間限定、激安】Reactフリーランスエンジニアがプログラミングの相談にのりますを売ります
個人的な感想
(↑ワイ)
ぼくは最初の実務労働がReactだったんですけど、普通に死にました。
真面目に分からないことが分からないというか、「何がどうなってこうなってるのかなんも分からん」みたいな状態でした。
でもまあ、、、エンジニア入門労働でも6ヶ月ぐらい適当にやりつつ勉強というかReactあたりでウェブアプリケーションを作っていたら徐々にコツというか作法が掴めてくるようになった気がします。
気合でついていっていたら実務レベルになっていって、フリーランス案件もReact使ったフロントエンドエンジニアで普通に取れるようになりました。
まとめ
Reactの実務レベルってことで書いてみましたが、とりあえず慣れで慣れが大事だと思います。（薄いTipsですが、本当に慣れです。）
実際ぼくも未経験からReact全く使ったことないけど、インターンで使い始めて何もわからない状態でなんか適当にやってたらそれなりにReact力は上がって実務レベルはクリアしてるだろってぐらいにはなりました。
オワコ。
その他Reactに関する関連記事とかとか
