Standaloneコンポーネントを使う理由
StandaloneコンポーネントでAngularが簡潔になる仕組みを確認します。
「Standaloneコンポーネントを使う理由」はCoddyKit上の無料Angular Academyレッスンです。 これはレッスン1/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはAngular Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Angular Academyコースには全4レッスンが含まれています。
Standaloneコンポーネントとは
Standaloneコンポーネントを使うと、NgModulesなしでAngularアプリを構築できます。コンポーネントが独自の依存関係を宣言するため、構成要素が自己完結し、理解しやすくなります。
NgModuleの時代
従来は、すべてのコンポーネント、ディレクティブ、パイプを @NgModule 内で宣言する必要がありました。モジュールは宣言をまとめ、インポートとエクスポートを管理していました。
その結果、定型コードが増え、間接的な層も追加されました。
NgModuleが引き起こした問題
NgModuleでは、コンポーネントの宣言忘れ、2つのモジュールでの重複宣言、importsとdeclarationsの混同、不要なものまで取り込む大規模な共有モジュールなど、よくある問題が発生しました。
Standaloneの考え方
Standaloneコンポーネントでは、それぞれのコンポーネントが独自の imports 配列に必要なものを正確に列挙します。コンポーネントを把握する中央モジュールは必要ありません。
import { Component } from '@angular/core';
@Component({
selector: 'app-hello',
standalone: true,
template: '<p>Hello</p>'
})
export class HelloComponent {}自己完結した依存関係
Standaloneコンポーネントは独自の依存関係を宣言するため、1つのファイルを読むだけで、そのコンポーネントが何に依存しているかをすべて把握できます。これにより、コードの明確さとツールの使いやすさが向上します。
定型コードの削減
モジュール間で宣言とエクスポートを対応させる必要はもうありません。ESモジュールと同じように、使用する場所でコンポーネントを直接インポートします。
より優れたツリーシェイキング
Standaloneコンポーネントでは依存関係グラフが明示的になるため、バンドラーが未使用のコードを削除しやすくなり、バンドルサイズの縮小につながる可能性があります。
簡単になった遅延読み込み
ルートでは、フィーチャーモジュールのラッパーを用意せず、dynamic importを使ってStandaloneコンポーネントを直接遅延読み込みできます。
// route: loadComponent: () => import('./page.component').then(m => m.PageComponent)新しいデフォルト
最近のAngularでは、新しく生成するコンポーネントのデフォルトがStandaloneです。NgModuleも引き続き使用できますが、今後はStandaloneが推奨されます。
NgModuleとの相互運用
Standaloneのコードとモジュールベースのコードは相互運用できます。StandaloneコンポーネントをNgModuleにインポートでき、NgModuleベースのコンポーネントからStandaloneのインポートを使用することもできるため、移行が容易になります。
引き続き設定するもの
ルーターやHTTPクライアントなど、アプリケーション全体の設定はルートモジュールではなく、bootstrapApplication のプロバイダーを通じて行います。詳しくは後で説明します。
クイックチェック：Standaloneの利点
Standaloneコンポーネントの中心的な利点は何ですか。
まとめ：Standaloneの利点
Standaloneコンポーネントでは、各コンポーネントが独自の依存関係を宣言できるため、NgModuleの定型コードが不要になります。これにより、コードが明確になり、遅延読み込みが容易になり、ツリーシェイキングも改善されます。現在はStandaloneがデフォルトです。次は、Standaloneコンポーネントを作成します。
よくある質問
「Standaloneコンポーネントを使う理由」レッスンは無料ですか？
はい。「Standaloneコンポーネントを使う理由」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Angular Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Angular Academyコースには全4レッスンが含まれています。
「Standaloneコンポーネントを使う理由」で何を学びますか？
StandaloneコンポーネントでAngularが簡潔になる仕組みを確認します。 ブラウザで直接実行するハンズオンコードでAngular Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Angular Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのAngular Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/4です。
「Standaloneコンポーネントを使う理由」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このAngular Academyレッスンでコードを書いて実行できますか？
はい。すべてのAngular Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- Standaloneコンポーネントを使う理由
- Standaloneコンポーネントの作成
- 依存関係の直接インポート
- Standaloneアプリのブートストラップ