Angularコンポーネントアーキテクチャが簡単に

JSが採用したアプローチAngular必ずしも問題はありませんでしたが、Angularが採用したコンポーネントベースのアーキテクチャは、さまざまなバックグラウンドを持つ開発者が簡単に理解し、適用できる非常に柔軟なパラダイムであることが証明されています。「コンポーネント」と「ユーザーコントロール」の類似性を認識すると、膨大な数の再利用と構成の機会、そしてそれらが提供する力が明らかになります。

この翻訳では、今すぐ無料でダウンロードできるInfragisticsの電子書籍「Angular Essentials」を除き、Angularコンポーネントアーキテクチャの概要と、最新のWeb用の複雑なアプリケーションを構築するためのプラットフォームで利用可能なさまざまな機能を紹介しています。

Angularアプリケーション構造

Angularは Componentsを多用しています。一般的なAngularアプリケーションは、ページのすべての部分を定義するコンポーネントで構成されています。コンポーネントはAngularモジュールに追加されます。

Angularアプリケーションは、コンポーネントのツリーと考えてください。これらのコンポーネントは相互にリンクされています。最上位のコンポーネントは、他のすべてのコンポーネントを含むルートコンポーネントで、Angularブートストラップがアプリケーションを起動するために使用されます。

以下は、Angularアプリケーションの一般的なコンポーネントツリーです。

 

Angularアプリケーションのコンポーネント ツリー構造

すべてのコンポーネントは、UI、画面、またはルートの自己完結型の一部です。コンポーネントは、ビューとそのビュー モデルの組み合わせです。サービスを使用してデータを取得し、そのデータをビューに表示します。

アプリケーションが複数のビューに分割され、現在のURLに基づいてビューをロードする必要がある場合は、各ルートがコンポーネントで処理されます。ルートは、ロードする必要があるときにこのコンポーネントを呼び出します。

Angularアプリケーションはモジュール式です。Angularは、いくつかの ES6 モジュールを使用してソース コードをモジュール化し、独自のモジュール システムを使用して関連するAngularブロックのセットをグループ化します。ES6モジュラーシステムの目的は、Angularモジュールシステムの目的とは異なることを理解することが重要です。

ES6モジュールシステムは、ソースファイルを可能な限り無駄なく保つのに役立ちます。各ファイルには、コンポーネント、ディレクティブ、サービス、またはその他のブロックが含まれています。これらのファイルは、exportキーワードを使用してオブジェクトをエクスポートし、importキーワードを使用して他のモジュールによってインポートされます。アプリケーションで使用されるサードパーティのライブラリも、ES6モジュールとしてロードされます。一方、Angularモジュールは、一連のAngularブロックをグループ化するために使用されます。これらのモジュールを使用すると、一連のブロックの機能に基づいてアプリケーションを複数のモジュールに分割できます。1 つのモジュールが他のモジュールにアクセスして、その機能を使用できます。

Angularでは、依存関係の挿入 (DI) を多用して、必要なオブジェクトを任意のコード ブロックに読み込みます。DI用の単一のAPIを提供し、複雑なアプリケーションに必要なすべての機能を備えています。モジュール性と DI の組み合わせにより、Angularコードの読み取りとテストがはるかにクリーンになります。

Angularアプリケーションは、いくつかのコンポーネント、サービス、ディレクティブ、パイプ、およびその他の部分を使用して構築されます。それぞれが何をするのかを探ってみましょう。

ディレクティブ

ディレクティブはAngularの新機能ではありませんが、Angular JS 以降に改善されています。Angularの Directives アーキテクチャは、より優れたバインディング システムを提供することで、直接的な DOM 操作の必要性を減らします。ディレクティブAngularキャメルケース表記で名前を付け、破線表記でUIで使用する必要があるJSとは異なり、Angularにはディレクティブの命名と使用の統一された方法があります。

Angular 2 has three types of directives:

コンポーネント

Angularアプリケーションはコンポーネントから始まります。すべてのルートはコンポーネントに関連付けられ、コンポーネントを使用してアプリケーションのさまざまなレベルを定義します。コンポーネントは、HTML テンプレートと、このテンプレートのビューモデルを構築するためのロジックで構成されます。HTML テンプレートは、Angularのバインディング構文を使用して、ビュー内のビューモデルのプロパティとメソッドをバインドします。コンポーネントは、そのテンプレートに別のコンポーネントをロードし、それと対話できます。

コンポーネントには、ngOnInit() や ngOnDestroy() などのライフサイクルフックがあり、アプリケーションはコンポーネントの主要なライフサイクルイベントに応答できます。

Decorator Directives

デコレータディレクティブは、既存の HTML 要素または既存のコンポーネントの動作を拡張します。これらは最も単純な種類のディレクティブです。彼らは小さな一連のアクションを実行しますが、これらの小さな機能がビジネスにとって重要である場合があります。デコレータディレクティブは、イベントを介してホストと対話できます。これらのイベントを効率的に使用すると、実行する必要がある DOM 操作の量が減ります。

構造ディレクティブ

構造ディレクティブは、要素内でレンダリングされるテンプレートを扱います。必要に応じて、テンプレートを操作できます。ターゲット内の DOM を直接操作するのではなく、Angularが提供するViewComponentRefサービスを使用して、ターゲット内の要素を追加または削除します。この動作により、ディレクティブプラットフォームは非依存的になります。

Change Detection

すべてのフロントエンドフレームワークの中心にあるのは、オブジェクトに加えられた変更を検出する手法です。オブジェクトの値が UI の変更にバインドされるたびに、フレームワークに通知して、これらの変更を反映するように UI を更新できるようにする必要があります。この手法は、変更検出と呼ばれます。Angularは、オブジェクトの変更を検出するためのはるかに強力で効率的な方法を提供します。これには変更検出メカニズムが組み込まれており、フレームワーク上に構築されたアプリケーションでサードパーティの手法を使用することもできます。このフレームワークには、変更を検出するためのより優れたメカニズムを提供するオブジェクトの使用を許可するオープンエンドがあります。

サービス

サービスは、APIからのデータの取得、サーバーとの対話のためのWebSocket接続の維持、ビジネスロジックや再利用可能なロジックの処理などの操作を実行する単純なES6またはTypeScriptクラスです。サービスは、別のサービス、コンポーネント、ディレクティブ、または任意のAngularコードブロックに挿入できます。サービスは、単一責任原則(SRP)を達成し、コードをクリーンに保つのに役立ちます。

フォーム

ユーザー入力を受け入れることは、あらゆるアプリケーションにとって最も重要な部分の 1 つです。ビジネスでユーザーが入力する多くのフィールドが必要であり、実行する検証が多い場合、ユーザー入力を処理するのが難しくなることがあります。Angularは、フォームを適切にサポートします。Angularアプリケーション内のフォームで、テンプレートまたはモデルによって駆動できます。

ルーティング

シングルページアプリケーション開発をサポートするフレームワークでは、ページ全体を更新せずにクライアント側でビューを切り替えることができます。ページの一部を更新し、URL を変更してブックマークし、最初のページからナビゲーションを再開する代わりに特定のビューに戻ることができるようにします。これは、クライアント側ルーティングと呼ばれます。すべてのSPAフレームワークと同様に、Angularはルーティングをサポートしています。AngularにはComponent Routerというルーターがあり、コンポーネントをロードするため、そのように名付けられています。

Modules

前述のように、Angularのモジュールは、関連するコンポーネント、ディレクティブ、パイプ、およびサービスのセットをグループ化するために使用されます。Angularのモジュールシステムは、ES6モジュールシステムとは異なります。ES6 モジュール システムはファイルの内容をカプセル化し、Angular 2 モジュール システムは一連のAngularブロックをカプセル化します。モジュールには次のような機能があります。

• モジュールに追加されたブロックは、モジュール内で使用できます。
• モジュールは、1 つ以上のモジュールをインポートして、そのモジュールのコードを使用できます。
• Angularライブラリは、モジュールを使用して、その機能を世界の他の地域にエクスポートできます。
• Angularアプリケーションはモジュールを使用してブートストラップします。
• モジュールは、そのコンポーネントの 1 つ以上をブートストラップ コンポーネントとして宣言できます。
• モジュールの実行は、ブートストラップされたコンポーネントから開始されます。

結論

Angularには、いくつかの新機能と、一部のAngular JS機能の改良バージョンが付属しています。これらの機能はそれぞれ、使いやすさとメンテナンスのしやすさを念頭に置いて設計されています。これらの各概念について、前進するにつれて深く掘り下げていきます。

このAngular Essentials 電子書籍のサンプルをお楽しみいただけたでしょうか。書籍全体をダウンロードして、学習した情報の適用方法や、JavaScript Angular Components のIgnite UIが、あらゆる基幹業務アプリケーションに対して驚くほど高性能なアプリケーションを作成するのにどのように役立つかを示す新しいサンプル アプリケーションとレッスンをぜひご覧ください。また、Ignite UI for JavaScriptの30日間無料トライアルもぜひお試しください。