Reactの技術質問！！これで面接を圧倒すべし！
最近フロントエンドの副業案件の面接を受けていて、聞かれた技術質問や準備しておいた方が良い質問をまとめます。(実務経験 約2年)
今回何回か面接をしましたが、正直技術質問って普段普通に実装していてもそれを言語化して答えるのって結構難しいです。
面接はコミュ力ではなくて準備力です！
しっかり準備して挑みましょう！
前提
面接を受けたときのスキル感は下記です。
フロントエンドが主戦場で、api周りはNode.jsで基本的なApiであれば対応可能。
インフラはそこまで経験なしといった感じです。
応募ポジション: フロントエンドエンジニア
応募先のフロントエンドスタック: Next.js, TypeScript
実務経験: 1年8ヶ月
言語、フレームワークの実務経験年数
Nuxt.js(Vue) ... 1年8ヶ月
Next.js(React) ... 半年(個人開発では2年触っている)
TypeScript ... 1年8ヶ月
HTML, CSS ... 1年8ヶ月
Express ... 1年
聞かれた質問や準備しておいた質問
今回2社面談を受けて、されたざっくりな技術質問です。
パフォーマンスの観点で気をつけていることはなんですか？
- memoやuseCallback等の再レンダリングの観点
- 無駄なfetchが行われていないか
- そもそものapi設計部分
- サービスのコアになるページに関してはlogを仕込んで再レンダリング等を確認
SSR, SGに関して使用したことはありますか？
これは鉄板で聞かれた内容で、一番良いのはmicroCMS等を使ってSGでデータを取得し、デプロイした経験があります！とか言えれば理想
あとは、サーバーサイド側を考慮したcookieの処理やlocalStorageで起きたエラー体験などを話せるとよいかも
普段apiでデータを取得する際どのように取得していますか？
現在であれば、SWRやReact Queryでキャッシュを利用していると言えれば一番良いかも。
経験がない場合は、現状は実務ではuseEffect等でloadingのstateを定義して取得してるが、次もし自分が設計するとしたら、コード量や不要なfetchを減らせる観点から、SWRやReact Queryを導入します等の個人的な意見を言えれば○
Component設計はどのように意識していますか？
普段意識していることを言えば○
自分の場合、以前までatomic designを採用していたが、最近はやめた。
理由としてはpropsのバケツリレーが辛い部分があるのと、ここまで再利用しないコンポーネントまで分離する必要はないと感じた為。
現在は使い回すcomponentのみcomponents配下に、使いまわさないcomponentはpages配下にまとめるようにしていると回答した。
Reduxはどのようにstateを管理しているか説明してください
ユーザーがイベントを発生させるとactionを作成する。
actionをdispatch(送信)しReducerが受け取ったactionと現在のstateの状態を見て、store内のstateを更新している
これに関しては、いきなり聞かれたら中々答えられなそうなので暗記しましょう○
Recoilはどのようにstateを管理しているか説明してください
Atomとselectorという概念があり、Atomで状態を管理する。
component内からはどこからでもAtomにアクセスすることができるのでglobalに状態を管理できる。
SelectorはAtomを元に新たな状態を作ったりすることができる
useContextに関してどのように考えていますか？
基本的に中規模以上のアプリケーションでは使用しない。
理由としては、Contextを更新する際に不要な再レンダリングが起きてしまうため。
対処法もあるが、記述量が多くなる為、状態管理ライブラリーを入れた方が楽に管理できると判断している。
バックエンドの開発はできますか？
素直に答えましょう！
基本的なapiの実装はできます。
ただ複雑なDB設計やインフラ周りの設計は経験がありません、概念は理解しているのでapi設計やバックエンド側とのやり取りで問題はありません！みたいな感じで答えた気がします。
ossのバグを見つけプルリクを投げたりした経験はありますか？
素直に答えましょう！
これに関してはあったら加点かと！！
自分はないです！
サイトの表示速度が遅いときどうしますか？
まずはどこが原因になっているのかを調査する。
不要なレンダリングが起きているのか？SQLのパフォーマンスが悪いのか？そもそもapi設計が悪いのか？
原因が分かってから改善する。
これが正解の答えかはわからないがこんな感じで回答
Next.jsを使うメリットとデメリットは？
メリット ... ルーターやwebpack等Next.jsがいい感じに行ってくれるので、その辺を考えずに実装できる。ssrやsgの実装が容易
デメリット ... サーバーサイド側も考慮しなければいけないので、Reactでは出ないエラーが出たり、Reactでは動くライブラリーがエラーになるようなこともある。(cookieとかlocalStorage周りとか)
React hooksのメリットについて説明してください
関数コンポーネントで状態を管理できるようになったので、class componentの複雑な記述を減らせる。
カスタムフックを使用し、viewとロジックを分離しやすくなった
useRefの値をuseEffectの配列に入れるとどうなる？？
なにも起きない
useRefは更新されない
フロントエンド設計に関して意識していることはありますか？
普段意識していることを言えば○
自分の場合、フロントエンドの場合、DDDやクリーンアーキテクチャほどではないが、ディレクトリ毎に責務をはっきりとさせ、外側の影響を受けづらいように設計を意識している等を話した。
またapiやrouting等をハードコーディングせず、保守性を保つ観点等も話した。
再レンダリングが起きる条件を教えてください
- propsが更新されたとき
- stateが更新されたとき
- 親componentが再レンダリングされたとき
Cssはなにを選定しますか？また好みはなんですか？
個人的にはCss modulesが好み。
UIフレームワーク等はデザイン性が要求されない小規模プロジェクトであればあり。
選定するとしたら、
分業制をしていない少人数開発 ... Css modulesを採用、バックエンドエンジニアがcss in js等をキャッチアップするのがしんどいので、生のcssに近い方がキャッチアップがしやすそうなため
分業制の場合 ... チームの方針によってはcss in jsを使用しても良いと思うが、パフォーマンス的にはCss modulesの方が良いので、チームで問題がなければcss modulesを採用する
この辺は自分の意見が言えれば問題ないかと
sassは使えますか？またcssを書くときに意識していることはありますか？
使えないは論外です、、、
自信持って使えると言いましょう。
意識していることは、不要なCssを書かないことです。
ほとんどのプロジェクトには不要なcssが書かれています。仮にコードを少しコメントアウトしても表示が全く変わらないというプロジェクトもざらにあります。
私は絶対不要なcssは書きません(ここまで言い切ると高感度アップな気がした)
あとはCssの記述する順番をルール化するとか
TypeScriptを使用するにあたって意識していることはなんですか？
- anyは禁止
- enum型よりユニオン型を使うようにする
- コードがドキュメントになるように書く
- ESLintのルールを厳格にする
等答えた
アクセシビリティに関して意識していることはありますか？
- まずは基本的な適切なタグを使う、スクリーンリーダを使うと見出しの部分は目次等にしてくれるものもあるのでそのあたりも意識する(事前に調べてたからこれ答えれましたが、結構反応よさそうでした)
- 適さないタグを仕方なく使う場合、必ずroleやarealavelを使用する(apiで受け取った画像urlをdivタグのbackground-imageで表示する際など)
- altやrole, label, arealabel等は当然のように使う
- どんな人でも平等に同じようにwebサイトを閲覧できるように意識している
- ESLintでアクセシビリティのルールを入れてチーム全体に意識を保つ
Jamstackとは何か説明してください
JavaScript, api, Markupからとっている由来
Next.jsのSGなどの機能を使って、JavaScriptとApiを使ってサーバーレスでフロントエンドに集中して実装することができる等がメリット
パフォーマンスとセキュリティの観点から見ても良い。
ブログ等のリアルタイム性が求められないプロダクトに向いている、チャット等のリアルタイムせいが必要なアプリケーションには向いていない
useEffectを使う際に注意しなければいけないことをできるだけ多く教えてください
- stateを関しして、無限ループが起きないようにする
- クリーンアップの処理を忘れないようにする
あたりを答えたがこれに関しては、できるだけ多くその場で言えると良さそう
みなさん技術面談はぶっつけ本番だといきなり言語化するのが難しい場合もあるので、しっかり準備していどみましょう！
全ての項目が正しい回答かわかりませんが、これから面接がある方のご参考になれば！
Discussion