Reactエンジニアのフリーランス案件で求められるスキルと経験

Reactのフリーランス案件では、TypeScriptを使ったコンポーネント設計、サーバーから取ってくるデータと画面だけの状態を分けて扱う状態管理、Next.jsなどのフレームワークの理解、テスト・表示の速さ・アクセシビリティといった品質の知識が中心に見られます。Reactは画面を作るためのライブラリで、周りの技術の選び方が現場ごとに違うため、「どの構成で、何を自分で決めたか」が問われます。

独立の進め方や出身ごとの準備はReactエンジニアがフリーランスになるにはで扱っています。この記事では、案件で求められるスキルの中身と、その示し方を整理します。

Reactの案件で求められるスキルの全体像

Reactの案件では、画面を作れることは前提です。そのうえで、上のどこまで自分で判断してきたかによって、任される範囲が変わります。

コンポーネント設計とTypeScript

分け方を説明できるか

コンポーネントをどの単位で分けるかには、決まった正解がありません。だからこそ、案件では判断の理由が問われます。

• 見た目だけを担う部品と、データの取得や業務の処理を持つ部品を分けているか
• 共通部品を作るとき、使う場面が増えてもpropsが膨らみすぎない形にしているか
• 似た画面が増えたとき、共通化するか、あえて別々に作るかをどう決めたか

共通部品を作りすぎて、かえって変更しにくくなった経験とその直し方も、設計の理解を示す材料になります。

型で壊れにくくする

Reactの案件ではTypeScriptが前提になっていることが多く、propsの型だけでなく、APIのレスポンスやフォームの値に型を付け、変更があったときにエラーで気づける状態を作れるかが見られます。型の扱いを深めたい場合はTypeScriptの案件で求められるスキルも参考になります。

状態管理：何をどこに置くか

Reactの設計で最も差が出やすいのが、状態の置き場所です。案件では、状態を性質ごとに分けて考えられるかが見られます。

以前は、すべてのデータを一つの大きな状態管理の仕組みに入れる設計がよく見られました。現在は、サーバーのデータを専用の仕組みで扱い、残りを小さく保つ構成も広く使われています。古い設計のコードを、新しい考え方へ少しずつ移した経験は、運用中のサービスの案件で評価されます。

useEffectの使いどころ

useEffectを、データの変換や、ほかの状態から計算できる値の更新にまで使ってしまうと、余計な再描画や不具合の原因になります。外部とのやり取りに使う場面と、使わずに済ませる場面を区別できるかは、面談のコードの話でよく確かめられる部分です。

Next.jsなどのフレームワークの理解

React公式のバージョン一覧によると、React 19は2024年12月にリリースされ、2026年10月時点の最新は19.3（2026年9月9日リリース）です。新しい開発では、ReactをNext.jsなどのフレームワークと組み合わせて使うことが多く、サーバーで描画する部分とブラウザで動かす部分をどう分けるかが設計の中心になります。

Next.jsの公式のサポート方針では、最新のメジャー版がActive LTS、一つ前の版がMaintenance LTSとして扱われ、2026年10月時点で16.xがActive LTS、15.xがMaintenance LTSとされています。15.xのセキュリティ修正は2027年1月31日まで続くと案内されています。14.x以前はサポート対象外です。

このため、Next.jsの案件では、新しい版での開発経験に加えて、古い版や古いルーティングの方式から移行した経験も求められることがあります。

• サーバーで描画する部分とブラウザで動かす部分を、どの基準で分けたか
• データの取得とキャッシュの方針をどう決めたか
• 版を上げるときに、動かなくなった部分をどう洗い出したか

品質を支える知識

テスト

コンポーネントの単体テスト、利用者の操作に近い形で確かめるテスト、ブラウザを動かして画面全体を確かめるテストを、目的に応じて使い分けられるかが見られます。すべてを画面全体のテストで確かめると、遅く、壊れやすくなります。どの層で何を確かめるかを決めた経験を話せるようにしておきましょう。テストの自動化を深めたい場合はテスト自動化エンジニアの案件で求められるスキルも参考になります。

表示の速さ

表示の速さの改善では、まず計測し、原因を特定してから直す流れが大切です。不要な再描画の削減、読み込むコードの分割、画像やフォントの扱い、サーバー側での描画の活用など、手段は多くあります。どの指標を見て、何を直し、どれだけ変わったかを説明できると、実務の経験として伝わります。

アクセシビリティ

キーボードだけで操作できるか、読み上げソフトで内容が伝わるか、色だけに頼った表示になっていないかなど、アクセシビリティへの配慮を求める案件も増えています。共通部品の段階で対応しておくと、画面全体の品質がそろいます。

スタイルとデザインとの連携

CSSの書き方は、CSS Modules、ユーティリティ型のCSS、CSS-in-JSなど、現場ごとに違います。特定の書き方に慣れていることより、チームの方針に合わせて、崩れにくいスタイルを書けるかが見られます。

デザインシステムやコンポーネントのカタログを作り、デザイナーと同じ名前で部品を呼べる状態を整えた経験は、画面の多いサービスで頼りにされます。Vue.jsの現場と共通する部分も多いため、比べたい場合はVue.jsの案件で求められるスキルもご覧ください。

スキルシートと面談での示し方

Reactのスキルは、「構成」「判断」「結果」で書くと伝わります。

• サーバーのデータを専用の仕組みに移し、画面ごとに重複していた取得処理と状態を整理した
• 共通コンポーネントにキーボード操作と読み上げへの対応を入れ、画面全体に広げた
• 表示の遅い画面を計測し、読み込みの分割と再描画の削減で改善した

面談では、画面を見せずに言葉で設計を説明する場面が多くあります。話す順番を決めておくと伝わりやすくなります。一般的な質問は面談でよく聞かれる質問と答え方、報酬との関係はReactエンジニアの報酬の記事、リモートの傾向はReactのリモート案件の記事で解説しています。

よくある質問

Next.jsの経験がないとReactの案件は難しいですか？

Next.jsを使わない案件もあり、Reactの経験だけで参画できる場合もあります。ただ、新しい開発ではNext.jsなどのフレームワークと組み合わせることが多いため、サーバーで描画する仕組みの基本を理解しておくと、応募できる案件が広がります。

状態管理のライブラリは何を覚えればよいですか？

特定のライブラリより、状態を性質ごとに分けて考える力が大切です。サーバーのデータを扱う仕組みと、画面をまたぐ状態を扱う仕組みをそれぞれ一つ使ったことがあれば、ほかのライブラリにも考え方を移しやすくなります。案件で使われているものは、応募前に確かめておきましょう。

テストを書いた経験が少ないと不利ですか？

テストの経験を条件にする案件もあります。経験が少ない場合でも、共通部品の単体テストを書いた、壊れやすい画面にテストを足した、といった小さな経験を具体的に書くと伝わります。どの層で何を確かめるべきかを説明できるようにしておくと、面談での評価につながります。