react-device-detect による User Agent 判定
Published: 2020-03-25 23:58:03

User Agent の判定って自前で全部やろうとすると想定してないケースも多くて大変ですよね。
そこで、React 使っている人は [react-device-detect](https://github.com/duskload/react-device-detect) というライブラリを使っている人も多いかと思います。

とはいえ、実際にどういった判定になるのか、想定してなかったみたいなことがあるとこまるので、いくつかの User Agent でどのような判定になるのか確認してみました。

判定は Chrome の developer console 使って、ちまちま User Agent いじって手元で確認しました。

# 利用した User Agent

https://developers.whatismybrowser.com/useragents/explore/
ここから探してピックアップしてみました。

プラットフォーム (OS とか) とブラウザの組み合わせをなるべく作ったつもり。

| Platform | Browser | UserAgent |
| --- | --- | --- |
| Windows | Chrome | Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.86 Safari/537.36 |
|  | Firefox | Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:63.0) Gecko/20100101 Firefox/63.0 |
|  | Edge | Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3282.140 Safari/537.36 Edge/18.17763 |
|  | IE | Mozilla/5.0 (Windows NT 6.1; WOW64; Trident/7.0; rv:11.0) like Gecko |
| Mac | Chrome | Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.102 Safari/537.36 |
|  | Safari | Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_6) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/12.0.1 Safari/605.1.15 |
|  | Firefox | Mozilla/5.0 (Macintosh; Intel Mac OS X 10.11; rv:62.0) Gecko/20100101 Firefox/62.0 |
| Surface Pro 3 | Edge | Mozilla/5.0 (Windows NT 10.0; Win64; x64; ServiceUI 13) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3282.140 Safari/537.36 Edge/17.17134 |
|  | IE | Mozilla/5.0 (Windows NT 6.3; WOW64; Trident/7.0; Touch; rv:11.0) like Gecko |
| Android | Chrome | Mozilla/5.0 (Linux; Android 6.0.1; SM-J700M) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.80 Mobile Safari/537.36 |
|  | Firefox | Mozilla/5.0 (Android 8.0.0; Mobile; rv:63.0) Gecko/63.0 Firefox/63.0 |
|  | Opera Mini | Opera/9.80 (Android; Opera Mini/20.0.2254/117.37; U; fr) Presto/2.12.423 Version/12.16 |
| Android Tablet | Chrome | Mozilla/5.0 (Linux; Android 8.1.0; SM-T580) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.80 Safari/537.36 |
|  | Firefox | Mozilla/5.0 (Android 7.0; Tablet; rv:62.0) Gecko/62.0 Firefox/62.0 |
|  | Edge | Mozilla/5.0 (Linux; Android 7.0; SM-T580 Build/NRD90M) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.123 Safari/537.36 EdgA/42.0.0.2529 |
|  | Samsung Browser | Mozilla/5.0 (Linux; Android 7.0; SAMSUNG SM-T719 Build/NRD90M) AppleWebKit/537.36 (KHTML, like Gecko) SamsungBrowser/6.2 Chrome/56.0.2924.87 Safari/537.36 |
| iPhone | Chrome | Mozilla/5.0 (iPhone; CPU iPhone OS 12_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) CriOS/70.0.3538.75 Mobile/15E148 Safari/605.1 |
|  | MobileSafari | Mozilla/5.0 (iPhone; CPU iPhone OS 12_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/12.0 Mobile/15E148 Safari/604.1 |
|  | Firefox | Mozilla/5.0 (iPhone; CPU iPhone OS 12_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) FxiOS/14.0b12646 Mobile/16B92 Safari/605.1.15 |
|  | Unknown | Mozilla/5.0 (iPhone; CPU iPhone OS 12_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Mobile/16A366 |
|  | Opera | Mozilla/5.0 (iPhone; CPU iPhone OS 8_1_2 like Mac OS X) AppleWebKit/600.1.4 (KHTML, like Gecko) OPiOS/9.1.0.86723 Mobile/12B440 Safari/9537.53 |
| iPad | Chrome | Mozilla/5.0 (iPad; CPU OS 12_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) CriOS/70.0.3538.75 Mobile/15E148 Safari/605.1 |
|  | MobileSafari | Mozilla/5.0 (iPad; CPU OS 12_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/12.0 Mobile/15E148 Safari/604.1 |
|  | Firefox | Mozilla/5.0 (iPad; CPU OS 12_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) FxiOS/14.0b12646 Mobile/16B92 Safari/605.1.15 |
|  | Unknown | Mozilla/5.0 (iPad; CPU OS 12_0_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Mobile/16A404 |

# 確認する react-device-detect の関数

良く使うであろうやつをピックアップ

* Device.isMobile
* Device.isTablet
* Device.isMobileOnly
* Device.isIOS
* Device.isAndroid
* Device.isWinPhone
* Device.isSafari
* Device.isMobileSafari
* Device.isChrome
* Device.isFirefox
* Device.isIE
* Device.isEdge
* Device.isBrowser

# 確認結果

| Platform | Browser | isMobile | isTablet | isMobileOnly | isIOS | isAndroid | isSafari | isMobileSafari | isChrome | isFirefox | isIE | isEdge | isBrowser |
| --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- |
| Windows | Chrome | FALSE | FALSE | FALSE | FALSE | FALSE | FALSE | FALSE | **TRUE** | FALSE | FALSE | FALSE | **TRUE** |
|  | Firefox | FALSE | FALSE | FALSE | FALSE | FALSE | FALSE | FALSE | FALSE | **TRUE** | FALSE | FALSE | **TRUE** |
|  | Edge | FALSE | FALSE | FALSE | FALSE | FALSE | FALSE | FALSE | FALSE | FALSE | FALSE | **TRUE** | **TRUE** |
|  | IE | FALSE | FALSE | FALSE | FALSE | FALSE | FALSE | FALSE | FALSE | FALSE | **TRUE** | FALSE | **TRUE** |
| Mac | Chrome | FALSE | FALSE | FALSE | FALSE | FALSE | FALSE | FALSE | **TRUE** | FALSE | FALSE | FALSE | **TRUE** |
|  | Safari | FALSE | FALSE | FALSE | FALSE | FALSE | **TRUE** | FALSE | FALSE | FALSE | FALSE | FALSE | **TRUE** |
|  | Firefox | FALSE | FALSE | FALSE | FALSE | FALSE | FALSE | FALSE | FALSE | **TRUE** | FALSE | FALSE | **TRUE** |
| Surface Pro 3 | Edge | FALSE | FALSE | FALSE | FALSE | FALSE | FALSE | FALSE | FALSE | FALSE | FALSE | **TRUE** | **TRUE** |
|  | IE | FALSE | FALSE | FALSE | FALSE | FALSE | FALSE | FALSE | FALSE | FALSE | **TRUE** | FALSE | **TRUE** |
| **<span style="color: #5692ce"><span style="color: #ef0606">Platform</span>** | **<span style="color: #ef0606">Browser</span>** | **<span style="color: #ef0606">isMobile</span>** | **<span style="color: #ef0606">isTablet</span>** | **<span style="color: #ef0606">isMobileOnly</span>** | **<span style="color: #ef0606">isIOS</span>** | **<span style="color: #ef0606">isAndroid</span>** | **<span style="color: #ef0606">isSafari</span>** | **<span style="color: #ef0606">isMobileSafari</span>** | **<span style="color: #ef0606">isChrome</span>** | **<span style="color: #ef0606">isFirefox</span>** | **<span style="color: #ef0606">isIE</span>** | **<span style="color: #ef0606">isEdge</span>** | **<span style="color: #ef0606">isBrowser</span>** |
| Android | Chrome | **TRUE** | FALSE | **TRUE** | FALSE | **TRUE** | FALSE | FALSE | **TRUE** | FALSE | FALSE | FALSE | FALSE |
|  | Firefox | **TRUE** | FALSE | **TRUE** | FALSE | **TRUE** | FALSE | FALSE | FALSE | **TRUE** | FALSE | FALSE | FALSE |
|  | Opera Mini | FALSE | FALSE | FALSE | FALSE | **TRUE** | FALSE | FALSE | FALSE | FALSE | FALSE | FALSE | **TRUE** |
| Android Tablet | Chrome | **TRUE** | **TRUE** | FALSE | FALSE | **TRUE** | FALSE | FALSE | **TRUE** | FALSE | FALSE | FALSE | FALSE |
|  | Firefox | **TRUE** | **TRUE** | FALSE | FALSE | **TRUE** | FALSE | FALSE | FALSE | **TRUE** | FALSE | FALSE | FALSE |
|  | Edge | **TRUE** | **TRUE** | FALSE | FALSE | **TRUE** | FALSE | FALSE | **TRUE** | FALSE | FALSE | FALSE | FALSE |
|  | Samsung Browser | **TRUE** | **TRUE** | FALSE | FALSE | **TRUE** | FALSE | FALSE | FALSE | FALSE | FALSE | FALSE | FALSE |
| **<span style="color: #5692ce"><span style="color: #ef0606">Platform</span>** | **<span style="color: #ef0606">Browser</span>** | **<span style="color: #ef0606">isMobile</span>** | **<span style="color: #ef0606">isTablet</span>** | **<span style="color: #ef0606">isMobileOnly</span>** | **<span style="color: #ef0606">isIOS</span>** | **<span style="color: #ef0606">isAndroid</span>** | **<span style="color: #ef0606">isSafari</span>** | **<span style="color: #ef0606">isMobileSafari</span>** | **<span style="color: #ef0606">isChrome</span>** | **<span style="color: #ef0606">isFirefox</span>** | **<span style="color: #ef0606">isIE</span>** | **<span style="color: #ef0606">isEdge</span>** | **<span style="color: #ef0606">isBrowser</span>** |
| iPhone | Chrome | **TRUE** | FALSE | **TRUE** | **TRUE** | FALSE | FALSE | FALSE | **TRUE** | FALSE | FALSE | FALSE | FALSE |
|  | MobileSafari | **TRUE** | FALSE | **TRUE** | **TRUE** | FALSE | **TRUE** | **TRUE** | FALSE | FALSE | FALSE | FALSE | FALSE |
|  | Firefox | **TRUE** | FALSE | **TRUE** | **TRUE** | FALSE | FALSE | FALSE | FALSE | **TRUE** | FALSE | FALSE | FALSE |
|  | Unknown | **TRUE** | FALSE | **TRUE** | **TRUE** | FALSE | FALSE | FALSE | FALSE | FALSE | FALSE | FALSE | FALSE |
|  | Opera | **TRUE** | FALSE | **TRUE** | **TRUE** | FALSE | FALSE | FALSE | FALSE | FALSE | FALSE | FALSE | FALSE |
| iPad | Chrome | **TRUE** | **TRUE** | FALSE | **TRUE** | FALSE | FALSE | FALSE | **TRUE** | FALSE | FALSE | FALSE | FALSE |
|  | MobileSafari | **TRUE** | **TRUE** | FALSE | **TRUE** | FALSE | **TRUE** | **TRUE** | FALSE | FALSE | FALSE | FALSE | FALSE |
|  | Firefox | **TRUE** | **TRUE** | FALSE | **TRUE** | FALSE | FALSE | FALSE | FALSE | **TRUE** | FALSE | FALSE | FALSE |
|  | Unknown | **TRUE** | **TRUE** | FALSE | **TRUE** | FALSE | FALSE | FALSE | FALSE | **TRUE** | FALSE | FALSE | FALSE |
| **<span style="color: #5692ce"><span style="color: #ef0606">Platform</span>** | **<span style="color: #ef0606">Browser</span>** | **<span style="color: #ef0606">isMobile</span>** | **<span style="color: #ef0606">isTablet</span>** | **<span style="color: #ef0606">isMobileOnly</span>** | **<span style="color: #ef0606">isIOS</span>** | **<span style="color: #ef0606">isAndroid</span>** | **<span style="color: #ef0606">isSafari</span>** | **<span style="color: #ef0606">isMobileSafari</span>** | **<span style="color: #ef0606">isChrome</span>** | **<span style="color: #ef0606">isFirefox</span>** | **<span style="color: #ef0606">isIE</span>** | **<span style="color: #ef0606">isEdge</span>** | **<span style="color: #ef0606">isBrowser</span>** |

# まとめ

react-device-detect で User Agent がどう判定されるのか確認してみました。
気になるところとしては、Tablet は isMobileOnly 判定が false になるところでしょうか。
また、isMobileSafari は、isMobile と isSafari の AND なので、実際には使うケース少ないかもしれません (Android 考慮すると先に isMobile 判定するから)。