フロントエンドエンジニア(React)の技術質問

What is this 記事？

この記事は、Webフロントエンドエンジニア(React)として働いてきた私が今まで受けてきた面接での技術質問と受け答えをまとめていくものです。Vueの人は置き換えて読んでみてください。
色々質問はあったが多く聞かれたものをまとめています。
指摘などありましたらコメントください。

質問集(基本編)

・React Hooksはどのような問題を解決しているのか？

複雑になりがちなクラスコンポーネントを減らせる。
また、フックを使えば、ステートを持ったロジックを、コンポーネントの階層構造を変えることなしに利用できるため、多数のコンポーネント間でステートを共有することが簡単になる。

参考: React公式

・Reduxとは何か？Reduxではどう状態管理をしているのか？Reduxを使うメリットとデメリットは何か？

Reduxは状態管理のライブラリである。とくに状態管理が複雑になりがちな中規模以降のプロジェクトで採用することで、フロントの状態管理を容易にしてくれる。
Reduxで状態管理するには、まずActionを生成する。ActionをDispatchし、そのActionをもとにReducerがStore内のStateを更新しアプリに反映させる。
Reduxを使うデメリットは使わない場合と比べて、コード量が増える。また、何も考えずに使い続けると、storeが肥大化してしまうことがある。

参考: ReactとReduxで管理するstateの分け方

・Context APIとは何か？Reduxとはどう使い分けるか？Reduxと比較した場合のメリットとデメリットは何か？

Context APIはpropsでのバケツリレーを回避するために存在している。一方Reduxはとくに中規模以降PJでの複雑な状態管理の難しさを、容易にしてくれる。
ContextAPIのデメリットは対策をしなければ、不要なレンダリングが起こってしまう。

参考: https://qiita.com/soarflat/items/b154adc768bb2d71af21

・Vueでは状態管理をどうするか？

provide/injectを使う。または、propsと$emitで親子でデータを共有する。

・最近気になっているReact/ NextJSの新技術は何か？

React Server Componentsの将来性や、NextJS12ではコンパイラがRust製になったこと、ミドルウェアが導入されたことなど。どのトピックを選ぶかと言うよりは、日々情報を収集しており、それを筋道立てて話せるかと言うことを見られている気がした。

・他フレームワークと比較したReactの特徴とは何か？

Vueと比較して、世界的シェアが大きい。
また、Vueと比較して、TypeScriptとの相性が良い。

・ユニットテストの経験はあるか？Enzyme,React Testing Libraryの違いの説明と、それぞれでできることの説明。

Enzymeではコンポーネント単体のユニットテストに適している一方、React Testing Libraryでは、ユーザーが実際に操作した時の挙動をテストしやすくなっている。

・NextJSを使うと何が良いか？SPA、SSG、SSRの違いの説明。

SSGとSSRが必要なプロジェクトでのメリットが大きい。
SPAでは、通信の結果必要となった差分情報を得てブラウザでHTMLを更新する。一方、SSRでは、通信の結果サーバーがHTMLを返し、ブラウザで表示する。また、SSGは、アプリをビルドするタイミングでレンダリングを行い、各ページのHTMLを表示させる。

・JavaScriptとReactのコーディング課題を解かせる課題。

→ 単に解けばいいと言うだけでなく、洗練されたコーディングをする必要があり、その点で評価されそう(CodeWarsなども活用して、JavaScriptアルゴリズムの練習)。

応用編

・ReduxのStoreを例に、immutabilityについて説明する。

Redux のStoreは、immutableである。Store に格納されたデータは外部から直接変更されることは無く、常に新しく生成されたデータを置き換える形で更新される。

この記事がわかりやすかった。
https://qiita.com/TsutomuNakamura/items/a78514a61ede444bd074

・useRefで定義した変数を、useEffect内の依存配列に指定したとする。この場合、何が起きるか？

→何も起きない。(useRefの変数は、値変化してもuseEffectを実行しないため)

・ErrorBoundaryとは何か？ErrorBoundaryでエラーが捕捉されない箇所は？

以下のような場所では、エラーは捕捉されない。
・イベントハンドラ（詳細）
・非同期コード（例：setTimeout や requestAnimationFrame のコールバック）
・サーバサイドレンダリング
（子コンポーネントではなく）error boundary 自身がスローしたエラー

About Error Boundary

・純粋なCSSと比較して、styledComponentsなどのCSS in JSを使った場合パフォーマンスは高まるか？

CSS in JS よりも CSS Modules の方が、ロードタイム・ランタイムともに、パフォーマンス面で有利なことが知られている。styled Componentsを採用する場合は、パフォーマンス面で問題ないかもチームで検討した上で、採用した方がいい。

参考 (https://zenn.dev/takepepe/scraps/6668e9fe402666)

面接を受けてきた感想

面接で自分の知識不足が浮き彫りになることもありますが、分かったこととしては仕事で日々実装しているだけではダメで、知識を体系的にまとめてすぐに話せるようにしておくことが大事になってくると感じました。また、現場でただ仕事をするだけではReactの最新技術についてなど、答え辛いので日々技術に興味を持って自身でのキャッチアップが必要かなと感じました。
もしこの記事がいいなと思った方がいたらLGTMの方お願いします🙇🏼‍♂️ (励みになります)