AngularのPLATFORM_IDのユースケース

こんにちは！kossyです！

さて、今回は個人開発アプリでお世話になっているangular-tokenというnpmライブラリのソースコードを読んでいる時に見つけた、
PLATFORM_IDについて、これが何なのかについてと、ユースケースについてもブログに残してみたいと思います。

A token that indicates an opaque platform id.

Google翻訳先生に訳してもらったところ、

不透明なプラットフォームIDを示すトークン。

とのこと。

不透明なって何やねん。と思ってopaqueを英和辞書で引いてみましたが、

どうやら「曖昧な」とか「不明瞭な」という意味があるみたい。

プラットフォーム = 実行環境だとすると、実行環境次第で値が決まるから「不明瞭なトークン」っていう説明になっているんでしょう。多分。

使い方

PLATFORM_IDは実行環境によって返り値が異なります。

ブラウザの場合は「browser」
サーバーの場合は「server」が返り値になります。

なので、「実行環境によって処理を分岐したい」みたいなときに役立ちます。

以下、実装例です。

src/app.component.ts



import { Component, Injectable, Optional, Inject, PLATFORM_ID } from '@angular/core';
import { isPlatformServer } from '@angular/common';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})

export class AppComponent {
  constructor(
    @Inject(PLATFORM_ID) private platformId: Object,
  ) {}

  showPlatform(): string {
    if (isPlatformServer(this.platformId)) {
      return 'サーバー';
    } else {
      return 'ブラウザー';
    }
  }
}



src/app.component.html

<p>あなたの実行環境は{{showPLatform()}}です。</p>

実践的な使い方としては、実行環境がブラウザの場合だけwindowオブジェクトを用いた処理をする、
みたいな感じでしょうか。

勉強になりました。

参考にさせて頂いた記事
AngularUniversalでクライアントのみ（サーバのみ）実行させる方法 - Qiita
Angular 日本語ドキュメンテーション