技術情報ブログ
Angular
2021.08.25

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

【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でのフロントエンド開発を担当しております。

シェアする
記事カテゴリ
最新記事
2024.09.18

Power Automateのベストプラクティス・アンチパターン(6)【Power Automate上でExcelファイルを編集する際の注意点】

2024.06.26

一歩先へ進む企業のためのPower Platform内製化マニュアル:Power Apps・Power Automateの内製化に必要なリンク一覧

2024.06.05

【2024年6月更新】Power Automate 設計・構築時のTips集

2024.05.15

非エンジニア【(元)自治体職員】がローコード開発をして気が付いたこと コーディング規約とPower Platformプレミアムサンプルアプリ集

2024.05.01

Power Apps・Power Automateの勉強方法(2)

モデル駆動型アプリPower AppsPower PlatformSharePointExcelPower AutomateC#attributevalidationローコードAngularAccessInfoPathMatTableAngular Materialデータ構造SortByColumns関数TypeScriptHTMLEF CoreマイグレーションFramework CoreAttribute directivesO/Rマッパーazure sql databaseCase式HTTP RequestCSSxUnit.Net Core 3.1VSCode.Net Core Test ExplorerDataverse for Teamsitem関数Google MapsMarker ClustererRANK()関数Dynamics 365 SalesMicrosoft TranslatorマーカークラスタリングライブラリtailwindcssマルチテナントドロップダウンメニューBreakpointObserverメディアクエリスマホPCレスポンシブ入門初心者中級者キャンバスアプリDatePickerDropdownviewビューアクセス制限承認リマインドSetForAllUpdateContextロードマップ技術It情報技術メッセージIDメールfirst()関数nest入れ子動的リストcollectionコレクション複数の添付ファイル承認フローformエクスポートインポートカスタマイズcomponentダイアログコンポーネントdialogTips新機能変数検索Microsoft 365グループセキュリティグループ送信元メールの送信差出人インスタントクラウドフロー自動化したクラウドフロー委任VBAエラーエクセルerror復元restorePower BI個人列ユーザー列SharePoint Onlineリスト非表示アプリ[市民開発者構築自動化したクラウド フローフローの種類インスタント クラウド フロースケジュール済みクラウド フローレスポンシブ レイアウトresponsive layoutデータ行の制限引き継ぎ退職所有者を変更異動LoopMicrosoftdesignJSONデザインtemplateテンプレート運用選択肢列参照列ChatGPTOpenAIオープンAIチャットGPTgalleryギャラリースクロールコンテナショートカットキーshortcut keyconcat関数文字制限フロー実行開発環境環境本番環境ライセンス環境構築手順pipelineCI/CDパイプラインDevOpsMicrosoft 365簡易在庫管理時間外通知ファイルフィルター クエリドキュメント ライブラリfilter querysortソートmultiple item複数項目シェアポイント便利機能カレンダーCalendarTeamsローコード開発非エンジニア体験談勉強内製化
PageTop
ページトップに戻る