実装手順

非常に簡単です。

パッケージのインストール

TypeScriptを使用している場合は、--save-dev オプションをつけてインストールを行います。

npm install react-device-detect --save-dev

コードの実装

例として、Androidの場合は「これはAndroidです。」、iOSの場合は「これはiOSです。」、それ以外の場合は「モバイル端末ではありません。」と表示するコードを書いてみます。

'use client';
import { isAndroid, isIOS } from 'react-device-detect';

export default const Example = () => {
    if (isAndroid) {
        return <p>これはAndroidです。</p>;
    } else if (isIOS) {
        return <p>これはiOSです。</p>;
    } else {
        return <p>モバイル端末ではありません。</p>;
    }
};

Next.jsの場合、react-device-detect はクライアントサイドでしか機能しないため、コンポーネントの先頭に必ず use client を宣言しましょう。エラーが発生しないこともあり、私も気づくのに時間がかかりました。

この例では isAndroid と isIOS を使用していますが、他にも多くの関数が用意されています。詳しくは次のリンクをご覧ください：react-device-detect

難しい点

私はVercelにプロダクトをデプロイしていたため、デプロイするまで動作の検証ができず、paddingのズレなど、さまざまな要因で何度もコミットをやり直すことになりました。

Chromeの検証ツールを使って動作確認ができそうでしたが、動作が少し不安定だったため、最終的に諦めました。もし検証ツールで正しく検証できるようであれば、ぜひ活用してください。

最後に

ここまで、ユーザーのデバイスを判定して、端末ごとに表示を切り替える方法について紹介しました。

たった数行で実装できるということを知らなかったので、感動しました。

必要な場面があれば、ぜひ実装してみてくださいね。

ここまでお読みいただき、ありがとうございました。