ユーザーのデバイスやOSを判定する
TL, DL
私は普段はブロックチェーンの会社で SWE をしていて現在はフロントエンド業務を主に担当しています。趣味でいろんなライブラリの utility 関数を見るのが好きなのですが、この記事では yamada-ui の utility 関数の一部をご紹介します。yamada-ui ではユーザーのデバイスや OS を判定する関数としてisMacやisAppleやisSafariという関数が用意されています。
実際のコード
まずは実際のコードを見てみましょう。
なんか多くの関数がありますが、見てみると何をする関数なのか何となく分かります。
この中で肝心なのはcreateDomとgetPlatformです。
createDom は実行環境が DOM を持つブラウザかどうかを判断する関数です。
window オブジェクトが undefined ではないか、window.document が存在し、さらに window.document.createElement 関数が存在するかをチェックします。
getPlatformはユーザーの OS を判定する関数です。
navigatar.userAgentData.platform が存在していれば userAgentData の platform を返し、なければ navigatar の platform を返しています。
ではなぜこのようなことをしているのでしょうか？
それは userAgentData がまだ全てのブラウザに対応していないのです。
MDNを見てみましょう。
MDN によると userAgentData はまだ experimental と書かれています。
MDN Web Docs で、ある技術が実験的 (experimental) と記述されている場合、それは、その技術がまだ発展途上で未熟であり、現在ウェブのプラットフォームに追加される（または追加を検討している）過程にあることを意味しています。 ある技術を実験的であると示すことは、何らかの制作プロジェクト（つまり、単なるデモや実験ではないプロジェクト）でその技術を使用する前に慎重に考えるべきであるということを示します。読者は実験的な機能を試し、ブラウザーベンダーや 標準規格の作成者にフィードバックを提供することが推奨されます。
ブラウザの対応表を見てみても Firefox や Safari ではまだ対応されていません。
そのため userAgentData がない場合はそのまま platform を返しています。
実際にこの utility 関数を使用してPRが先日マージされました。
いかがだったでしょうか。このような utiltiy 関数はもしかしたら実務ではあまり使う機会はないかもしれないです。ただ Web を主戦場としている我々としては知っていたい知識ですね。
Discussion