@if、@else if、@elseの使い方：Angular18のテンプレート条件分岐

新しい@if、@else if、@else構文とは？
基本構文
*ngIfとの違い
まとめ

新しい@if、@else if、@else構文とは？

Angular 18では、テンプレート内で条件分岐を直感的に記述できる新しい構文が導入されました。この新しい構文は、@if、@else if、@elseを利用して、テンプレート内で条件付きの表示ロジックを管理することを目的としています。

この記事では、従来の*ngIfと比較しながら、この新しいテンプレートベースの条件分岐の使い方を詳しく見ていきます。

基本構文

以下は、@if、@else if、@elseの基本的な使い方です。

<div>
    @if (isLoggedIn) {
      <p>ユーザーがログインしています。</p>
    } @else if (isGuest) {
      <p>ゲストとしてアクセスしています。</p>
    } @else {
      <p>ログインが必要です。</p>
    }
</div>

このように、Angular 18では@ifと@else ifの構文が導入されています。カッコの中に真偽値をいれるだけで、複雑な条件分岐を簡単に実装できます。

*ngIfとの違い

従来のAngularでは、*ngIfディレクティブを使用して条件分岐を実装していましたが、
else if条件やelse条件の書き方が<ng-template>などを使わないとできなかったりしていて、構文が煩雑になりがちでした。

Angular 18の@if構文を使用すると、以下のようなメリットがあります。

シンプルな構文: *ngIfよりもシンプルで直感的な構文を持っているため、コードの読み書きが容易になります。
テンプレートのネストが不要: <ng-template>等を使わなくても複雑な条件分岐を表現できるため、テンプレートが簡潔になります。
複数条件の管理が簡単: @else ifと@elseを使って、条件に応じたテンプレートをスムーズに切り替えることが可能です。

まとめ

Angular 18で導入された@if、@else if、@elseは、テンプレート内での条件分岐をよりシンプルかつ直感的に表現できる新しい構文です。従来の*ngIfよりも明快で、複雑な条件を扱う際にテンプレートの可読性が向上します。