2022年10月6日JavaScriptツイートシェアはてブ送るPocketUAParser.jsとはユーザーエージェント(User-Agent)からブラウザやエンジン、OS、CPU、デバイスの種類/モデルを検出するJavaScriptライブラリです。今回はReactおよびNext.jsの環境でUAParser.jsを利用したモバイル判定の方法を紹介します。文字列削減に関する最新情報の発表からもわかるように、ユーザーエージェントの仕様は今後変わっていくと考えられます。ユーザーエージェントに関する情報は定期的にウォッチしておくことをオススメします。UAParser.jsの利用方法UAParser.jsのインストール方法は以下の通りです。UAParser([uastring][,extensions])もしくはUAParser([uastring][,extensions])で作成したコンストラクタを参照することで、ユーザーエージェントからデバイスなどの情報を取得できます。以下では、ChromeのDevToolsでブラウザをiPhoneにエミュレートした際の結果について紹介します。UAParser([uastring][,extensions])を利用したコードは以下の通りです。UAParser([uastring][,extensions])を利用したコードは以下の通りです。モバイルとPCで適用するCSSクラスを分けるNext.jsの環境において、UAParser.jsを利用してモバイルとPCで適用するCSSクラスを分ける方法について紹介します。具体的なコードは以下の通りです。lightgreen;}上記のコードのロジックは以下の通りです。取得したユーザーエージェントからコンストラクタを生成してモバイル判定を行うgetServerSidePropsでモバイル判定の結果が保存されたisMobileを返すPageでisMobileをPropsとして受け取るisMobileの真偽値に応じて付与するCSSクラスを変更するなお、付与するCSSクラスの出しわけにはclassnamesを利用しています。CSSクラスの出し分け方法の詳細解説は【React】classNameでよく使う定義方法(複数クラス、条件付きクラス)で紹介しています。さいごにTwitter(@nishina555)やってます。フォローしてもらえるとうれしいです!RECOMMENDJavaScriptNext.jsReactツイートシェアはてブ送るPocketプロフィールnishina大企業、ベンチャーと色々なところでWebエンジニアやっています。退職手続きから案件参画まで。人気の記事iPhoneの連絡先の保存がうまくできない!?原因は同期設定かも。