【Angular１７】@switch構文を使おう！

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

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

Angularの解説シリーズです。

今回はAngular17で追加された@switch構文について学んでいきましょう！

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

この記事を読むと・・・

@switch構文の使い方がわかる

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

環境がない人はcodesansbox等を使ってね！

作りたいもの
1. 実行環境
@switch構文を使おう
1. switch構文の使い方
実際に作ってみよう！
GitHubのサンプルコード
まとめ

作りたいもの

これが今回の完成形だよ！
このような表示切替を@switch構文を使って実装するよ！

実行環境

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

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

@switch構文を使おう

Angular１７では*ngSwitchに加えて@switch構文が追加されました。
よりJavaScriptライクに記述できるので
直感的に実装できるようになりました。

switch構文の使い方

@switch (条件式) { 
  @case(値１){
    条件式　===　値１がtrueの際の表示
  } @case(値２){
    条件式　===　値２がtrueの際の表示
  } @case(値３){
    条件式　===　値３がtrueの際の表示
  } @default(){
    全てfalseの際の表示
  }
}

完全一致である必要があるので、データ型に注意してね！

実際に作ってみよう！

信号の色をボタンから設定して、
色に応じて表示が切り替わる@switch構文を実装します。

コピペで動かしてみてね！

初期設定

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

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)="setSignalColor('green')">青信号</button>
<button (click)="setSignalColor('yellow')">黄色信号</button>
<button (click)="setSignalColor('red')">赤信号</button>

@switch (signalColor) { 
  @case("green"){
    <p>青：進め</p>
  } @case("yellow"){
    <p>黄色：注意</p>
  } @case("red"){
    <p>赤：止まれ</p>
  } @default(){
    <p>信号の色を設定してください</p>
  }
}

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 {
  // 信号の色
  signalColor: string = '';

  /**信号の色を設定する関数 */
  setSignalColor(color: string) {
    this.signalColor = color;
  }
}

画面を確認しよう！

このように、信号の色に応じて
コンポーネントの表示が切り替わることがわかりました。

@switchを使いこなせてえらい！

GitHubのサンプルコード

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

GitHub - same-hack/angular17_switch

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

まとめ

@switch構文を使うとJavaScriptライクなswitch処理が実装できる
条件は完全一致になるので、データ型に注意が必要

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

twitter
instagram