みなさんこんにちは、現役エンジニアのサメハックです
未経験からWebエンジニアに転職し、
正社員として5年働いたのちフリーランスとして独立しました。
Angularの解説シリーズです。
今回はAngular17で追加された@switch構文について学んでいきましょう!
駆け出しエンジニアや未経験の方、
また新入社員を指導する先輩社員にとっても
わかりやすいように解説していきます!
この記事を読むと・・・
- @switch構文の使い方がわかる
※PCにnpm、nodeがインストールされている前提で記述します。
yarn等をお使いの方は読み替えてください。
環境がない人はcodesansbox等を使ってね!
作りたいもの

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

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

【Angular17対応】AngularCLIをアップデートしよう!
@switch構文を使おう

Angular17では*ngSwitchに加えて@switch構文が追加されました。
よりJavaScriptライクに記述できるので
直感的に実装できるようになりました。
switch構文の使い方
@switch (条件式) {
@case(値1){
条件式 === 値1がtrueの際の表示
} @case(値2){
条件式 === 値2がtrueの際の表示
} @case(値3){
条件式 === 値3がtrueの際の表示
} @default(){
全てfalseの際の表示
}
}
完全一致である必要があるので、データ型に注意してね!
実際に作ってみよう!

信号の色をボタンから設定して、
色に応じて表示が切り替わる@switch構文を実装します。
コピペで動かしてみてね!
初期設定
ターミナルを開いて以下のコマンドを実行してください。
ng new my-app
cd my-app
ng serve -o
ng newした際のルーティング設定はどっちでもいいよ!
スタイルの設定はなんでもいいけど、本ブログでは一括してSCSSで記述するよ!
スタイルの設定はなんでもいいけど、本ブログでは一括して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フォローしてもらえると嬉しいです🦈