【Angular】BreakpointObserverとメディアクエリの比較と利用メリット

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

本記事では、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

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

木戸裕貴

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

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