スマホ向けVue画面のコンポーネント選び、Vantで迷いがなくなった話

はじめに

スマホ向けのWebページをVueで作るとき、ボタンやフォームひとつ取っても「タップ操作に最適化されているか」「アニメーションは自然か」といった細かい調整に時間を取られた経験はないでしょうか。汎用UIライブラリをそのまま使うと、どうしてもデスクトップ寄りの見た目になってしまい、モバイル特有の使い勝手を後から作り込む羽目になりがちです。

そこで候補に挙がるのが「Vant」です。Vantはモバイルウェブアプリに特化したVue用UIライブラリで、80以上のコンポーネントが最初からタッチ操作前提で設計されています。この記事では、Vantの特徴からインストール、実際のコード例までを紹介します。

まずは動かして雰囲気をつかんでいただくのが早いと思います。先に挙動を見たい方はこちらからどうぞ。

＞＞＞ まずはサンプルを確認 ＜＜＜

Vantとは

VantはYoumi(有讚)チームが開発した、モバイルウェブアプリ向けの軽量なVue UIライブラリです。GitHub上で24,000以上のスターを獲得しており、中国圏のEC・業務アプリを中心に広く採用されています。Vue 2とVue 3の両方に対応しており、TypeScriptで書かれているため型定義も標準で付属します。

主な特徴

• 80以上のコンポーネント - Button、Cell、Form、Popup、Tabbar、ActionSheetなど、モバイル画面で必要になる部品がほぼ揃っています
• 軽量 - コンポーネント1つあたりの平均サイズは約1KB(min+gzip)と非常に軽く、サードパーティへの依存もありません
• タッチ操作に最適化 - スワイプやロングタップなど、モバイルならではの操作感を前提にコンポーネントが設計されています
• テーマのカスタマイズ性 - CSS変数ベースの仕組みにより、ブランドカラーやコンポーネントごとのスタイルを柔軟に上書きできます
• 国際化・ダークモード対応 - 日本語を含む多言語ロケールと、ダークモードが標準でサポートされています
• 高いテストカバレッジ - 90%以上のユニットテストカバレッジを維持しており、業務用途でも安心して使えます

インストール

Vue 3プロジェクトへは、npm・yarn・pnpmのいずれでも導入できます。

# npm
npm i vant

# yarn
yarn add vant

# pnpm
pnpm add vant

Vantのサンプルを動かす

Vantのコンポーネントはimport { Button } from 'vant'のようにモジュール単位で読み込み、対応するCSSも合わせて読み込むだけで使い始められます。下の例ではButtonとCell、Tagを組み合わせ、タップすると選択状態が切り替わるモバイル向けの一覧UIを作っています。

<script setup>
import { ref } from 'vue'
import { Button, Cell, Tag } from 'vant'

const items = ref([
  { label: 'プラン A', selected: true },
  { label: 'プラン B', selected: false },
])

function toggle(item) {
  item.selected = !item.selected
}
</script>

<template>
  <van-cell v-for="item in items" :key="item.label" :title="item.label">
    <template #right-icon>
      <van-tag :type="item.selected ? 'primary' : 'default'" @click="toggle(item)">
        {{ item.selected ? '選択中' : '未選択' }}
      </van-tag>
    </template>
  </van-cell>
</template>

実際に動かせるものが下です。タグをタップすると選択状態が切り替わり、下部の合計金額もリアクティブに更新されます。

van-tagのtypeをprimaryからsuccessやwarningに変えると配色が変わり、van-cellのlabelを書き換えれば説明文もすぐに差し替わります。このように、VantのコンポーネントはPropsを渡すだけで見た目と挙動の両方が決まるため、モバイル画面特有のデザインをゼロから組む必要がありません。

基本的な使い方

アプリ全体で使う場合は、main.tsでVueプラグインとして一括登録すると各テンプレート内で<van-xxx>タグがそのまま使えるようになります。

// main.ts
import { createApp } from 'vue'
import Vant from 'vant'
import 'vant/lib/index.css'
import App from './App.vue'

const app = createApp(App)
app.use(Vant)
app.mount('#app')

ビルドサイズを抑えたい場合は、必要なコンポーネントだけを個別importする書き方も可能です。unplugin-vue-componentsと組み合わせれば、テンプレートで使ったコンポーネントを自動でimportするオンデマンドロードも実現できます。

<script setup lang="ts">
import { Button, Field, Form } from 'vant'
import { ref } from 'vue'

const username = ref('')
</script>

<template>
  <van-form @submit="() => console.log(username)">
    <van-field v-model="username" label="ユーザー名" placeholder="入力してください" />
    <van-button type="primary" native-type="submit" block>送信</van-button>
  </van-form>
</template>

実践的なユースケース

フォームバリデーション

会員登録や問い合わせフォームでは、入力途中でリアルタイムにエラーを表示したい場面が多くあります。Vantのvan-fieldはrulesプロパティにバリデーションルールを渡すだけで、入力中のエラーメッセージ表示に対応します。

電話番号の欄を空のまま送信ボタンを押すと、van-fieldのrulesに設定したrequiredメッセージがフィールド直下に表示されます。正規表現によるpatternチェックも同時に走るため、桁数の違う数字を入れた場合もその場でエラーが分かります。

ActionSheetとPopupによるモバイル的なUI操作

画面下からせり上がるメニューは、モバイルアプリではおなじみのパターンです。Vantのvan-action-sheetとvan-popupを使えば、ネイティブアプリに近いスライドインの操作パネルを数行で実装できます。

van-action-sheetはactions配列にオブジェクトを渡すだけで選択肢とキャンセルボタンが自動生成され、@selectイベントで選ばれた項目を受け取れます。一方van-popupはposition="bottom"のように表示位置を指定でき、roundを付けると角丸のシート表示になります。用途に応じてどちらを使うかを使い分けると、モバイル画面の操作導線がぐっと作りやすくなります。

まとめ

Vantは、モバイルウェブに特化したコンポーネント設計・軽量さ・高いテストカバレッジという3点で、Vueベースのスマホ向け画面開発を大きく楽にしてくれるライブラリです。フォームバリデーションからActionSheetのようなモバイル特有のUIパターンまで、Propsを組み合わせるだけで実装できる点も魅力です。これからVueでモバイル向けの画面を作る方は、まずはvan-buttonやvan-cellのような基本コンポーネントから触ってみることをおすすめします。

参考リンク

• Vant公式ドキュメント
• Vant GitHub
• vant - npm
• Vant GitHub