【React】モバイル判定をする方法

最近ではPCよりもスマホでホームページを見ることが多くなってきている。
googleアナリティクスを見ると、当ブログの観覧車は90%以上はデスクトップから
なのだが、スマホでもちゃんと表示できるように対応した。
※まだちゃんとできていないところはあるかも...

ホームページが開かれている端末によって表示を変更するにはライブラリの

• react-device-detect

を使うことで対応したのでその使い方をメモっておく。

react-device-detectとは？

react-device-detectはUserAgentが何かを判定してくれる
メソッドを持っているライブラリ。
具体的には下記のような関数が用意されている

• isMobile
• isTablet
• isMobileOnly
• isIOS
• isAndroid
• isWinPhone
• isSafari
• isMobileSafari
• isChrome
• isFirefox
• isIE
• isEdge
• isBrowser

ブラウザの種類でも判定できる。 詳しくはreact-device-detect参照

react-device-detectの使い方

react-device-detectをインストールする

Copy
yarn add react-device-detect

npmの場合は

Copy
npm install react-device-detect --save

isMobileを使ってスタイルを変更する

isMobileを使ってモバイル判定をしてみる

Copy
/** @jsxImportSource @emotion/react */
import { css } from "@emotion/react";
import { isMobile } from "react-device-detect";

export const StrStyle = () => [
  css`
    color: red;
  `
];

export default function App() {
  return (
    <div>
      {/* mobileの場合は赤になる */}
      <div css={[isMobile && StrStyle]}>
        <h1>Mobile</h1>
      </div>
      {/* mobile以外は赤になる */}
      <div css={[isMobile || StrStyle]}>
        <h1>Not Mobile</h1>
      </div>
    </div>
  );
}

• isMobile判定結果でEmotionでスタイルを設定している。

サンプルを作ったので載せます！

スマホで見てる場合は上が赤色。スマホ以外で見てる場合は
下が赤になっています

Emotionの使い方については下記記事で紹介しています。

UserAgentでビューを出しわける

MobileViewを使えばモバイルから表示する時のみ
ビューを表示させることができる。

Copy
/** @jsxImportSource @emotion/react */
import { BrowserView, MobileView } from "react-device-detect";

export default function App() {
  return (
    <div>
      {/* mobileの時のみ表示 */}
      <MobileView>
        <h1>Mobile</h1>
      </MobileView>
      {/* browserの時のみは赤になる */}
      <BrowserView>
        <h1>browser</h1>
      </BrowserView>
    </div>
  );
}

サンプル載せときます！

Mobileはスマホから表示時、browserはブラウザから表示しか表示されないようになります

まとめ

UserAgentの判定は自分で実装しようとすると結構つらいので
react-device-detectを使うのがよさそう。

また別の方法としてはEmotionのメディアクエリー(@media)を
を使って画面のwidthのサイズで判定する方法もある。

【React × Emotion】メディアクエリー(@media)を使ってみる

react + emotion11におけるメディアクエリー(@media)をサンプル実装し使い方を確認した。