【Vue.js】デバイスごとの表示切り替え｜レスポンシブUIのコンポーネント分離戦略

Vue.jsでレスポンシブ対応のUIを実装する際、単にCSSのメディアクエリで対応するのではなく、デバイスごとに異なるコンポーネントを表示したいというニーズが生まれることがあります。特にスマートフォンとPCで表示レイアウトが大きく異なる場合、コンポーネントの分離戦略が有効です。

この記事では、JavaScriptによるデバイス判定とVueの条件レンダリングを組み合わせて、デバイスごとに表示するUIコンポーネントを切り替える方法を解説します。

ウィンドウ幅に応じてデバイスを判定

まずは、画面サイズに応じて「スマホ」か「PC」かを判定します。これはVueのライフサイクル内で実行し、リサイズイベントにも対応するようにします。

<script>
import MobileComponent from '@/components/MobileComponent.vue';
import DesktopComponent from '@/components/DesktopComponent.vue';

export default {
  data() {
    return {
      isMobile: false
    };
  },
  mounted() {
    this.checkDevice();
    window.addEventListener('resize', this.checkDevice);
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.checkDevice);
  },
  methods: {
    checkDevice() {
      this.isMobile = window.innerWidth <= 768;
    }
  },
  components: {
    MobileComponent,
    DesktopComponent
  }
};
</script>

デバイスに応じてコンポーネントを切り替え

判定結果に基づき、template内で表示コンポーネントを切り替えます。

<template>
  <div>
    <MobileComponent v-if="isMobile" />
    <DesktopComponent v-else />
  </div>
</template>

この方法を使えば、同じURLでもデバイスに応じた適切なUIを提供できます。コンポーネントを分けることで保守性も高まり、それぞれのデバイスに特化した最適な設計が可能になります。

外部ライブラリを使って判定精度を上げる

より高度な判定が必要な場合は、ua-parser-js や mobile-detect といったライブラリを導入するのも一つの手です。ユーザーエージェント情報からOSやデバイス種別を取得し、条件分岐に活用できます。

Nuxt.jsでの応用

Nuxt.jsではサーバーサイドレンダリングの都合上、クライアントサイドでのみデバイス判定を行う必要があります。process.client を活用し、mountedフック内で処理を実装するのが一般的です。

if (process.client) {
  // クライアント側でのみデバイスチェックを実行
}

まとめ

Vue.jsでは、デバイスに応じて表示するコンポーネントを切り替えることで、より柔軟かつ最適化されたレスポンシブUIを実現できます。CSSだけでは対応が難しい構成でも、JavaScriptによる条件分岐とコンポーネント分離により、ユーザー体験を損なうことなくスマートな実装が可能です。