Nuxt.jsでデバイス判定をする方法解説【スマホやデスクトップによって処理を変える】

こんにちは、フルスタックエンジニアのryuです。

今回の記事では、Nuxt.jsでデバイス判定をする方法を解説します。デバイスを判定して、スマホやデスクトップからのアクセスによって処理を変える方法を解説します。デバイス判定をする方法はnuxtjs/deviceというモジュールをインストールするだけです。

※本ページには、プロモーション・アフィリエイトリンクが含まれています

Nuxt.jsでデバイス判定をする方法解説
- nuxtjs/deviceモジュールのインストール
- Nuxtの設定ファイルでモジュールを読み込む
Nuxtにアクセスしてきたデバイスによって処理を変える
- v-ifを使ってデバイス判定を行う
- デバイス以外にもOSやブラウザの種類でも判定が可能
Nuxt.jsでデバイス判定をする方法まとめ

Nuxt.jsでデバイス判定をする方法解説

Nuxt.jsでアクセスしてきたデバイスによって処理を変えるにはどうすればいいの・・・？

今回の記事では、Nuxt.jsでデバイスを判定する方法を解説します。デバイス判定をすることで、アクセスしてきた端末によって処理を変更することができます。

デバイス判定をする手順は以下の通りです。

モジュールをインストール
nuxt.config.jsでモジュールの読み込み
v-ifを使って判定

では、詳しく解説します

nuxtjs/deviceモジュールのインストール

まず、モジュールをインストールします。コマンドは以下の通りです。

npm install @nuxtjs/device
もしくは
yarn add  @nuxtjs/device

モジュールのソースコードはこちらのGitHubで公開されています。

GitHub – nuxt-community/device-module: Nuxt.js module for detecting device type.

モジュールのインストールが完了したら、Nuxt.js側でモジュールを読み込みます。

Nuxtの設定ファイルでモジュールを読み込む

次にNuxt.js側でインストールしたモジュールを読み込みます。nuxt.config.jsを開いてください。そして、以下のように設定します。

{
  buildModules: [
   '@nuxtjs/device',
  ]
}

これで完了です！モジュールを使う準備が完了しました。

Nuxtにアクセスしてきたデバイスによって処理を変える

先ほどまで、モジュールの準備をしてきました。ここからはデバイス判定を行うモジュールの使い方を解説します。

アクセスしてきたデバイスによって、処理を変える方法を解説します。

v-ifを使ってデバイス判定を行う

では、早速コーディングしてみましょう。pagesディレクトリのindex.vueを開きましょう。下記のように設定します。

<template>
  <div>
    <div v-if="$device.isDesktop">
      Desktop
    </div>
    <div v-else-if="$device.isTablet">
      Tablet
    </div>
    <div v-else>
      Mobile
    </div>
  </div>
</template>

設定できたら、nuxt.jsにアクセスしてみましょう。

開発モードで画面の横幅を変更すると、PCからでもスマホの画面を確認することができます。

このように、v-ifを使用することで、デバイスの判定を行うことができます。デバイスの情報は$deviceの中に格納されています。

デバイス以外にもOSやブラウザの種類によって変更が可能です。

デバイス以外にもOSやブラウザの種類でも判定が可能

デバイス以外にも、OSやブラウザによって処理を変更することが可能です。

デスクトップの判定をする場合、v-if文に”$device.isDesktop”と記述しましたが、その部分を変更します。デバイスのタイプは下記のものが準備されています。

$device.isDesktop
$device.isMobile
$device.isTablet
$device.isMobileOrTablet
$device.isDesktopOrTablet
$device.isIos
$device.isWindows
$device.isMacOS
$device.isAndroid
$device.isFirefox
$device.isEdge
$device.isChrome
$device.isSamsung
$device.isCrawler

また、上記のデバイスに無い場合でもカスタムで作成することができます。詳しくは、先ほどのGithubをご覧ください。