Vue版の管理画面UIに悩んだら、Ant-Design-Vueが答えになる

はじめに

Reactで管理画面を作るとき、Ant Designを選んで「デザインで悩む時間がほぼゼロになった」という経験をした方は多いのではないでしょうか。では、同じような体験をVueで得るにはどうすればよいのでしょう。

その答えのひとつが「Ant-Design-Vue」です。ReactのAnt Designと同じデザイン言語・コンポーネント体系をVueに移植したUIライブラリで、テーブルやフォーム、日付選択など、業務システムで必ず必要になるコンポーネントが最初から揃っています。この記事では、Ant-Design-Vueの特徴からインストール、実際のコード例までを紹介します。

a-buttonやa-tableが実際にどう動くのか、説明より先に触ってみたい方も多いと思います。ブラウザ上でそのまま編集・実行できるサンプルを用意したので、先に挙動を見たい方はこちらからどうぞ。

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

Ant-Design-Vueとは

Ant-Design-VueはAlibabaが開発したデザインシステム「Ant Design」の設計思想をベースに、Vueコンポーネントとして実装されたエンタープライズ向けUIライブラリです。ReactのAnt Designと見た目・使い勝手を揃えつつ、Vueのリアクティブシステムに最適化された形でコンポーネントが提供されています。

主な特徴

• 豊富なコンポーネント群 - Table、Form、DatePicker、Upload、Modal、Notificationなど、業務アプリに必要な部品がほぼ網羅されています
• Vue 2 / Vue 3 両対応 - メジャーバージョンによってVue 2系・Vue 3系のどちらにも対応しており、既存プロジェクトの構成に合わせて選べます
• TypeScriptファースト - ライブラリ自体がTypeScriptで書かれており、型定義を追加インストールする必要がありません
• テーマのカスタマイズ性 - デザイントークンベースの仕組みにより、ブランドカラーやコンポーネントごとのスタイルを柔軟に上書きできます
• 国際化対応 - 日本語を含む多数のロケールが標準で用意されています

インストール

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

# npm
npm install ant-design-vue --save

# yarn
yarn add ant-design-vue

# pnpm
pnpm add ant-design-vue

Ant-Design-Vueのサンプルを動かす

さっそく動かしてみましょう。a-buttonで操作を受け付け、a-switchで操作の有効・無効を切り替え、a-input-numberとv-modelで連動させたカウントの状態をa-tagの色とテキストに反映する、という小さなプレイグラウンドです。要点だけを抜き出すと次のようになります。

<template>
  <a-space>
    <a-switch v-model:checked="enabled" />
    <a-button type="primary" :disabled="!enabled" @click="count++">
      +1する
    </a-button>
    <a-tag :color="count >= 5 ? 'red' : 'green'">{{ count }}</a-tag>
  </a-space>
</template>

実際に触って動かせるのが下のサンプルです。a-switchをオフにするとボタンと数値入力が無効化され、カウントが5以上になるとa-tagの色が緑から赤に変わります。

a-switchはv-model:checkedで真偽値を、a-input-numberはv-model:valueで数値をそれぞれ双方向バインドしています。ボタンを押すたびにcountが更新され、その値を見てa-tagのcolorプロパティが自動で切り替わる、という一連の流れをそのまま体験できます。:min="5"のようにa-input-numberの閾値を変えると、上限間近の判定タイミングも変わります。

基本的な使い方

まずはアプリ全体でAnt-Design-Vueを使えるようにします。main.tsでプラグインとして登録し、スタイルシートを読み込みます。

// main.ts
import { createApp } from 'vue';
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/reset.css';
import App from './App.vue';

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

これでコンポーネントをテンプレート内で自由に使えるようになります。ボタンとフォームを組み合わせた簡単な例を見てみましょう。

<!-- App.vue -->
<script setup lang="ts">
import { reactive } from 'vue';

interface FormState {
  username: string;
  email: string;
}

const formState = reactive<FormState>({
  username: '',
  email: '',
});

const onFinish = (values: FormState) => {
  console.log('送信された値:', values);
};
</script>

<template>
  <a-form :model="formState" layout="vertical" @finish="onFinish">
    <a-form-item
      label="ユーザー名"
      name="username"
      :rules="[{ required: true, message: 'ユーザー名を入力してください' }]"
    >
      <a-input v-model:value="formState.username" />
    </a-form-item>

    <a-form-item
      label="メールアドレス"
      name="email"
      :rules="[{ required: true, type: 'email', message: '正しいメールアドレスを入力してください' }]"
    >
      <a-input v-model:value="formState.email" />
    </a-form-item>

    <a-form-item>
      <a-button type="primary" html-type="submit">送信</a-button>
    </a-form-item>
  </a-form>
</template>

バリデーションルールをrulesに渡すだけで、入力チェックとエラーメッセージ表示が自動的に行われる点がポイントです。

実践的なユースケース

フォーム以外にも、Ant-Design-Vueには業務アプリでよく使うパターンがひととおり揃っています。ここでは「一覧テーブル + 検索」「確認モーダル + 通知」「テーマの一括切り替え」の3つを、それぞれ動かせるサンプルつきで紹介します。

Ant-Design-Vueのa-tableとa-input-searchで一覧+検索を実装する

管理画面でよく使われる「一覧テーブル + 検索」の構成も、a-tableとa-input-searchの組み合わせで少ないコードで実装できます。

<!-- UserList.vue -->
<script setup lang="ts">
import { ref, computed } from 'vue';

interface User {
  key: number;
  name: string;
  role: string;
  status: 'active' | 'inactive';
}

const users = ref<User[]>([
  { key: 1, name: '佐藤 太郎', role: '管理者', status: 'active' },
  { key: 2, name: '鈴木 花子', role: '一般ユーザー', status: 'inactive' },
  { key: 3, name: '田中 次郎', role: '一般ユーザー', status: 'active' },
]);

const keyword = ref('');

const filteredUsers = computed(() =>
  users.value.filter((user) => user.name.includes(keyword.value))
);

const columns = [
  { title: '名前', dataIndex: 'name', key: 'name' },
  { title: '役割', dataIndex: 'role', key: 'role' },
  { title: 'ステータス', dataIndex: 'status', key: 'status' },
];
</script>

<template>
  <a-space direction="vertical" style="width: 100%">
    <a-input-search
      v-model:value="keyword"
      placeholder="名前で検索"
      style="max-width: 300px"
    />

    <a-table :columns="columns" :data-source="filteredUsers">
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'status'">
          <a-tag :color="record.status === 'active' ? 'green' : 'default'">
            {{ record.status === 'active' ? '有効' : '無効' }}
          </a-tag>
        </template>
      </template>
    </a-table>
  </a-space>
</template>

実際に触って確かめられるのが下のサンプルです。検索欄に「佐藤」などと入力するとa-input-searchのv-modelを通じてa-tableの行が即座に絞り込まれます。検索欄を空にすれば全件表示に戻ります。

a-tableはソートやページネーションも標準で備えているため、社内向けの管理画面やダッシュボードを短時間で組み立てるのに適しています。keywordを書き換えるロジックをincludesから前方一致や役割（role）検索に変えれば、絞り込みの条件もそのまま拡張できます。

Ant-Design-Vueのa-modalとmessageで確認ダイアログと通知を出す

削除や送信のような取り返しのつかない操作には、a-modalで確認を挟み、完了後にmessageで結果を通知する流れがよく使われます。要点だけを抜き出すと次のようになります。

<script setup>
import { ref } from 'vue'
import { message } from 'ant-design-vue'

const visible = ref(false)

function handleOk() {
  visible.value = false
  message.success('削除しました')
}
</script>

<template>
  <a-button danger @click="visible = true">削除する</a-button>
  <a-modal v-model:open="visible" title="確認" @ok="handleOk">
    本当に削除しますか？
  </a-modal>
</template>

実際に動かせるのが下のサンプルです。「ユーザーを削除する」ボタンを押すとa-modalが開き、「OK」を押すとmessage.successが画面上部にトースト通知を表示し、削除件数のカウントも増えます。「Cancel」を押せば何も起きずにモーダルだけが閉じます。

a-modalはv-model:openで開閉状態を制御し、@ok・@cancelにそれぞれ処理を割り当てるだけで確認フローが完結します。message.successをmessage.errorやmessage.warningに変えると、通知の見た目と意味合いを状況に応じて出し分けられます。

Ant-Design-VueのConfigProviderでテーマカラーを一括切り替える

ConfigProvider（テンプレート上はa-config-provider）を使えば、アプリ全体のテーマカラーやコンポーネントサイズを一括で変更でき、自社サービスのブランドに合わせたカスタマイズも容易です。

<script setup>
import { ref } from 'vue'

const primaryColor = ref('#1677ff')
</script>

<template>
  <a-config-provider :theme="{ token: { colorPrimary: primaryColor } }">
    <a-button type="primary">送信</a-button>
  </a-config-provider>
</template>

実際に動かせるのが下のサンプルです。色見本のボタンをクリックするとa-config-providerのtheme.token.colorPrimaryが切り替わり、配下のa-button（プライマリ・リンク）の色が一括で変わります。

a-config-providerでthemeを渡すと、内側にあるa-buttonをはじめとするすべてのコンポーネントがそのトークンを参照してスタイルを再計算します。colorPrimaryだけでなくborderRadiusやcolorBgContainerのようなトークンを追加すれば、角丸や背景色も同じ仕組みで一括変更できます。

まとめ

Ant-Design-Vueは、ReactのAnt Designで培われた洗練されたUIコンポーネントを、Vueのプロジェクトでもそのまま活かせるライブラリです。フォームやテーブルといった業務システムの定番機能が最初から高い完成度で用意されているため、デザインやコンポーネント実装に時間をかけたくない場面で特に力を発揮します。

Vue 2からVue 3への移行を検討している場合も、両バージョンに対応している点は安心材料になるはずです。管理画面や社内ツールの開発でUIライブラリの選定に迷っているなら、ぜひ一度試してみてください。

参考リンク

• Ant-Design-Vue公式ドキュメント
• Ant-Design-Vue GitHub
• ant-design-vue - npm