愚痴記事です

あしからず

画面周りを作ってる最中に起きたことでふと思い立った。

あ、userAgentって廃止するんだっけなぁ。

なんだかんだで、文字列正規表現で判定してるプロジェクトも多いし、概要くらいは知ってたけどブラウザの対応状況とかも一律にならないから今までのやりかたしかやってなかった。

まぁもう2023年だしそろそろuserAgentで実装するよりuserAgentDataで実装した方がいいなーと思って当初のチェックはしてなかった。

参考としてuserAgentの実装とuserAgentDataの実装方法

userAgentの実装方法

const isMatch = navigator.userAgent.match(/iPhone|Android.+Mobile/);
const isMobile = isMatch != null;

userAgentDataの実装方法

// 環境によりけりですが、こんな感じのデータが取れます。
{
  brands: [
    {
      brand: 'Not/A)Brand',
      version: '99'
    },
    {
      brand: 'Google Chrome',
      version: '115'
    },
    {
      brand: 'Chromium',
      version: '115'
    }
  ],
  mobile: false,
  platform: 'Windows',
}

const isMobile = navigator.userAgentData.mobile;

楽！！！それって最高じゃん！！
ってウキウキで実装したところconsole上でエラーが発生。

どうやらiPhone（Chrome）でもuserAgentDataがnullで取得されておる。なんだこれ？

どうやらPCはスケジュール通りに移行作業が行われてるようですが、SPブラウザはそれとは別のタイムラインで計画されている？
（どなたか詳しい方がいれば教えてください。）

なので最終的にこんな実装に落ち着きました。

const isMobile = () => {
  const { userAgent, userAgentData } = navigator;

  if (userAgentData == null) {
    return userAgent.match(/iPhone|Android.+Mobile/) != null;
  }
  return userAgentData.mobile;
}

余計面倒じゃん！！！！！！！！
喜びがない～・・・・

個人的な感想としては
新しくプロパティ追加したのであれば影響も僅かだろうし一気にやってほしいよなぁと思いながらも移行できない大人の事情があるのか。ブラウザの実装者も大変やなぁと現実を見て泣きそうになるあーみーでした。

中身がうっすい記事ですが、今回はここまでとなります。