Angularインタビュー質問まとめ1～基礎知識（Angular v8+）編

2022-02-15 17:16:58

Angularは現在（2020年）でも年2回のメジャーリリースのペースで非常に早く更新されています。ネット上にはたくさんのインタビュー質問がありますが、その多くは古いバージョン、特にAngularJSのものです。最近Angularの面接質問を見ることが多いので、まとめておきます。 以下の内容は、Angular v8.0以降をベースとしています。 .

ちなみに、AnugularJSとも呼ばれるAngularの初期バージョンはjavascriptを使って開発されており、Angularと呼ばれる前の新しいバージョン、Angular2とも呼ばれるバージョンはtypescriptを使って開発されており、AngularとAngularJSは互換性がありません（もちろん2バージョンの統合ソリューションも存在します）。

<ブロッククオート

Angular v8+インタビューシリーズ

Angularインタビューの質問まとめ1 - 基礎編
Angularインタビュー概要2-コンポーネント/サービス
Angularインタビュー概要3 - ユニットテスト

Angular CLIについて
angularの依存性注入(DUI)について
angularのコンパイルについて、AOTとJITの違いについて
Angularの双方向バインディング
angularのモジュールについて
ディレクティブ（Directive）とは
PromiseとObservableの違い
Angularのパフォーマンスを向上させる場合
Angularのバージョンアップ方法

Angular CLIについて

Angular CLIは、Angular scaffoldingとも呼ばれ、プロジェクトやコンポーネントを素早く生成して効率化するためのフレームワークです。Angularのアプリ、コンポーネント、サービスなどを簡単に生成でき、パラメータを使ってニーズに合わせて作成することができます。Angularの開発には欠かせないツールです。
参考：https://cli.angular.io/

ng generate: 新しいコンポーネント、サービス、パイプ、クラス、など。
ng new: 新しいangularアプリ
ng update: angular本体と依存関係を更新する。
ng version: angular cliのグローバルバージョン、およびangular cli、angular codeなどのローカルバージョンを表示します。
ng add: サードパーティライブラリを追加する。1) npmをベースにしたnode_modulesをインストールし、2) 新しい依存関係が動作するように設定ファイルを自動的に変更する、という2つのことを行う。

angularの依存性注入（ディペンデンシーインジェクション）について

依存性注入はAngularに実装されたアプリケーションデザインパターンで、Angularのコアコンセプトの1つです。

依存関係は、アプリケーション内のさまざまなコンポーネントやディレクティブ（派生物）が必要とする可能性がある一連の機能を持つサービスです。Angularは、これらの依存関係をコンポーネントやディレクティブに注入するためのスムーズなメカニズムを提供します。したがって、私たちはアプリケーションのすべてのコンポーネントに注入できる依存関係を構築しているに過ぎません。

依存性注入を使用すると、次のような利点があります。

インスタンス化（新規インスタンス作成）が不要になる。クラスのコンストラクタでどのパラメータが必要かを気にする必要がない。
1回のインジェクション（プロバイダ経由のアプリモジュール）で、すべてのコンポーネントを使用することができます。また、同じサービスインスタンス（Singleton）を使用するため、サービス内のデータを共有し、コンポーネント間のデータの受け渡しに使用することができます。

angularのコンパイルについて、AOTとJITの違いについて

すべてのAngularアプリケーションには、ブラウザが理解できないコンポーネントやテンプレートが含まれています。そのため、すべてのAngularアプリケーションは、ブラウザ内で実行する前にコンパイルする必要があります。

Angularには2つのコンパイルタイプがあります。

JIT (ジャストインタイム) コンパイル
AOT (Ahead-of-Time)コンパイル

JITコンパイルでは、実行時にブラウザ内でアプリケーションがコンパイルされるのに対し、AOTコンパイルでは、ビルド時にアプリケーションがコンパイルされるという違いがあります。
明らかに、AOTコンパイルには多くの利点があり、それゆえAngularのデフォルトのコンパイル方法となっています。主な利点

ブラウザ内で実行する前にアプリケーションがコンパイルされるため、ブラウザは実行可能なコードを読み込んですぐにアプリケーションをレンダリングし、結果としてレンダリング速度が向上します。
AOTコンパイルでは、コンパイラが外部のHTMLとCSSファイルをアプリケーションと一緒に送信するため、それらのソースファイルに対する個別のAJAXリクエストがなくなり、AJAXリクエストを減らすことができます。
開発者はビルドの段階でエラーを検出し、処理することができるため、エラーを最小限に抑えることができます。
AOTコンパイラは、ブラウザで実行される前に、JSファイルにHTMLとテンプレートを追加します。その結果、読み込むべき余分な HTML ファイルがなくなり、アプリケーションのセキュリティが向上します。

Angularの双方向バインディング

Angularの双方向バインディングの仕組み

Angularの双方向バインディングは、Dirtyチェックで実装されています。

ダーティバリュー検出の基本原理は、古い値を保存し、検出が行われる現在の瞬間に新しい値と古い値を比較することです。両者が等しい場合は変化がなく、等しくない場合は変化が検出され、ビューを更新する必要があります。
setTimeout, addEventListener, promise などは ngZone で実行され（つまり zone.js パッケージで上書きされる）、angular と ngZone で対応するフックを設定し、angular2 に通知して DOM を更新することになります。

Angularの双方向バインディングの効率性の問題

バインドするDOM要素の数が非常に多い（数百、数千）ページでは、効率の問題が必ず発生します。(PCやブラウザの性能にも依存します）。また、10回以上（経験値？）ダーティチェックを行うと、プログラムに不具合があると判断され、それ以上のチェックは行われません。
これは、以下のようにすることで回避できます。

表示のみに使用されるデータには、双方向バインディングではなく、一方向バインディングを使用する。
Angularのデータフローはトップダウンで、親コンポーネントから子コンポーネントへの一方向の流れになっています。一方向のデータフローは、効率的で予測可能な変更検出を保証します。したがって、コンポーネント化はパフォーマンスを向上させる手段でもあるのです。
式（および式から呼び出される関数）には、あまり複雑すぎないロジックを書きます。
長すぎるパイプを接続しない（パイプをトラバースして新しい配列を生成することが多い、パイプはanglarJS（v1）ではフィルタと呼ばれる）。
NgForはtrackBy式と一緒に使用する必要があります。さもなければ、NgFor は各ダーティな値検出の間にリスト内のすべてのアイテムで更新 DOM 操作を実行します。

Angularのデータバインディングの3つの方法


Name {
{item.name}}  
Classes {
{item | classPipe}}
Classes {
{classes(item)}}

直接バインドする。ほとんどの場合、これが最適な実行方法です。
結果的にバインドメソッド呼び出しダーティな値を検出するたびに、クラス方程式が一度だけ呼び出されます。特別な必要性がない場合、この使用法は絶対に避けるべきです。
パイプ方式。バインディング関数と同様で、ダーティな値を検出するたびにclassPipeが呼び出されます。しかし、Angularはキャッシュを追加し、最後のアイテムと等しい場合は結果を直接返すことで、パイプを最適化しています。

その他の最適化のヒントについては、以下を参照してください。 Angularバインディングのパフォーマンス最適化のヒント(ダーティチェック)

angularのモジュールについて

angularモジュールとは

モジュールとは、コンポーネント、サービス、パイプをグループ化する場所です。モジュールは、他のモジュールがコンポーネントやディレクティブなどを使用できるかどうかを、これらの要素をエクスポートしたり隠したりすることで決定します。各モジュールは @NgModule デコレータを使用して定義されます。

Root ModuleとFeature Moduleの違いについて。

Angularアプリケーションは1つのルートモジュールしか持つことができませんが、1つまたは複数のフィーチャーモジュールを持つことができます。ルートモジュールはBrowserModuleをインポートし、フィーチャーモジュールはCommonModuleをインポートしています。

モジュールのレイジーローディング(Lazy-loading)

プロジェクトが大規模になった場合、最初の画面の読み込み速度を向上させるために、特定のURLにアクセスしたときだけ、使用頻度の低い機能モジュールを読み込むレイジーローディングを使用することができます。

実装方法普通に機能モジュールを作成し、ルーティングの設定を変更する。例

const routes: Routes = [
  {
    path: 'customers',
    loadChildren: () => import('. /customers/customers.module').then(m => m.CustomersModule)
  }
];

この方法では、コンパイル後、機能モジュールはスタンドアロンなjsとなり、ユーザーがURL（~/customers）にアクセスしたときのみサーバーサイドからリクエストされ、ロードされて実行されることになります。

https://angular.io/guide/lazy-loading-ngmodules を参照してください。

ディレクティブ（指示文）とは

ディレクティブは、既存の要素 (DOM) やコンポーネント (Component) に動作を追加するために使用します。
また、1つの要素やコンポーネントに複数のディレクティブを適用することができます。

PromiseとObservableの違い

まず、anuglarの新バージョンでは、（RxJSに属する）Observableを使うことが推奨されています。次に、Observableオブジェクトに対して、.toPromise()を使ってPromiseオブジェクトに変換することが可能です。

promiseはthenが呼ばれたかどうか。promiseは即座に実行され、Observablesは作成されるだけで、呼ばれたら実行される（subscribe）。
Promiseは値を返し、Observableは0からN個の値を返す。つまり、Promiseに相当する演算子は.then()で、Observableに相当する演算子は.subscribeです。
map、filter、reduce などの演算子を追加でサポートする Observable。
Observableはキャンセル可能、Promiseは不可

Angularのパフォーマンスを向上させれば

AngularもやはりWebアプリケーションなので、Webのパフォーマンスを向上させるための一般的なヒントは汎用的です。また、Angularに特化した最適化のヒントもあります。

AOTコンパイル。前述したようにクライアント側でコンパイルしてはいけません
アプリケーションは最小化されています（uglifyとツリーシェイク）。
不要なimport文を削除します。残っている場合は、パッケージング時に入力することになります。
使用しないサードパーティライブラリがアプリケーションから削除されていることを確認する。上記と同じ。
大規模なプロジェクトでは、ホームページの読み込みを早くするためにレイジーローディングを検討してください。

Angularのバージョンアップ方法

Angular CLIではアップグレードコマンド（ng update）が提供されており、また公式サイト（https://update.angular.io/）にはアップグレードガイドが掲載されています。どのバージョンからアップグレードするかを選択すると、ステップバイステップのアップグレードコマンドが提供されるので、そのまま実行すればOKです。