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

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

これ、初心者がハマりがちな React あるあるです。
React は仮想 DOM を使うので、そのままだと DOM に含まれる 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 の判定方法が変わるのは要注意ですね。