Reactでモバイルとデスクトップを賢く判別！ユーザー体験をワンランクアップさせる方法

2024-06-25

ReactJS でモバイルとデスクトップブラウザを判別する方法

window.innerWidth と window.innerHeight プロパティは、ブラウザウィンドウの幅と高さをピクセル単位で返すことができます。これらのプロパティを使用して、デバイスのサイズを大まかに判断することができます。例えば、以下のようなコードを使用できます。

const isMobile = window.innerWidth <= 600 && window.innerHeight <= 800;

このコードは、ブラウザウィンドウの幅が 600 ピクセル以下、高さが 800 ピクセル以下である場合、デバイスをモバイルと見なします。

Media Queries を使用する

CSS @media クエリを使用して、デバイスのサイズに基づいてスタイルを適用することができます。例えば、以下のような CSS を使用できます。

@media only screen and (max-width: 600px) {
  /* モバイルデバイス用のスタイル */
}

@media only screen and (min-width: 601px) {
  /* デスクトップデバイス用のスタイル */
}

この CSS は、ブラウザウィンドウの幅が 600 ピクセル以下の場合にモバイルデバイス用のスタイルを適用し、幅が 601 ピクセル以上の場合はデスクトップデバイス用のスタイルを適用します。

第三者ライブラリを使用する

react-device-detect のような、デバイスを検出するのに役立つサードパーティ製ライブラリがいくつかあります。これらのライブラリは、より高度な機能を提供することが多く、ユーザーエージェント、画面解像度、ピクセル密度などの様々な要因に基づいてデバイスを判断することができます。

例：react-device-detect を使用する

import { isMobile } from 'react-device-detect';

const MyComponent = () => {
  if (isMobile) {
    return <MobileView />;
  } else {
    return <DesktopView />;
  }
};

このコードは、react-device-detect ライブラリを使用してデバイスを検出し、デバイスの種類に応じて異なるコンポーネントをレンダリングします。

上記の方法は、いずれも ReactJS アプリケーションでモバイルとデスクトップブラウザを判別するために使用できます。どの方法を使用するかは、具体的なニーズと要件によって異なります。

補足:

上記のコード例はほんの一例であり、状況に応じて調整する必要があります。
ユーザーのデバイスを検出する際には、ユーザーのプライバシーを尊重することが重要です。ユーザーの同意なしにデバイスに関する情報を収集することは避けてください。

import React from 'react';
import { isMobile } from 'react-device-detect';

const MobileView = () => {
  return (
    <div>
      <h1>モバイルデバイス</h1>
      <p>このコンポーネントはモバイルデバイスでのみ表示されます。</p>
    </div>
  );
};

const DesktopView = () => {
  return (
    <div>
      <h1>デスクトップブラウザ</h1>
      <p>このコンポーネントはデスクトップブラウザでのみ表示されます。</p>
    </div>
  );
};

const MyComponent = () => {
  if (isMobile) {
    return <MobileView />;
  } else {
    return <DesktopView />;
  }
};

export default MyComponent;

このコードでは、react-device-detect ライブラリを使用して isMobile 関数を呼び出し、デバイスがモバイルかどうかを判断しています。デバイスがモバイルの場合は MobileView コンポーネントを、そうでない場合は DesktopView コンポーネントをレンダリングします。

このコードをさらに拡張して、より複雑なロジックを実装することができます。例えば、デバイスの種類だけでなく、画面解像度やピクセル密度なども考慮して、ユーザーインターフェースを調整することができます。

ReactJS でモバイルとデスクトップブラウザを判別するその他の方法

User Agent 文字列を使用する

navigator.userAgent プロパティを使用して、ユーザーエージェント文字列を取得できます。この文字列には、ブラウザやオペレーティングシステムに関する情報が含まれています。この情報を使用して、デバイスの種類を大まかに判断することができます。

const isMobile = /iPhone|iPad|iPod|Android|webOS|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);

このコードは、ユーザーエージェント文字列に iPhone、iPad、iPod、Android、webOS、BlackBerry、IEMobile、Opera Mini のいずれかが含まれているかどうかをチェックします。これらの文字列はいずれも、モバイルデバイスで使用される一般的なブラウザを表しています。

window.matchMedia API を使用して、メディアクエリの結果に基づいてデバイスを判断することができます。例えば、以下のようなコードを使用できます。

const isMobile = window.matchMedia('only screen and (max-width: 600px)').matches;

どの方法を選択するかは、具体的なニーズと要件によって異なります。単純な方法でデバイスを判断するだけなら、window.innerWidth と window.innerHeight プロパティを使用するか、navigator.userAgent 文字列をチェックするのが良いでしょう。より複雑なロジックが必要な場合は、window.matchMedia API またはライブラリを使用することを検討してください。

import React from 'react';
import { isMobile } from 'react-device-detect';

const MobileView = () => {
  return (
    <div>
      <h1>モバイルデバイス</h1>
      <p>このコンポーネントはモバイルデバイスでのみ表示されます。</p>
    </div>
  );
};

const DesktopView = () => {
  return (
    <div>
      <h1>デスクトップブラウザ</h1>
      <p>このコンポーネントはデスクトップブラウザでのみ表示されます。</p>
    </div>
  );
};

const MyComponent = () => {
  if (isMobile) {
    return <MobileView />;
  } else {
    return <DesktopView />;
  }
};

export default MyComponent;