いずみこんな悩みを解決できる記事を書きました！
僕は現役フリーランスエンジニア（歴10年）で、資格は13個保有しています。
「Angularの新しい制御フロー構文の使い方を知りたい」とお考えではありませんか？
Angular v17から、テンプレートで使える組み込みの制御フロー構文が追加されました。
従来の*ngIfや*ngForの代わりに、@if・@for・@switchでテンプレートの分岐や繰り返しを書けます。
いずみJavaScriptのif文やfor文に近い書き方になって、かなり読みやすくなりました。
CommonModuleのimportも不要です。
ということで、本記事ではAngularの新しい制御フロー構文@if/@for/@switchの使い方を解説します。
いずみすぐ読み終わるので、ぜひ最後まで読んでくださいませ。
| 【当サイト】おすすめフリーランスエージェント3選 | |||
|---|---|---|---|
| エージェント | 評価 | ポイント | 公式サイト |
 レバテックフリーランス  | 5.0 | 業界最大級のエージェント。 高単価案件が豊富。 | 公式 |
 Midworks  | 4.8 | 満足度調査で 3年連続3冠を達成。 | 公式 |
 ITプロパートナーズ  | 4.6 | 週2〜3向けの案件が豊富。 | 公式 |
【Angular】新しい制御フロー構文@if/@for/@switchの使い方
早速ですが、Angularの新しい制御フロー構文の使い方を見ていきます。
新しい制御フロー構文の特徴
新しい制御フロー構文は、Angular v17で導入され、v18以降で安定版になりました。
@if・@for・@switchの3種類があり、テンプレートに直接書けます。
構造ディレクティブと違い、CommonModuleやNgIfなどをimportする必要がありません。
型チェックが効きやすく、ビルド時にテンプレートのエラーを検出しやすくなっています。
いずみ既存プロジェクトでも、*ngIfと新構文を混在させながら少しずつ移行できます。
@ifで条件分岐を書く
@ifは、条件がtrueのときだけブロック内のテンプレートを描画します。
@else ifと@elseもつなげて書けます。
@if (user.isLoggedIn) {
<p>ようこそ、{{ user.name }}さん</p>
} @else if (user.isGuest) {
<p>ゲストとして閲覧中です</p>
} @else {
<p>ログインしてください</p>
}波括弧でブロックを囲むため、どこからどこまでが分岐対象なのかが一目で分かります。
いずみ*ngIfで複数条件を書くときのng-template地獄から解放されます。
@forでリストを繰り返す
@forは、配列やIterableを繰り返してテンプレートを描画します。
*ngForと違い、trackの指定が必須になりました。
trackには、各要素を一意に識別できる値（IDなど）を渡します。
<ul>
@for (task of tasks; track task.id) {
<li>{{ $index + 1 }}: {{ task.title }}</li>
} @empty {
<li>タスクはありません</li>
}
</ul>要素が空のときは、@emptyブロックの内容が表示されます。
ループ内では$index・$count・$first・$last・$even・$oddが使えます。
@for (item of items; track item.id; let i = $index, isFirst = $first) {
<li [class.first]="isFirst">{{ i }}: {{ item.name }}</li>
}trackを正しく設定すると、DOMの再描画が最小限になってパフォーマンスも上がります。
@switchで複数分岐を書く
@switchは、1つの値に応じて表示するブロックを切り替えます。
JavaScriptのswitch文と違い、フォールスルーが無いためbreakは不要です。
どの@caseにも一致しないときは@defaultブロックが表示されます。
@switch (status) {
@case ('loading') {
<app-spinner />
}
@case ('success') {
<app-result [data]="data" />
}
@default {
<p>エラーが発生しました</p>
}
}ローディング・成功・エラーのような状態表示と相性が良いです。
コンポーネント側のコード例
テンプレートで使うデータは、通常どおりコンポーネントクラスに定義します。
import { Component } from '@angular/core';
@Component({
selector: 'app-task-list',
standalone: true,
templateUrl: './task-list.component.html',
})
export class TaskListComponent {
tasks = [
{ id: 1, title: '設計レビュー' },
{ id: 2, title: 'コード修正' },
];
status: 'loading' | 'success' | 'error' = 'loading';
}standaloneコンポーネントでも、制御フロー構文を使うための追加importは要りません。
既存の*ngIf/*ngForから移行する
Angularには、既存のテンプレートを新構文へ一括変換するスキマティックが用意されています。
プロジェクトのルートで移行用のスキマティックを実行します。
ng generate @angular/core:control-flow-migrationプロジェクト内の*ngIf・*ngFor・*ngSwitchが@if・@for・@switchへ変換されます。
変換結果は差分で確認し、意図しない書き換えが無いかレビューします。
trackが$indexで補完された箇所は、可能ならID系の値へ置き換えます。
いずみng updateでAngular 18以降へ上げると、移行が自動で走る場合もあります。
| 【当サイト】おすすめフリーランスエージェント3選 | |||
|---|---|---|---|
| エージェント | 評価 | ポイント | 公式サイト |
レバテックフリーランス | 5.0 | 業界最大級のエージェント。 高単価案件が豊富。 | 公式 |
Midworks | 4.8 | 満足度調査で 3年連続3冠を達成。 | 公式 |
ITプロパートナーズ | 4.6 | 週2〜3向けの案件が豊富。 | 公式 |
【厳選】フリーランスエンジニアにおすすめなエージェント3選
フリーランスエンジニアになるにはエージェントから案件をもらう必要があります。
僕が実際に利用しているおすすめエージェントを紹介しますね。
いずみエージェントは必ず複数登録してください。
担当者によっては「全然案件紹介してくれない…」みたいなこともあるので…
僕は実際に5つのエージェントを使い回していますよ。
フリーランスを始めるなら「レバテックフリーランス
」
| 案件数 | マージン率 | 単価 | |
| 約88,000件 | 非公開 | 高 | |
| 初心者 | 福利厚生 | 申し込み | |
| 無料 |
- 業界最大級の案件数。
- 業界トップクラスの高単価報酬、低マージン（平均年収862万円）。
- 案件参画中のフォローの充実。
※詳細は「【業界最大手】レバテックフリーランスとは？メリットや利用手順を解説！」を参照。
レバテックフリーランス
は業界最大手のフリーランスエージェントです。
とにかく案件数が多いので、とりあえず登録しておけば間違いないエージェントです！
いずみ僕もはじめてフリーランスの案件を貰ったのはレバテックフリーランス
です。
保有している案件数が多いので、業務経験がなくても何かしらの案件は紹介してもらえますよ（僕はJavaの経験3年でも案件を貰えました）。
手厚い保障を重視したいなら「Midworks
」
| 案件数 | マージン率 | 単価 | |
| 約10,000件 | 非公開 | 中 | |
| 初心者 | 福利厚生 | 申し込み | |
| 無料 |
- 手厚い保障で正社員並みの安心感。
- 還元率60％超え＆単価公開でクリアな契約。
- 給与保障制度（審査あり）。
Midworks
は手厚い保障が特徴のフリーランスエージェントです。
フリーランスを目指しているけど不安な方や保障を重視したい方におすすめです。
いずみ僕も何度か案件を紹介してもらいました。
自分のスキルに合った案件を紹介してもらえましたし、電話のやり取りも非常に丁寧でした。
週2〜3日の案件探しなら「ITプロパートナーズ
」
| 案件数 | マージン率 | 単価 | |
| 約5,000件 | 非公開 | 高 | |
| 初心者 | 福利厚生 | 申し込み | |
| 経験者向け | 無料 |
- IT案件に特化したフリーランスエージェント。
- 週2〜3日の案件が豊富。
- リモート案件が多く、直エンドなので単価も高い。
※詳細は「【週2・3案件】ITプロパートナーズとは？メリットや利用手順を解説！」を参照。
ITプロパートナーズ
はIT案件に特化したフリーランスエージェントです。
週2〜3日から参画できる案件が豊富なので、起業したい人にもおすすめです。
いずみ週2〜3日の案件はある程度スキルがないと紹介してもらえない印象です。
とはいえ、週5の案件ももちろんありますし、僕が利用した時は迅速・丁寧に対応していただきました！
よくある質問
新しい制御フロー構文を使うのに必要なAngularのバージョンは？
Angular v17で導入され、v18以降で安定版として利用できます。
v17ではオプトイン扱いだったため、実務ではv18以降での利用をおすすめします。
*ngIfと@ifを同じプロジェクトで併用できますか？
併用できます。
テンプレート単位で書き換えられるため、ファイルごとに少しずつ移行できます。
@forでtrackを省略できますか？
省略できません。
trackは必須で、一意なIDが無い場合のみtrack $indexを使います。
制御フロー構文を使うとCommonModuleは不要になりますか？
NgIf・NgFor・NgSwitch目的のimportは不要になります。
DatePipeなど他の機能を使う場合は、引き続きimportが必要です。
まとめ
今回は、Angularの新しい制御フロー構文@if/@for/@switchの使い方について解説しました。
以下が本記事のまとめになります。
- おすすめ本
Angularの勉強なら「Angularアプリケーションプログラミング」が分かりやすくておすすめですよ♪
いずみ最後までお読みいただき、ありがとうございました！
| 【当サイト】おすすめフリーランスエージェント3選 | |||
|---|---|---|---|
| エージェント | 評価 | ポイント | 公式サイト |
レバテックフリーランス | 5.0 | 業界最大級のエージェント。 高単価案件が豊富。 | 公式 |
Midworks | 4.8 | 満足度調査で 3年連続3冠を達成。 | 公式 |
ITプロパートナーズ | 4.6 | 週2〜3向けの案件が豊富。 | 公式 |
- クソおすすめ本
いずみ海外のエンジニアがどういった思考で働いているかが理解できます。
海外に行く気はないけど海外エンジニアの動向が気になる雑魚エンジニアにおすすめです（本当におすすめな本しか紹介しないのでご安心を）。
