Angularスタンドアロン・コンポーネントを徹底解説！ - インフラジスティックス・ジャパン株式会社Blog

開発プロセスの変更と強化に関して、あらゆる手段を講じるフレームワークが 1 つあるとすれば、それは Angular フレームワークです。Angular 16.0.0 リリースでは、ツール、サーバーサイドレンダリング、リアクティブなどに大きな進歩が加えられています。開発者コミュニティにとって、AngularスタンドアロンAPIの導入は多大なるメリットをもたらします。特に「Schematics for Standalone Components」と呼ばれる新機能についてはチェックしてください。これは、再利用可能なUI要素とライブラリを構築する能力を刷新すると同時に、定型モジュールを排除しています。この特徴が、Angular 16.0.0 バージョンの最大の改善点の1つです。

そして、この特徴はゲーム性を大きく変えるほどの影響力があると私たちは考えています。

今日のクイックガイドでは「Angular のスタンドアロン・コンポーネント」をもっと深く掘り下げてスタンドアロン・コンポーネントの概念が最初に提示された「Angular 14 以降に何が変わったのか？」をよりよく理解しましょう。

Angularのスタンドアロンコンポーネントとは？「NgModules」モジュールが不要になります！
Angular スタンドアロン・コンポーネントのメリットとは？
Angular スタンドアロン・コンポーネントの作成方法を知ろう！
- 1. 作成前のバージョン確認
- 2. 使用するうえでの２つのポイント
インフラジスティックスの「Ignite UI for Angular」でのスタンドアロン・コンポーネントの使用方法
Angular スタンドアロン・コンポーネントのベストプラクティス
結論として...

Angularのスタンドアロンコンポーネントとは？「NgModules」モジュールが不要になります！

最大の特徴はスタンドアロン・コンポーネントを使用すると、モジュールを使用せずにAngularアプリケーションを構築できることです。特定のモジュールに縛られていないため、アプリケーションのどの部分でも使用できます。つまり、スタンドアロンクラスを「NgModule」を使って宣言する必要がないため、定型コード量を削減することができます。

Angular では、少なくとも新規作成するコンポーネントについては、常にスタンドアロン・コンポーネントを使用することを推奨します。もちろん、スタンドアロンのコンポーネントとモジュールを混在させることや、既存のコンポーネントをモジュール化していること自体が、悪い決定ではありません。

「Angular 14」では、スタンドアロン・コンポーネントのアイデアがスタンドアロンAPIとともに導入されました。これらは、どのモジュールにも属さず、他のコンポーネント内にネストされることなく独立して使用できるタイプのコンポーネントを参照していました。対照的に、Angular 14以前にコンポーネントを作成する場合は、モジュールの宣言配列内に渡す必要があります。

コンセプトが変わり始め、開発プロセスが徐々に進化しました！

たとえば、公式のAngularドキュメントでは、「スタンドアロン・コンポーネント、ディレクティブ、およびパイプは、NgModuleの必要性を減らすこと」で直感的なコーディングプロセスを合理化することを目的としています。

また、合理化に向けてのアプローチに関しても、既存のアプリケーションに対して大規模な修正を行う必要なく、まずはオプションとして「新しいスタンドアロン・スタイルを段階的に採用」していくことができるようになったのです。

つまり、「Angular 16」では「単純化」しています！

「Angular 16」では、「Schematics for Standalone Components」と呼ばれる新機能と、自己完結型、モジュール式、再利用可能に設計されたスタンドアロン・コンポーネントが正式に取得されました。

しかし、なぜ Angular でスタンドアロン・コンポーネントを使用した方が良いのでしょうか？NgModulesの使用を完全に置き換えるわけではありませんが、モジュール式で再利用可能なコードを作成する場合に、新しい選択しとしてスタンドアロン・コンポーネントを活用できるようになります。それにより「Angular アプリの保守性」と「テスト容易性」が向上し、プロジェクト構造も損なわれないメリットがあります。

これはとても素晴らしい選択肢です！

繰り返しになりますが、Angularのスタンドアロンコンポーネントは、NgModulesの代替として、これから推奨される選択肢のひとつです。他にも多くのメリットがありますので、見ていきましょう。

Angular スタンドアロン・コンポーネントのメリットとは？

Angularでスタンドアロン・コンポーネントを推奨する理由はいくつかあります。

クラスに付随する余分なコードを効果的に排除できる軽量ソリューションです。
14以前のはるかに重いクラスベースのAPIと比較して、より機能的なAPIに刷新。
「NgModule」モジュールなしでコンポーネントを直接遅延ロードできます。
機能をカプセル化し、他のコンポーネントで潜在的なバグ発生を抑制し、アプリ全体でコードの再利用性を促進する機能が付属しています。
スタンドアロン・コンポーネントを使用してアプリケーションをブートストラップできるため、「AppModule」はもう必要ありません。
スタンドアロン・コンポーネントでのルーティングは、より改善され、ルーティングされたコンポーネントまたはルート構成を直接指し示すことができます。
その他のスタンドアロン・コンポーネント、ディレクティブ、パイプ、および既存の「NgModule」も簡単にインポートすることができます。
各コンポーネントには独自のファイル(テンプレート、スタイル、TypeScript コード)があり、コード構造が大幅に向上します。
将来的な再利用性を念頭に置いてコンポーネントを設計し、新しい機能の追加や既存の機能の拡張を簡単に行うことができます。
Angular スタンドアロン・コンポーネントごとに個別に単体テストを記述できます。これによりテスト容易性が向上します。

Angular スタンドアロン・コンポーネントの作成方法を知ろう！

1. 作成前のバージョン確認

最初のスタンドアロン・コンポーネントのサンプル作成は非常に簡単で、--standaloneフラグを使用して行います。ただし、はじめに「Angular 16」を使用していることを確認してください。

2. 使用するうえでの２つのポイント

スタンドアロンコンポーネントは、次の 2 つの方法で使用できます。

①別のスタンドアロン・コンポーネントの「imports プロパティ」に渡す方法
②または、モジュール内で「imports 配列」に渡す方法

インフラジスティックスの「Ignite UI for Angular」でのスタンドアロン・コンポーネントの使用方法

インフラジスティックスの「Ignite UI for Angular 16.0」以降では、スタンドアロン・コンポーネントに必要なインポートを「imports プロパティ」に簡単に追加することができます。

次の例ではIGX_GRID_DIRECTIVESグリッド関連のすべてのコンポーネントとディレクティブをインポートできます。Ignite UI for Angular でスタンドアロン・コンポーネントを作成する方法は次のとおりです。

import {IGX_GRID_DIRECTIVES} from 'igniteui-angular';
@Component({
  selector: 'app-grid-sample',
  styleUrls: ['grid.sample.scss'],
  templateUrl: 'grid.sample.html',
  standalone: true,
  imports: [IGX_GRID_DIRECTIVES, AsyncPipe]
})

また、スタンドアロン・コンポーネントで使用されるすべてのコンポーネントを個別にインポートすることもできます。「IgxGridComponent」と「IgxColumnComponent」の 2 つだけを別のコンポーネントで使用する場合の例を次に示します。

import {IgxGridComponent, IgxColumnComponent} from 'igniteui-angular';
@Component({
  selector: 'app-grid-sample',
  styleUrls: ['grid.sample.scss'],
  templateUrl: 'grid.sample.html',
  standalone: true,
  imports: [IgxGridComponent, IgxColumnComponent, AsyncPipe]
})

すべての Ignite UI for Angular コンポーネントがスタンドアロン・コンポーネントとしてエクスポートされるようになりました。ライブラリは、下位互換性のために保持されている NgModule を引き続きエクスポートしますが、Ignite UI for Angular コンポーネントを宣言しなくなりました。

代わりに、スタンドアロン・コンポーネントをインポートおよびエクスポートするだけです。スタンドアロン・コンポーネントはまだプレビュー段階にあることに注意することが重要です。一部のユーティリティディレクティブのエクスポートは将来変更される可能性があり、初期リリースのドキュメントに含まれていない可能性があるため、機能のプレビュー状態になります。

Angular スタンドアロン・コンポーネントのベストプラクティス

Angular スタンドアロン・コンポーネントを使用する場合、いくつかのベストプラクティスに従って、クリーンで保守性が高く再利用可能なコードを確保できます。

プロジェクトとコードのサイズを考慮する

最初のステップとして、プロジェクトのサイズとコードの構成方法を検討します。すべてのコンポーネントをスタンドアロン・コンポーネントへの移行する際に、大規模なシステム修正が必要ないことがわかります。ただし、アプリケーションにいくつかの大きなバグが発生する可能性もゼロではありません。また、すべてのコードをスタンドアロン・コンポーネントに移行したくない場合も出てくると思います。

したがって、プロジェクトのサイズが中規模から大規模の場合、スタンドアロン・コンポーネントへの移行はゆっくりと開始していくことをお勧めします。徐々に移行を進めて、最終的にはすべてのSCAM(Single Component Angular Module)を移行することです。SCAM では、NgModule は 1 つのコンポーネントのみを宣言します。徐々にスタンドアロン・コンポーネントの作成方法と操作方法に慣れて行きましょう。

パイプとディレクティブの移行

もう 1 つの良い方法は、すべてのパイプとディレクティブをスタンドアロン・コンポーネントに移行することです。これにより、一部のモジュールを簡略化および削減することができます。

コードの調整と継続的な改善

その後、定期的なコードリファクタリング中にコードベースを調整し、継続的に時間かけて改善していきましょう。企業規模のプロジェクトでは、スタンドアロン・コンポーネントへの移行は大掛かりな作業になるからです。これにより、リグレッションが発生しないようにしながら、十分にテストしながら移行を進めるすることができます。