はじめに
Reactで管理画面を作るとき、Ant Designを選んで「デザインで悩む時間がほぼゼロになった」という経験をした方は多いのではないでしょうか。では、同じような体験をVueで得るにはどうすればよいのでしょう。
その答えのひとつが「Ant-Design-Vue」です。ReactのAnt Designと同じデザイン言語・コンポーネント体系をVueに移植したUIライブラリで、テーブルやフォーム、日付選択など、業務システムで必ず必要になるコンポーネントが最初から揃っています。この記事では、Ant-Design-Vueの特徴からインストール、実際のコード例までを紹介します。
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を使えるようにします。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に渡すだけで、入力チェックとエラーメッセージ表示が自動的に行われる点がポイントです。
実践的なユースケース
管理画面でよく使われる「一覧テーブル + 検索」の構成も、少ないコードで実装できます。
<!-- 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-tableはソートやページネーションも標準で備えているため、社内向けの管理画面やダッシュボードを短時間で組み立てるのに適しています。また、ConfigProviderを使えばアプリ全体のテーマカラーやコンポーネントサイズを一括で変更でき、自社サービスのブランドに合わせたカスタマイズも容易です。
まとめ
Ant-Design-Vueは、ReactのAnt Designで培われた洗練されたUIコンポーネントを、Vueのプロジェクトでもそのまま活かせるライブラリです。フォームやテーブルといった業務システムの定番機能が最初から高い完成度で用意されているため、デザインやコンポーネント実装に時間をかけたくない場面で特に力を発揮します。
Vue 2からVue 3への移行を検討している場合も、両バージョンに対応している点は安心材料になるはずです。管理画面や社内ツールの開発でUIライブラリの選定に迷っているなら、ぜひ一度試してみてください。