始めに
こんにちは、まんじです。
サーチコンソールを見てたら「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がクライアントサイドレンダリングのどのタイミングで動くのかとか
- 依存配列っぽいやつとか
最初は難しく感じるんですけど、慣れてくると徐々にフィーリングでどういう順番で処理が実行されるかが分かるようになってきます。
カスタムフックが使える
useウンタラってやつで、ただのReact版のメソッドです。
- ロジックをカスタムフックにつっこんでカプセル化したり
- 定番処理をカスタムフック化して使い回したり
- データフェッチとキャッシュライブラリをラップしてPropsリレーをやめたり
- グローバルステートを管理するためになんかをWrapしたり
カスタムフックも入門者、初心者の頃は死ぬほど難しく感じます。
ただこちらも同様に慣れだと思います。
状態管理ツールがなんかしら使える
大体グローバルステートを管理するために、useContextか軽量系の状態管理ツールかフェッチとキャッシュライブラリのkeyでキャッシュして状態管理ツールっぽく使うことになります。
こちらも最初は非常に難しいというか、「そんなんいらんだろ、useStateで十分や！」って思うですけど、徐々に状態管理をグローバルに持つ必要があるやつらが機能的に出現してきて慣れていく必要に迫られます。
例えば、DrawerとかModalとかはわりと状態管理ツールでグローバルステートでの管理ができると楽にコンポーネントの設計ができるようになります。
（何言ってるのか意味不明な場合は、フーンって思っておいてください。）
フェッチしたデータをキャッシュする系のライブラリが使える
大体ここらへんだと思うんですけど、なんかしら実務だと使われています。
というよりも、使わないといろいろと厳しくて、axiosにuseEffectとかでやるとむしろ複雑になって死ねます。
ただ、最初は理解するのが同様に難しいです。
「JavaScriptの実務レベルについて解説します」の記事でも解説しているコールバック関数（引数に関数を渡すやつ）ってやつをちゃんと理解していく必要性に迫られます。
SSG,SSR,CSR系
普通にReactを使っているSPA（シングルページアプリケーション）だとあんまりいらない知識なんですけど、多分SSRとCSRあたりの知識はなんだかんだで知ってることが必然のように前提知識として必要になる可能性が高いです。
データの流れみたいなのを把握するのに必要です。
Reactのバージョンアップデートをキャッチアップしていける
ぼくがReactを使い始めたのはVersion16ぐらいだったんですけど、日進月歩のごとくバージョンがちょいちょい上がって仕様やできることも変わっていくのでキャッチアップ力が必要です。
要は勉強していける力です。
ただ、ベースとなる知識があればキャッチアップはわりと楽で、業務時間に少しググったり暇な時に適当にQiitaやらZennやらを読んでれば雰囲気で理解していけます。
バックエンドのコードがわりと読める
Reactで実務をする場合にはバックエンドのコードが読めないとわりときついです。
労働現場によっては無理ゲーすぎて完全に分業だよねって感じのところもあるかと思いますが、そこそこ小規模なチームの場合にはバックエンドのコードが読めて簡単な修正ぐらいはできないと少しつらみがあります。
Reactで働いてても、APIつなぐところでバックエンドのコードを読んだり原因調査したりそういう系が必要になるからです。
フロントエンドのデータはバックエンドから基本的には流れてきます。という当たり前のことを書いてみる。
ReactのCSSフレームワークがなんかしら使える
有名どころだとここらへんでしょうか。
- MUI
- Tailwind CSS
- BootStrap
ウェブデザイナーが用意したカンプっぽいものにデザインを寄せていく時に必要です。
ただ、1つをそこそこマスターというか使いこなせるようになれば他のものも似ているので、なんとかなります。
バックエンドとの型の共通化の知見がなんかしらある
- tRPC
- GraphQL(正直ぼくは分からない)
- Shareディレクトリ作ったりして型共通化
これに関してはなくてもいける気もするけど、型共通化の知見はあったほうがいいと思います。
TypeScriptの型がそれなりに使える
ジェネリクスゴリゴリのパズルみたいなことはできなくていいけど、それなりには型を使えないとたまに死にます。
あと、ライブラリのコードの中身を読む必要性に迫られた時に必須です。
JavaScriptのPromiseとかCallbackとか
最初は発狂しますが、これも必須です。
特に配列とかオブジェクトをmapとかそういう系のメソッドでぶん回すのが何気に多いのと、そこにPromise絡んできた時に最初は死ねます。
実務レベルは実務で書いてボコられないとやっぱきつい
ということで、アーダコーダ書いてきました。
でも実際には実務レベルは実務でボコられて徐々に慣れてくるものだと思います。
ぼくもこういう記事を書いちゃってはいるものの、普通に雑魚です。
労働現場にはできる人が死ぬほどは言い過ぎだけど、かなりいるのでその人からコードレビューでボコボコにされて実務レベルに近づいていくというかなりましょう。
ポートフォリオ的な側面
ぼくはいくつかReactをフロントエンドに使ってウェブアプリを作っていて、それがフリーランス案件を取る時にも役立ったので、参考になるかもしれません。
いわゆる実務レベルができそうなんじゃないかと思われるようなポートフォリオになります。
KUJIRA SEO
- 概要
- SEOツールのウェブアプリ&ElectronとReactを使ったデスクトップアプリ
- 月間PV: 30付近
- 収益: 0
- 技術的な側面
- バックエンド: Express, Prisma, MySQL
- フロントエンド: React, Next.js
実際に見てもらえると「こんな感じか〜」ってのがなんとなく分かると思います。
https://kujira-seo.com/
アダルトウェブアプリ(非公開)
- 概要
- 雰囲気で稼げると信じて作ってしまったアダルトウェブアプリ
- 月間6万PV程度
- 収益: 月間1000~3000円程度
- 技術的な側面
- バックエンド: Express, Prisma, MySQL
- フロントエンド: React, Next.js
こっちは明らかに失敗しましたが、実際にユーザーをつけてアクセスを捌いたりしているところがフリーランスの面接時とかに役立ちました。
個人的な感想
ぼくは最初の実務労働がReactだったんですけど、普通に死にました。
真面目に分からないことが分からないというか、「何がどうなってこうなってるのかなんも分からん」みたいな状態でした。
でもまあ、、、エンジニア入門労働でも6ヶ月ぐらい適当にやりつつ勉強というかReactあたりでウェブアプリケーションを作れば徐々にコツというか作法が掴めてくるような気がします。
ぶっちゃけ気合でついていけば実務レベルになっていって、フリーランス案件とかもフロントエンドエンジニアとして普通に取れるようになります。
まとめ
とりあえず慣れだと思います。（薄いTipsですみません。）
労働現場で歴数年以上のReactエンジニアの人と普通に労働ができるならわりと実務レベルになってるような気がするので、ある程度勉強してからは労働に応募しまくって労働しつつ勉強あるのみです。