【Angular17】@for構文を使おう【オプションも完全網羅！】

みなさんこんにちは、現役エンジニアのサメハックです

未経験からWebエンジニアに転職し、
正社員として5年働いたのちフリーランスとして独立しました。

Angularの解説シリーズです。

今回はAngular17の@for構文について学んでいきましょう！

駆け出しエンジニアや未経験の方、
また新入社員を指導する先輩社員にとっても
わかりやすいように解説していきます！

この記事を読むと・・・

Angular１７で追加された@for構文が理解できる
オプションの使い方が一通りわかる

※PCにnpm、nodeがインストールされている前提で記述します。
　yarn等をお使いの方は読み替えてください。

新しいループ処理をマスターしよう！

実行環境
Angular17で追加された@for構文を使いこなそう！
1. @forの基本構文
2. 【@empty】配列が空の際に表示を切り替える
オプションを使ってみよう！
1. オプションを使うための構文
実際に作ってみよう！
GitHubのサンプルコード
まとめ

実行環境

Angularのバージョンが古いと動かないことがあるよ！
うまく動かなければ下の記事を参考にアップデートしてね！

【Angular17対応】AngularCLIをアップデートしよう！

Angular17で追加された@for構文を使いこなそう！

Angular17では*ngForのかわりに@for構文が追加されました。
それに伴い従来はなかったオプションがいくつか実装されたので、
今回はそれらを一通り解説します。

この記事を読めば全ての機能が使えるよ！

@forの基本構文

@for(変数 of 配列; track $index){
    {{ 変数 }}
}

これが最低限の基本的な構文です。

trackという見慣れないものがありますが、
@for構文では要素にID等の識別子を設定し、ラベリングする必要があります。

その識別子を何にするかの定義がtrack $indexの部分です。

要素のIDなどがあればそっちを定義できるよ！
こだわりがない場合は$indexが推奨されているよ！

【@empty】配列が空の際に表示を切り替える

@for(変数 of 配列; track $index){
    {{ 変数 }}
} @empty {
    配列が空だよーー！
}

配列が空の場合の条件分岐処理が一度に実装できるようになったよ！

オプションを使ってみよう！

@forで使用できるオプションは次になります。

$count 配列のアイテム数・・・number型
$index 現在の行のインデックス・・・number型
$first 現在の行が最初の行かどうか・・・boolean型
$last 現在の行が最後の行かどうか・・・boolean型
$even 現在の行インデックスが偶数かどうか・・・boolean型
$odd 現在の行インデックスが奇数かどうか・・・boolean型

オプションを使うための構文

@for(変数 of 配列; track $index; let 変数1 = $オプション, 変数2 = $オプション, ......略){
    {{ 変数 }}
}

このような形式で使用するよ！

実際に作ってみよう！

ちょっと強引ですが今回は全てのオプションを使ったサンプルコードを作成します。

初期設定

ターミナルを開いて以下のコマンドを実行してください。

ng new my-app
cd my-app
ng serve -o

ng newした際のルーティング設定はどっちでもいいよ！
スタイルの設定はなんでもいいけど、本ブログでは一括してSCSSで記述するよ！

補足

ng new my-app   →   新規Angularアプリの作成
cd my-app       →   ディレクトリ移動
ng serve -o     →   作成したAngularアプリの起動

app.component.html

<button (click)="addUser()">ユーザ追加</button>

<div class="user-wrap">
  <div>
    @for(user of userList;
        track user.id; 
        let myCount = $count, 
        myIndex = $index,
        isFirst = $first, 
        isLast = $last, 
        isEven = $even, 
        isOdd = $odd
    ){
        <div>ユーザID：{{ user.id }}</div>
        <div>ユーザ名：{{ user.name }}</div>
        <div>{{ myIndex }}番目</div>
        <div>ユーザ総数{{ myCount }}人</div>
        <div>最初のユーザ？:{{ isFirst }}</div>
        <div>最後のユーザ？:{{ isLast }}</div>
        <div>奇数？:{{ isEven }}</div>
        <div>偶数？:{{ isOdd }}</div>
        <br />
    }@empty {
        <p>ユーザを追加してください</p>
    }
  </div>
</div>

app.component.ts

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterOutlet } from '@angular/router';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, RouterOutlet],
  templateUrl: './app.component.html',
  styleUrl: './app.component.scss',
})
export class AppComponent {
  // ユーザリストの宣言
  userList: any[] = [];

  /**ユーザ追加処理  */
  addUser() {
    // ユーザIDを定義
    const userId = this.userList.length + 1;
    // ユーザ情報を定義
    const user = {
      id: userId,
      name: `ユーザ${userId}`,
    };

    // ユーザを追加
    this.userList.push(user);
  }
}

画面を見てみよう！

全てのオプションを無理やり動かしているので
少し雑多な印象がありますが、
各値が期待通り出力されている事がわかります。

便利なオプションが多いのでうまく使いこなそう！

GitHubのサンプルコード

今回作ったものはGitHubにあげているので
うまく動作しなかった方は是非ダウンロードしてみてください。

GitHub - same-hack/angular17_for

Contribute to same-hack/angular17_for development by creating an account on GitHub.

まとめ

Angular17で*ngForに加えて@for構文が追加された
@emptyブロックを使用することで、配列が空の際の表示切り替えが可能に
trackで識別子の定義が必須となった
多数の便利なオプションが実装された

満足いただけたら、1クリックなのでSNSフォローしてもらえると嬉しいです🦈

twitter
instagram