今回はAngular 15で正式に導入された「スタンドアロンコンポーネント」の機能をご紹介します。
目次
はじめに
近年のフロントエンド開発では、UIの部品（コンポーネント）を組み立ててアプリケーションを開発するスタイルのJavaScriptフレームワークが採用されており、その手法を後押しするツールやライブラリが進歩してきています。
中でも、Angularは古くからコンポーネント中心の仕組みを採用しており、人気のあるフロントエンド向けフレームワークの1つです。これまで独特で大きな仕組みであるがゆえに、他のフレームワークと比べて複雑でパフォーマンスが出にくいという欠点を持っていましたが、新しい仕組みが導入されたことで大きな変化がありました。
今回は、Angularに新しく導入された機能「スタンドアロンコンポーネント」の特長を解説していきます。
Angularにおける従来のコンポーネント開発
Angularにスタンドアロンコンポーネントの仕組みが採用された背景を紹介していきます。
Angularとは
Angularは、コンポーネント指向の開発モデルを採用するGoogle製のJavaScriptフレームワークです。2012年に「AngularJS」という名称でリリースされてから、現在の「Angular」に名を変えて2024年時点でもバージョンアップを続けています。
AngularのコンポーネントとはWebアプリケーションのUIを構成する部品のことで、表示部分を担うHTMLやCSS、イベントなどの動作を担うTypeScriptをカプセル化した要素群を指します。さらに、このコンポーネントをモジュールというグループに紐づけて管理することで、コンポーネントの独立性を実現していました。
なおコンポーネント指向の開発モデルは、フロントエンド開発で人気の高いReactやVue.jsでも採用されており、近年のトレンドになっています。
従来のAngularが抱えていた問題点
従来のAngularでは、コンポーネントやサービスなどを集約したモジュールを基本単位としていました。また、アプリケーション動作の起点となるルートモジュールを中心として、構成要素となる枝葉のモジュールが紐づいて管理されています。
しかし、コンポーネントがモジュールと強く結びついており、コンポーネント自体の独立性が低いため、単体でのテストが行いにくいデメリットがありました。さらに、Angularはフルスタックのフレームワークで多くの機能を搭載する上に、独自の構造や構文を持つことから開発者の学習コストが高いことが導入のハードルを上げていました。
スタンドアロンコンポーネントとは
スタンドアロンコンポーネントはAngularのバージョン15から正式に採用された機能で、従来のコンポーネントの役割を大きく変えました。Angularの仕組みが従来のモジュールベースから純粋なコンポーネントベースにシフトしたことで、コンポーネントの独立性がより高まっています。
コンポーネントが持つ再利用性のメリットを維持しつつも、モジュールへの依存から解放されたため、コンポーネントの利便性とアプリケーション全体のパフォーマンスの向上をもたらしました。
なお、バージョンが更新されても従来のモジュールベースの仕組みは残っており、既存のアプリケーションへの適用も可能です。
スタンドアロンコンポーネントの特長
コンポーネントの追加が容易
スタンドアロンコンポーネントに置き換わることで、コンポーネント同士のシンプルな従属関係でアプリケーションを構成できるようになりました。
スタンドアロンコンポーネントの作成自体は簡単で、コンポーネントに@Component.standaloneプロパティを設定するだけで作成でき、それは既存のコンポーネントにも適用可能です。
@Component({
standalone: true,
...
})小規模なアプリケーションでもAngularを採用しやすい
スタンドアロンコンポーネントを利用すると、シンプルなコンポーネントベースの構成となるため、従来のアーキテクチャに比べて理解しやすくなります。コンポーネントの独立性が向上したことにより単体でのテストが行いやすくなりますし、仕組みの複雑さが緩和されることにより開発者側の導入コストが下がります。
Angularは元々人気の高いフレームワークであるため、全体のコードの品質を維持できれば、新規の開発プロジェクトにおいても採用の機会が増えてくるでしょう。
従来よりもパフォーマンスが向上
スタンドアロンコンポーネントは、従来のモジュールとコンポーネントの立場を一変させました。モジュールに強く結びついていた機能や共通処理を、依存性注入（インジェクター）を通してコンポーネントに移すことで、モジュールを前提とせずにコンポーネントを動かせるようになりました。
これにより、モジュールの読み込みに生じていたオーバーヘッドがなくなるため、パフォーマンス向上が期待できます。
既存のNgModuleからの移行
従来のモジュールベースの仕組みで開発されたWebアプリケーションは、最新のAngular 19でも動作はしますが、前章で解説したように移行することで多くのメリットが得られます。公式サイトにおいてもスタンドアロンコンポーネントの導入が推奨されており、既存のAngularアプリケーションも少ない手順で移行することができます。
AngularとNode.jsの更新
スタンドアロンコンポーネントへ移行するには、Angular 15.2.0以降にアップグレードする必要があります。対応するNode.jsのバージョンやアクティブなAngularのバージョンは下記を参考にしてください。
移行処理の実行
移行したいAngularアプリケーションの中で下記コマンドを実行します。
ng g @angular/core:standalone次の3つの移行処理を順番に選んで実行していきます。
Convert all components, directives and pipes to standalone
Remove unnecessary NgModule classes
Bootstrap the application using standalone APIs不要なNgModuleを手動で削除
コード上で下記のコメントが記載されている箇所を確認し、NgModuleを削除していきます。
/* TODO(standalone-migration): clean up removed NgModule reference manually */スタンドアロンコンポーネントを使ってみよう
ここからは、スタンドアロンコンポーネントを使ったAngularアプリケーションを新規作成する方法を解説していきます。
Node.jsのインストール
Node.jsの公式サイトにアクセスします。
表示されている緑色のボタン「Download Node.js（LTS）」をクリックして、インストーラのダウンロードを行います。
2024年12月時点の推奨版は「v22.11.0 LTS」となっていますが、その時点のバージョンをダウンロード頂ければ問題ありません。尚、最新版は最新機能が使用できる反面、動作が安定しないことがありますので、特別な理由がない限りは推奨版を使用するようにしてください。
インストーラのダウンロードが終わったらダブルクリックで起動し、指示の通りインストールを行ってください。
インストール後、コマンドを実行できるアプリを起動し、Node.jsおよびnpmが使用できるようになっていることを確認します。
- macOSの場合は、「ターミナル」アプリ
- Windowsの場合は「PowerShell」または「コマンドプロンプト」
以下のコマンドを実行し、結果を確認します。
node -v
npm -v実行結果に自分のインストールしたバージョンが表示されれば、使用する準備ができてきます。コマンドが実行できない場合はOSを再起動して再度試すようにしてください。
Angularアプリケーションの作成
まずは、Angularアプリケーションの作成に必要なAngular CLIをインストールするために、下記のコマンドを実行しましょう。
npm install -g @angular/cli続けて適当なディレクトリに移り、下記のコマンドを実行するとAngularアプリケーションが新しく作成されます。
ng new angular-tutorial --style=css直下のディレクトリにアプリケーションのルートコンポーネントが作成されるので、Angularアプリケーションを動作させてみましょう。
cd angular-tutorial
npm startブラウザから「http://localhost:4200/」を開くと、サンプル画面が表示されます。
スタンドアロンコンポーネントの作成
作成したAngularアプリケーションに別のコンポーネントを追加してみましょう。下記のコマンドでスタンドアロンコンポーネントを作成できます。
ng generate component sample-standalone --standalone作成したコンポーネントのルーティングを設定するために、「src/app/app.routes.ts」に追記しましょう。
import { Routes } from '@angular/router';
import { SampleStandaloneComponent } from './sample-standalone/sample-standalone.component';
export const routes: Routes = [
{ path: 'standalone', component: SampleStandaloneComponent },
];Angularアプリケーションを動作させてから、ブラウザで「http://localhost:4200/standalone/」を開くと、「src/app/sample-standalone/sample-standalone.component.html」で定義した「sample-standalone works!」の文字列がページ下部に表示されます。
さいごに
Angularのスタンドアロンコンポーネントは、従来のモジュールベースからコンポーネントベースのアーキテクチャへの進化をもたらした機能です。また、コンポーネントを主軸に置いてその独立性を高め、コンポーネントの利便性と保守性の向上に寄与します。新規開発だけでなく改修にもメリットをもたらすため、Angularの導入をぜひ検討してみてください。
メシウスではAngularをはじめとした様々なJavaScriptフレームワークと一緒に使える、業務アプリ開発に最適なJavaScriptライブラリを提供しています。
無償のトライアル版や、ブラウザ上で手軽に試せるデモアプリケーションも公開しているので、こちらも是非ご覧ください。