技術情報ブログ
Angular
2021.08.25

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

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

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

 

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

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

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

 

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

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

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

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

 

環境

  • Node: 14.17.0
  • npm: 6.14.13
  • Angular: 12.1.1
  • Angular Material: 12.1.1
  • TypeScript: 4.3.5

 

CSS との比較

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

 BreakpointObserver
(ngIf ディレクティブ)
CSS
(メディアクエリ)
ノード(DOM)非表示の場合、DOM 上にノードが存在しない非表示の場合でも、DOM 上にノードが存在する
Angular コンポーネント非表示の場合、Angular コンポーネントは生成されない表示/非表示に関わらず、Angular コンポーネントが生成される
処理負荷DOM 上のノード生成/破棄が行われるため、負荷がかかる場合がある画面上の表示切り替えのみなので低負荷

 

利用場面

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

BreakpointObserver(ngIf ディレクティブ)

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

 

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

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

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

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

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

 

css(メディアクエリ)

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

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

 

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

  • BreakpointObserver.observe メソッドに分岐点となる画面サイズ情報を渡す。

  • state.matches から、現在の画面サイズが 渡した画面サイズ情報にマッチしているか判定する。

  • 判定した情報を元に、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でのフロントエンド開発を担当:木戸裕貴

木戸裕貴

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

Twitter
facebook
シェアする
記事カテゴリ
最新記事
Power PlatformPower Apps
2021.09.17

Power Apps で保守性を高めつつギャラリーのタブ切り替えを実装する

Power PlatformPower AutomateSharePointExcel
2021.09.15

Power AutomateでExcelをSharePointリストにインポートしたい時に考えること(第10回)

Power PlatformPower AutomateSharePointExcel
2021.09.10

Power AutomateでExcelをSharePointリストにインポートしたい時に考えること(第9回)

Power PlatformPower Automate
2021.09.08

Power Automate・Dataverse for Teams:選択肢列や参照列の表示名を取得する

Power PlatformPower AutomateSharePointExcel
2021.09.03

Power AutomateでExcelデータをSharePointにインポートするために考えること(第8回)

人気記事ランキング
1
Power PlatformPower Apps
2020.10.02

世界に広がる「モデル駆動型アプリ」のココがスゴイ!【第1回】

2
Power PlatformPower AutomateSharePointExcel
2021.07.14

Power AutomateでExcelデータをSharePointにインポートするために考えること(第2回)

3
Power PlatformPower AutomateSharePointExcel
2021.06.23

Power AutomateでExcelデータをSharePointにインポートするために考えること(第1回)

4
バス予報
2020.10.15

独立行政法人日本貿易振興機構(ジェトロ)による「日・ASEANにおけるアジアDX促進事業」の「マレーシア渋滞緩和を目指したサイバージャヤスマートシティバス 実証プロジェクト」採択について その①

5
バス予報
2020.10.16

独立行政法人日本貿易振興機構(ジェトロ)による「日・ASEANにおけるアジアDX促進事業」の「マレーシア渋滞緩和を目指したサイバージャヤスマートシティバス 実証プロジェクト」採択について その②

PageTop
ページトップに戻る