Angular BreakpointObserver でレスポンシブを実装する方法（比較・コード例付き）

こんにちは。アーティサン株式会社の木戸です。

Angular でのレスポンシブ実装にお困りの方は、弊社の Angular 技術支援相談 へご案内しています。
要件整理から実装支援まで柔軟にサポートします。

Microsoft クラウド事業

Azure を中心とした Microsoft クラウド環境で、設計・開発・移行・運用まで一貫して支援します。

本記事では、Angular の BreakpointObserver と ngIf ディレクティブ による、画面サイズに応じたノード(DOM)の表示切り替え手法をご紹介します。

表示切り替えは CSS のメディアクエリを用いて行うことも出来ますが、ノードや Angular コンポーネント生成後に表示切り替えを行います。

そのため、非表示時にノードや Angular コンポーネントを生成させたくない場合には適していません。

上記の点に対応する手法としてBreakpointObserverを用いた手法を、 CSS のメディアクエリ と比較しつつ利用場面や実装例をご紹介します。

BreakpointObserver、ngIf ディレクティブ、メディアクエリとは

• BreakpointObserver: 画面サイズの変更に応じて値を受け取る事ができ、指定した画面サイズ以下であるか等を取得できます。

• ngIf ディレクティブ: 値の true/false によって、ノードの表示/非表示を切り替える事ができる機能です。

• メディアクエリ: 端末の種類や画面の解像度に応じてサイトやアプリを変更する機能です。

環境

CSS との比較

BreakpointObserver と CSS の比較表を記載します。

利用場面

各手法の利用場面を記載します。

BreakpointObserver(ngIf ディレクティブ)

非表示時にはノードや Angular コンポーネントが生成されません。 そのため、非表示時に処理や外部の API を実行させたくない場合に適しています。

ノードや Angular コンポーネントが生成されない点を活かした利用場面

ライブラリで用意された Angular コンポーネントの中には、生成時に外部の API を呼び出すものがあります。

その際、API 呼び出し回数に応じた料金等のコストが掛かる場合があります。

CSS を用いた手法の場合、非表示時にも Angular コンポーネントが生成されるため、不要な API 呼び出しが行われます。

それに対し BreakpointObserver を用いた手法を選択すると、非表示時には Angular コンポーネントが生成されず、API 呼び出しも行われないため、余計なコストを掛けずに表示切り替えを実装できます。

css(メディアクエリ)

表示/非表示に関わらずノードや Angular コンポーネントが生成されます。 その後、CSS で表示切り替えを制御するため、負荷が小さいです。

そのため、高速で表示切り替えが必要とされる箇所に適しています。

BreakpointObserver(ngIf ディレクティブ)の実装例

// app.component.ts
import { Component } from "@angular/core";
import {
  BreakpointObserver,
  Breakpoints,
  BreakpointState,
} from "@angular/cdk/layout";
import { map } from "rxjs/operators";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.scss"],
})
export class AppComponent {
  public isPC$ = this.bpObserver
    .observe(Breakpoints.XSmall)
    .pipe(map((state: BreakpointState) => !state.matches));

  constructor(private bpObserver: BreakpointObserver) {}
}

<!-- app.component.html -->
<app-sample *ngIf="isPC$ | async"></app-sample>

分岐点となる画面サイズ情報(Breakpoints)

XSmall や Large 等のように事前定義されている画面サイズ情報がありますが、 メディアクエリの書式で画面サイズ情報を定義する事も可能です。

画面幅が 480px 以下と定義する例

(max-width: 480px)

CSS(メディアクエリ)の実装例

BreakpointObserver と同じく、画面幅が 599px 以下の場合に非表示にする例をご紹介します。

/* style.css */
@media screen and (max-width: 599px) {
  app-sample {
    display: none;
  }
}

あとがき

本記事では、BreakpointObserver による、画面サイズに応じた表示切り替え手法を記載しました。

BreakpointObserver を利用すると、画面サイズの変更に伴い非同期に判定情報が取得でき、表示切り替え以外にも利用できます。

関連リンク

BreakpointObserver

事前定義されている画面サイズ情報

本記事のようなレスポンシブ実装・BreakpointObserver を含む Angular 開発でお困りの方は、Angular 実装支援サービス をご検討ください。
詳細なご相談はお気軽にどうぞ。

Microsoft クラウド事業

Azure を中心とした Microsoft クラウド環境で、設計・開発・移行・運用まで一貫して支援します。

木戸裕貴

🖊木戸裕貴さんのブログ一覧はこちら

私は主にTypeScriptでのフロントエンド開発を担当しております。