vue-mqを使用してVue.jsにレスポンシブデザインを実装する方法

投稿日: 2022-04-20 2022-04-20
タグ: Vue.js

序章

レスポンシブデザインは、Webアプリケーションで頻繁に望まれる機能です。開発者として、私たちはさまざまなデバイスと画面サイズをサポートする必要があります。 CSSは、単純なユースケースと非常に効率的なパフォーマンスの面で優れたツールです。ただし、プリプロセッサ（SASS、 PostCSS 、LESSなど）を使用しても、複雑なメディアクエリの管理は煩雑になる可能性があります。

MatchMedia API のおかげで、Vue.jsはメディアクエリとレスポンシブデザインの処理の複雑さを大幅に軽減できます。コンポーネントベースのアーキテクチャとのシームレスな統合を提供し、クリーンな宣言型およびセマンティックアプローチを維持します。

この記事では、メディアクエリ用のvue-mqプラグインで利用できる機能について説明します。

前提条件

この記事をフォローしたい場合は、次のものが必要になります。

CSSメディアクエリにある程度精通している。
レスポンシブデザインにある程度精通している
また、モバイルファーストアプローチにある程度精通していること。

警告：このプラグインは、画面サイズの変更を検出するためにmatchMediaAPIに依存しています。したがって、古いブラウザやInternet Explorerの場合は、PaulIrishのmatchMediapolyfillを利用する必要があります。

このチュートリアルは、Node v15.8.0、npm v7.5.4、Vue v12.6.11、およびvue-mqv1.0.1で検証されました。

`vue-mq`を使用する

まず、vue-mqを使用するには、ターミナルを開き、既存のVueプロジェクトディレクトリに移動します。次に、次のコマンドを実行します。

npm install vue-mq@1.0.1

次に、コードエディターを使用して、Vueプロジェクトとimportライブラリを編集します。

import VueMq from 'vue-mq'

プラグインを登録するときにカスタムブレークポイントを定義します。キーはブレークポイントであり、値はピクセル単位です。

Vue.use(VueMq, {
  breakpoints: {
    sm: 450,
    md: 1250,
    lg: Infinity,
  }
})

この例では、3つのブレークポイントが定義されています。 smは「小さな画面」用です。「中画面」の場合はmd。「大画面」の場合はlg。

デバイスや自分にとって意味のあるものにちなんでブレークポイントに名前を付けることもできます。

Vue.use(VueMq, {
  breakpoints: {
    mobile: 450,
    tablet: 900,
    laptop: 1250,
    desktop: Infinity,
  }
})

この例では、4つのブレークポイントが定義されています。 mobile、tablet、laptop、およびdesktopの画面サイズ。

条件付きレンダリングでの`vue-mq`の使用

レスポンシブデザインを扱う場合、要素を条件付きでレンダリングすることがよくあります。

たとえば、モバイルデバイス専用の特定のメニューを表示します。

その機能を実現するために、コンポーネントの各インスタンス内でアクセス可能なリアクティブ$mqプロパティを使用できます。その値は常に現在のブレークポイントになります。

<template>
  <mobile-menu v-if="$mq === 'mobile'"></mobile-menu>
</template>

このコンポーネントは、現在の画面サイズが条件を満たしたときにレンダリングされます。「モバイル」のブレークポイントを450ピクセルに定義した場合、このコンポーネントは最大450ピクセルの画面サイズでレンダリングされます。

vue-mqは、条件付きスロットとして機能するグローバルmq-layoutコンポーネントを使用して、この構文の省略形も提供します。

<template>
  <mq-layout mq="mobile">
    <mobile-menu></mobile-menu>
  </mq-layout>
  <mq-layout mq="tablet+">
    <desktop-menu></desktop-menu>
  </mq-layout>
</template>

「タブレット」ブレークポイント名の後のプラス記号（+）に注意してください。これは、vue-mqに、ブレークポイントとすべての大きなブレークポイントもターゲットにするように指示します。

`vue-mq`をプロップ値で使用する

もう1つの非常に一般的な使用例は、画面サイズに基づいたさまざまな値の計算です。

たとえば、レスポンシブグリッドのアイテムを表示するとします。

モバイルでは2列が必要です
タブレットでは3列が必要です
ラップトップでは4列が必要です

つまり、画面サイズに応じて異なる値の小道具をまったく同じグリッドコンポーネントに渡す必要があります。適切な数の列を表示する責任があります。

vue-mqは、宣言型ルールを使用して、ブレークポイントを値にマッピングするためのグローバルフィルターを提供します。

<template>
  <grid-component :column="$mq | mq({
    phone: 2,
    tablet: 3,
    laptop: 4
  })">
  </grid-component>
</template>

このプラグインはモバイルファーストのアプローチを実施していることに注意してください。明示的に定義されていない場合、値はデフォルトで最も近い小さいブレークポイント値になります。

「タブレット」ルール（tablet: 3）を省略した場合、「タブレット」画面サイズの「電話」ルールにフォールバックし、2列を表示します。

同様に、より複雑な値が必要な場合は、computedプロップで移動します。

<template>
  <responsive-title>{{ displayText }}</responsive-title>
</template>

<script>
export default {
  computed: {
    displayText() {
      return this.$mq === 'mobile'
      ? 'You are on a mobile device'
      : 'You are on a larger device'
    }
  }
}
</script>

このコードは、画面サイズに応じて"You are on mobile device"または"You are on a larger device"を表示します。

レスポンシブクラスでの`vue-mq`の使用

CSSを使用してスタイルをすばやく変更したい場合もあります。秘訣は、スタイルを設定する要素の計算クラスとしてブレークポイント名を使用することです。

単一ファイルコンポーネントの例を次に示します。

<template>
  <h1 class="responsive-title" :class="$mq">
    Responsive Title
  </h1>
</template>

<style>
  .responsive-title.mobile { font-size: 1em; }
  .responsive-title.desktop { font-size: 3em; }
</style>

このコードは、画面サイズに応じて「モバイル」または「デスクトップ」クラスを要素に追加します。

他のライブラリの適用

他のライブラリと組み合わせて高度に使用するためのいくつかのアイデアを次に示します。

結論

この記事では、メディアクエリ用のvue-mqプラグインで利用できる機能について説明しました。

vue-mqは、一般的なユースケースの省略形を提供し、その柔軟性により、メディアクエリを自由に作成できます。

Vue.jsの詳細については、Vue.jsトピックページで演習とプログラミングプロジェクトを確認してください。

getdocs

13036

序章

前提条件

vue-mqを使用する

条件付きレンダリングでのvue-mqの使用

vue-mqをプロップ値で使用する

レスポンシブクラスでのvue-mqの使用