想定すべきAngular面接の質問

文責 Aaron Cao · 更新

想定すべきAngular面接の質問
まず聞かれるのは変更検知です:何が検知をトリガーするか、OnPushで何が変わるか、シグナルがどう関係するか。次に依存性注入、RxJSの演算子選び、購読のクリーンアップです。多くの面接ではライブ演習も加わり、たいていはservice、debounceTime、switchMapを使ったオートコンプリート検索を作ります。

まず聞かれるのは変更検知です:何が検知をトリガーするか、OnPushで何が変わるか、シグナルがどう関係するか。次に依存性注入、RxJSの演算子選び、購読のクリーンアップです。多くの面接ではライブ演習も加わり、たいていはservice、debounceTime、switchMapを使ったオートコンプリート検索を作ります。

最もよく聞かれるAngularの概念は?

AngularのAPIは範囲が広く、公開されている質問リストはすべてのデコレーターが同じ確率で出題されるかのように扱いがちです。しかし実際はそうではありません。このセクションでは、実際に多くの面接の結果を左右する領域を扱うため、練習が本当の出題分布に合うようになります。主に四つの領域が中心です:

  • 変更検知:何が検知をトリガーするか、Zone.jsが非同期APIにどうパッチを当てるか、OnPushで何が変わるか、そしてシグナルがどのようにAngularに作業をスキップさせるか。
  • 依存性注入:階層的なインジェクター、providedIn、インジェクショントークン、そしてコンストラクター引数に対するinject()関数。
  • RxJS:ObservableとPromiseの違い、適切な演算子の選び方、そしてコンポーネントが破棄される前の購読のクリーンアップ。
  • コンポーネント設計:スタンドアロンコンポーネント、入力と出力、コンテンツプロジェクション、そしてライフサイクルフック。

バージョンへの意識は、他の多くのフレームワークの面接よりもここでは重要です。Angularが方向転換したからです。スタンドアロンコンポーネント、組み込みの制御フローブロックである@if@for、遅延ビュー、そしてシグナルはすべて最近のメジャーバージョンで登場したため、面接官は今ならどう書くかを、古いコードベースの書き方と対比してよく尋ねます。両方を知り、なぜフレームワークが移行したのかを説明できることは、どちらか一方に肩入れするより評価されます。

RxJSとシグナルの質問はどこまで深く聞かれる?

演算子の名前より深いところまで聞かれます。レベルを分けるRxJSの質問は、どのフラット化演算子が適切かというものです:switchMapは直前の内部リクエストをキャンセルするのでオートコンプリートに向き、mergeMapはすべてを並行して実行し、concatMapは順序を保ち、exhaustMapは処理中に新しいイベントを無視するため送信ボタンに向いています。次に面接官は漏れの質問をします:コンポーネントが破棄されたとき、手動の購読はどうなるか、そしてなぜasync pipeやtakeUntilDestroyedがこの問題を解消するのか。

シグナルの質問はより新しく、たいていAPIそのものではなく、その動機から始まります。シグナルとは何か、computedがそこからどう値を導くか、effectが何のためにあるか、そしてなぜシグナルがコンポーネントツリーを再チェックするよりも細かい粒度で変化を把握できるのかを説明できるようにしておきましょう。良い回答は二つのトピックを結びつけます:シグナルとOnPushはどちらも変更検知の作業を減らしますが、シグナルはチェックが走るタイミングを絞るのではなく、読み取りを追跡することでそれを行います。

面接官は、あなたが最近の機能をすべて実務で使ったことを期待しているわけではありません。最後にどのバージョンで作業したかを説明し、それ以外については筋道立てて考えられることを期待しています。

どんなライブコーディング演習を想定すべき?

多くのAngularの面接では、面接官が見ている前で何か小さなものを作ります。繰り返し出てくる演習は、会社が変わっても大きくは変わりません:

  • serviceからAPIを呼び出し、async pipeで結果を表示する。
  • debounceTimedistinctUntilChangedswitchMapを使ってオートコンプリート検索を作る。
  • カスタムバリデーターと表示可能なエラー状態を持つリアクティブフォームを書く。
  • 親子コンポーネント間でデータを受け渡し、それをserviceに引き上げる。
  • 遅延読み込みコンポーネントとガードを持つルートを追加する。

たとえば、ミッドレベルのプロダクト職に応募しているフロントエンドエンジニアなら、まずオートコンプリートを作り、その後レスポンスが順不同で届いたらどうするか、ローディング状態をどう表示するか、ユーザーが入力をクリアしたときに何が起きるべきかを突っ込まれるかもしれません。そうした発展的な質問こそが合否を分けるため、順調なケースだけでなく、こうした追加質問の練習をしておきましょう。Angularの面接では、素のJavaScriptやTypeScriptの基礎など、隣接する出題セットで始まることも今なお多く、それらは質問集ハブにまとまっています。

実際の本番で通用するように練習するには?

質問リストを読むことで身につくのは再認であって想起ではありません。しかし面接で試されるのは、人に見られながらの想起です。対策は、面接と同じ形での反復練習です:空のプロジェクトから定番の演習を組み立て、タイピングしながら変更検知や購読の判断を声に出して説明し、中断されても話の筋を見失わないようにします。一問ずつ、フォローアップ付きで、声に出したリハーサルとしてセット全体を通しで行うのが、模擬面接の練習の目的です。

はっきり言っておくべき制約が一つあります。Angularのライブラウンドはほぼ常に共有エディター上、あるいは画面が見える状態で行われ、その画面に映るものはすべて面接官に見えます。アシスタントは準備の場面や会話中心の面接には向いていますが、共有画面の上には向いていません。どの形式で何が許されるかは面接の種類にまとめています。

よくある質問

NgModulesはまだ知っておく必要がありますか?

読んで理解できるレベルでは必要です。実務のAngularの多くは今もNgModulesの上で動いているため、モジュールが何を宣言していたか、providedInがほとんどのprovider配列をどう置き換えたかを聞かれます。新しいコードについての質問はスタンドアロンコンポーネントを前提に聞かれ、これは最近のバージョンでの既定です。

AngularJSとAngularは同じものですか?

いいえ、面接官が確認してくることもあります。AngularJSはスコープ、ダイジェストサイクル、コントローラーを持つ1.x系です。バージョン2以降のAngularはTypeScriptとコンポーネントの上に構築された別のフレームワークです。求人票にAngularJSと書かれていたら、準備を始める前にどちらを指しているのか確認しましょう。

チームがシグナルを使っている場合、RxJSはどれくらい必要ですか?

それでも多く必要です。シグナルはコンポーネントの状態をうまくカバーしますが、HTTP呼び出し、ルーターイベント、フォームの値のストリームはObservableのままなので、演算子の選択やクリーンアップは引き続き出てきます。多くのチームは両方を併用しており、それぞれがどこに向くかを説明できることはよくあるシニア向けの質問です。

面接官はテストについて質問しますか?

たいていはAPIの暗記ではなく、戦略として聞かれます。コンポーネントレベルで何をテストするか、それをend to endと対比してどう考えるか、TestBedがどのようにコンポーネントを組み立てるか、serviceをどう偽装するかを想定しておきましょう。マッチャーを暗唱するより、トレードオフを言葉にできることの方が重要です。

Angularのどのバージョンについて話せる必要がありますか?

自分が実際に使っていたバージョンと、それ以降に何が変わったかです。面接官がスタンドアロンコンポーネント、制御フローブロック、シグナルについて尋ねるのは、その答えが最新性を示すからです。最後にどのバージョンで本番運用したかを述べ、残りについて筋道立てて考えられれば、それで十分な回答になります。

関連する質問

← 詳しく見る: 職種・トピック別の面接質問