Standaloneコンポーネントの作成
standaloneフラグを使ってコンポーネントを宣言します。
「Standaloneコンポーネントの作成」はCoddyKit上の無料Angular Academyレッスンです。 これはレッスン2/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはAngular Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Angular Academyコースには全4レッスンが含まれています。
Standaloneコンポーネントの作成
Standaloneコンポーネントは、@Component でデコレートし、Standaloneとして指定したクラスにすぎません。Angular v19以降ではこれがデフォルトのため、フラグを記述する必要すらない場合が多くあります。
standaloneフラグ
以前は、デコレーターに standalone: true を設定していました。v19以降ではコンポーネントがデフォルトでStandaloneになるため、このフラグは省略できます。
import { Component } from '@angular/core';
@Component({
selector: 'app-greeting',
standalone: true, // optional in v19+
template: '<h1>Welcome</h1>'
})
export class GreetingComponent {}セレクター
selector は、テンプレート内にコンポーネントを配置するために使用するカスタム要素タグです。たとえば app-greeting です。
// usage in another template:
// <app-greeting></app-greeting>インラインテンプレート
HTMLをインラインで記述する場合は template プロパティを使用します。小規模なコンポーネントに適しています。
@Component({
selector: 'app-badge',
template: '<span class="badge">New</span>'
})
export class BadgeComponent {}外部テンプレート
ビューが大きい場合は、templateUrl でHTMLファイルを指定します。
@Component({
selector: 'app-profile',
templateUrl: './profile.component.html'
})
export class ProfileComponent {}スタイル
styles（インライン）または styleUrl / styleUrls（外部ファイル）を使って、コンポーネントスコープのスタイルを追加します。
@Component({
selector: 'app-card',
template: '<div class="card"></div>',
styles: ['.card { padding: 16px; }']
})
export class CardComponent {}コンポーネントクラスのロジック
クラス本体には状態と振る舞いを記述します。シグナルを使う場合は、リアクティブな状態をフィールドとして宣言します。
import { Component, signal } from '@angular/core';
@Component({ selector: 'app-counter', template: '<p>{{ n() }}</p>' })
export class CounterComponent {
n = signal(0);
}モジュールは不要
@NgModuleもdeclarations配列もないことに注目してください。コンポーネントは、必要な場所でインポートできる状態になっています。
ファイル命名規則
Angularでは、ファイルを greeting.component.ts、クラスを GreetingComponent、セレクターを app-greeting のように命名するのが慣例です。
別のコンポーネント内での使用
子のStandaloneコンポーネントを使用するには、親コンポーネントのimports配列にインポートし（次のレッスンで扱います）、親のテンプレートにそのセレクターを配置します。
CLIでの生成
Angular CLIはデフォルトでStandaloneコンポーネントを生成します。ng generate component greetingを実行すると、StandaloneのGreetingComponentが自動的に作成されます。
クイックチェック：コンポーネントの作成
Standaloneのデフォルト設定について確認しましょう。
まとめ：Standaloneコンポーネントの作成
@Componentを使ってStandaloneコンポーネントを作成し、必要に応じてstandalone: trueを設定します（v19以降ではデフォルトです）。セレクター、templateまたはtemplateUrl、必要に応じたスタイル、そしてクラスのロジックを定義します。NgModuleは必要ありません。次は、依存関係を直接インポートします。
よくある質問
「Standaloneコンポーネントの作成」レッスンは無料ですか？
はい。「Standaloneコンポーネントの作成」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Angular Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Angular Academyコースには全4レッスンが含まれています。
「Standaloneコンポーネントの作成」で何を学びますか？
standaloneフラグを使ってコンポーネントを宣言します。 ブラウザで直接実行するハンズオンコードでAngular Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Angular Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのAngular Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/4です。
「Standaloneコンポーネントの作成」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このAngular Academyレッスンでコードを書いて実行できますか？
はい。すべてのAngular Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- Standaloneコンポーネントを使う理由
- Standaloneコンポーネントの作成
- 依存関係の直接インポート
- Standaloneアプリのブートストラップ