【React】User-AgentのPC/スマホ/タブレット判定

  • このエントリーをはてなブックマークに追加
  • Pocket

こんにちは。タクマ™ [@suwaru_blog] です。

React で User-Agent が使えない!?

これ、初心者がハマりがちな React あるあるです。
React は仮想 DOM を使うので、そのままだと DOM に含まれる User-Agent にアクセスできません。

今回は React で DOM にアクセスできる componentDidMount() 内で、
PC / スマホ / タブレット判定する User-Agent の使い方を紹介します。

React で User-Agent を使う方法

componentDidMount() というライフサイクルメソッド内で DOM にアクセスできます。

PC / スマホ / タブレット判定する

動かしているのは Next.js ですが、素の React でも同じ書き方ができると思います。

import React, {Component} from 'react';

class TestComponent extends Component {
    constructor(props) {
        super(props);
        this.state = {
            device: 'pc',
        };
    }

    componentDidMount() {
        const ua = window.navigator.userAgent.toLowerCase();
        if (ua.indexOf('iphone') > 0 || ua.indexOf('ipod') > 0 || ua.indexOf('android') > 0 && ua.indexOf('mobile') > 0) {
            this.setState({ device: 'sp' });
        } else if (ua.indexOf('ipad') > 0 || ua.indexOf('android') > 0) {
            // iOS12 まで
            this.setState({ device: 'tab' });
        } else if (ua.indexOf('ipad') > -1 || ua.indexOf('macintosh') > -1 && 'ontouchend' in document) {
            // iOS13 以降
            this.setState({ device: 'tab' });
        } else {
            this.setState({ device: 'pc' });
        }
    }
    
    // 省略

User Agent を使って state に pc sp tab という文字列を設定しています。
iOS13 以降の iPad は User-Agent の判定方法が変わるのは要注意ですね。

お仕事ください!

僕が代表を務める 株式会社 EeeeG では Web 制作・システム開発・マーケティング相談を行っています。
なにかお困りごとがあれば、Twitter DM や Web サイトからお気軽にご相談ください。

コメントを残す

*