Ant Design Vue 入門ガイド：知っておきたい特徴と導入方法

By /

はい、承知いたしました。Ant Design Vue 入門ガイドとして、知っておきたい特徴と導入方法について詳細に解説した記事を作成します。約5000語を目標とし、初心者にも分かりやすく、具体的なコード例を豊富に含めるように記述します。

以下に記事の内容を直接表示します。

Ant Design Vue 入門ガイド：知っておきたい特徴と導入方法

Vue.js を使って、モダンで洗練されたユーザーインターフェース（UI）を持つ Web アプリケーションを開発したいと考えていますか？ もしそうであれば、Ant Design Vue はあなたの強力な味方となるでしょう。このライブラリは、エンタープライズクラスの UI コンポーネントと包括的なデザインシステムを提供し、開発効率を劇的に向上させます。

本記事では、Ant Design Vue の魅力的な特徴から、実際の開発プロジェクトへの導入方法、そして基本的なコンポーネントの使い方までを、初心者の方にも理解できるように詳細に解説します。約5000語にわたる解説を通じて、Ant Design Vue を始めるために必要な知識を網羅的に習得できるでしょう。

1. Ant Design Vue とは？ なぜそれを選ぶのか？

1.1. Ant Design Vue の概要

Ant Design Vue は、人気のある Vue.js フレームワークのための UI コンポーネントライブラリです。しかし、単なるコンポーネントの集まりではありません。これは、Ant Design と呼ばれる包括的なデザインシステムに基づいています。

  • Ant Design とは？
    Ant Design は、もともと Ant Group (旧 Alibaba) によって開発されたデザインシステムです。エンタープライズアプリケーションの効率的な開発を目的としており、明確なデザイン原則、ガイドライン、そして豊富な UI パターンを提供します。シンプルさ、予測可能性、そしてユーザーフレンドリーであることを重視しています。このデザインシステムは非常に洗練されており、多くの開発者やデザイナーに支持されています。

  • Ant Design Vue の位置づけ
    Ant Design Vue は、この Ant Design のデザイン原則とコンポーネントを、Vue.js 環境で利用できるように移植したものです。Vue.js のリアクティブなデータバインディングやコンポーネントシステムと完全に統合されており、Vue 開発者が Ant Design の恩恵を最大限に受けることができます。

つまり、Ant Design Vue を使うということは、単に「見た目の良い部品」を使うだけでなく、「エンタープライズアプリケーションのための考え抜かれたデザイン哲学」と「それを実現するための高品質なツールキット」を手に入れることなのです。

1.2. なぜ Ant Design Vue を選ぶべきなのか？

数ある Vue.js 用 UI ライブラリの中で、なぜ Ant Design Vue が選ばれるのでしょうか？ その理由はいくつかあります。

  • 高品質で豊富なコンポーネント:
    Ant Design Vue は、ボタン、フォーム、テーブル、ナビゲーション、ダイアログ、日付選択など、幅広いカテゴリーにわたる約60種類以上のコンポーネントを提供しています。これらのコンポーネントは、デザインが一貫しているだけでなく、機能性、パフォーマンス、アクセシビリティも考慮されています。これにより、一から複雑なUI要素を作成する手間を省き、開発時間を大幅に短縮できます。

  • 統一されたデザインシステム:
    Ant Design は厳格なデザインガイドラインを持っています。Ant Design Vue はこのガイドラインに忠実に作られているため、ライブラリのコンポーネントを使うだけで、アプリケーション全体に統一感のあるプロフェッショナルな外観と操作性を持たせることができます。これは、特に複数人で開発を行う大規模なプロジェクトや、ブランディングの一貫性が求められる場合に大きな強みとなります。

  • エンタープライズアプリケーションへの適性:
    Ant Design はエンタープライズアプリケーション開発のために生まれました。そのため、複雑なデータ表示（高度なテーブル機能）、フォーム検証、権限管理に対応するUIパターンなど、業務システムで必要とされる多くの機能や考慮事項が取り入れられています。安定性や保守性も重視されており、長期的なプロジェクトに適しています。

  • Vue 3 サポート:
    Ant Design Vue は、Vue 3 の Composition API や Teleport などの新機能にも対応しており、最新の Vue 開発パラダイムに沿った開発が可能です。もちろん、Options API でも利用できます。

  • 国際化 (i18n) とテーマ設定:
    多言語対応が必要なアプリケーションのために、主要な言語のローカライズデータが提供されています。また、ブランドカラーやフォントなどのテーマを簡単にカスタマイズできる機能も備わっています。

  • 優れたドキュメントとコミュニティ:
    公式ドキュメントは非常に詳細で分かりやすく、各コンポーネントの使用方法や API リファレンスが充実しています。活発なコミュニティもあり、困ったときにサポートを得やすい環境です。

  • TypeScript サポート:
    TypeScript を利用した開発においても、型定義ファイルが提供されているため、型の恩恵を受けながら安全に開発を進めることができます。

これらの理由から、Ant Design Vue は特に以下のようなプロジェクトに適しています。

  • エンタープライズ向けのダッシュボードや管理画面
  • 業務システムや社内ツール
  • データ入力や表示が中心となるアプリケーション
  • 統一されたプロフェッショナルなデザインが求められるプロジェクト
  • 開発スピードと品質の両方を重視する場合

他の Vue UI ライブラリ（Vuetify, Element UI など）もそれぞれ特徴がありますが、Ant Design Vue はそのデザインシステムの完成度とエンタープライズ領域での実績において、独自の強みを持っています。

2. Ant Design Vue の主な特徴

Ant Design Vue の魅力をさらに深掘りするために、その具体的な特徴を見ていきましょう。

2.1. コンポーネントライブラリ

Ant Design Vue が提供するコンポーネントは非常に多岐にわたります。主要なカテゴリとその例を挙げます。

  • General (基本): Button, Icon, Typography
  • Layout (レイアウト): Grid (Row, Col), Layout (Layout, Header, Sider, Content, Footer), Space, Divider
  • Navigation (ナビゲーション): Affix, Breadcrumb, Dropdown, Menu, Pagination, Steps, PageHeader
  • Data Entry (データ入力): AutoComplete, Checkbox, Cascader, DatePicker, Form, Input, InputNumber, Mentions, Radio, Rate, Select, Slider, Switch, TimePicker, Transfer, TreeSelect, Upload
  • Data Display (データ表示): Avatar, Badge, Calendar, Card, Carousel, Collapse, Descriptions, Empty, Image, List, Popover, Statistic, Table, Tabs, Tag, Timeline, Tooltip, Tree
  • Feedback (フィードバック): Alert, Drawer, Message, Modal, Notification, Popconfirm, Progress, Result, Skeleton, Spin
  • Other (その他): Anchor, BackTop, ConfigProvider

これらのコンポーネントは、それぞれの用途に合わせて豊富なプロパティ（Props）やイベント、スロット（Slots）を提供しており、柔軟なカスタマイズが可能です。例えば、Button コンポーネント一つをとっても、タイプ（primary, dashed, text, link, default）、サイズ（large, middle, small）、形状（circle, round）、状態（disabled, loading）など、多様なバリエーションが用意されています。

2.2. Ant Design デザインシステム

前述の通り、Ant Design Vue は Ant Design デザインシステムの上に成り立っています。このシステムは、以下の要素で構成されています。

  • Design Principles (デザイン原則): 「自然」、「確定性」、「意味合い」、「成長性」といった抽象的だが重要な原則。
  • Visual (視覚要素): カラーパレット、タイポグラフィ、アイコン、グリッドシステム、シャドウ、ボーダーなど、見た目に関するガイドライン。
  • Patterns (パターン): レイアウト、ナビゲーション、データ入力、データ表示、フィードバックなど、具体的な UI パターンとその推奨される使い方。
  • Components (コンポーネント): 実装済みの再利用可能な UI 部品。

開発者はこれらのガイドラインに従うことで、一貫性があり、かつユーザーにとって使いやすいアプリケーションを構築できます。デザインの専門知識がなくても、一定レベル以上の高品質なUIを迅速に実現できる点が大きなメリットです。

2.3. エンタープライズ向け機能

エンタープライズアプリケーション開発で特に役立つ機能が組み込まれています。

  • 高度なテーブル機能: フィルタリング、ソート、ページネーション、行選択、ツリーデータ表示、カラムの固定、編集可能なセルなど、複雑なデータグリッド表示に必要な機能が豊富です。
  • 強力なフォームシステム: 宣言的なフォーム定義、自動的なバリデーション、データバインディングのサポートにより、複雑なフォームの実装と管理が容易になります。
  • 国際化 (i18n): ConfigProvider コンポーネントを使用することで、アプリケーション全体の言語設定を簡単に切り替えられます。多くの言語パックが提供されています。
  • テーマ設定: LESS 変数をオーバーライドすることで、プライマリーカラー、セカンダリーカラー、フォント、スペーシングなどをプロジェクトのブランディングに合わせてカスタマイズできます。

これらの機能は、一般的なウェブサイト開発だけでなく、特に業務システムや管理ツールのような、データ処理とユーザーインタラクションが複雑なアプリケーションにおいて、開発効率と品質を高める上で非常に価値があります。

2.4. パフォーマンスとカスタマイズ

  • 必要なコンポーネントのみをインポート (Tree Shaking): ライブラリ全体をインポートするのではなく、使用するコンポーネントだけをインポートする設定が可能です。これにより、最終的なバンドルサイズを削減し、アプリケーションのロードパフォーマンスを向上させることができます。
  • Less を使用したテーマ設定: Ant Design Vue は CSS プリプロセッサとして Less を採用しています。Less 変数を変更することで、簡単にテーマをカスタマイズできます。より深いカスタマイズが必要な場合は、コンポーネントのスタイルをオーバーライドすることも可能です。

これらの特徴を理解することで、Ant Design Vue が単なる UI ライブラリではなく、本格的なアプリケーション開発をサポートするための総合的なツールであることが分かります。

3. Ant Design Vue 導入の準備

Ant Design Vue をプロジェクトに導入する前に、いくつかの準備が必要です。

3.1. 前提知識

  • Vue.js の基礎知識: コンポーネントの概念、テンプレート構文、データバインディング (v-model, :prop), イベントハンドリング (@event), Props, Events, Slots など、Vue.js の基本的な使い方を理解している必要があります。
  • JavaScript/ECMAScript の基礎知識: ES6 以降の構文（import/export, アロー関数, async/await など）にある程度慣れていると、コード例を理解しやすくなります。
  • Node.js と npm/yarn のインストール: Ant Design Vue は npm または yarn を使用してインストールします。プロジェクトのビルドにも Node.js 環境が必要です。Node.js と npm (または yarn) がローカルマシンにインストールされていることを確認してください。Node.js をインストールすれば npm も一緒にインストールされます。yarn は別途インストールが必要です。

3.2. プロジェクトの作成方法（推奨）

Vue.js プロジェクトを新規作成する場合、Vue CLI または Vite を使用するのが一般的です。これらのツールは、プロジェクトの初期設定、ビルド、開発サーバーなどを容易にしてくれます。

3.2.1. Vue CLI を使用する場合

Vue CLI は、Vue.js プロジェクトを素早くセットアップするための標準ツールです。グローバルインストールが必要です。

“`bash
npm install -g @vue/cli

または

yarn global add @vue/cli
“`

プロジェクトを作成します。

bash
vue create my-antdv-app

プロジェクト作成中に、Vue バージョン (Vue 3 を推奨)、TypeScript サポート、Router, Vuex, CSS Pre-processors (Less を選択すると Ant Design Vue のテーマカスタマイズが容易になります)、Linter/Formatter などのオプションを選択できます。今回は Vue 3 と Less を選択するのが良いでしょう。

プロジェクトディレクトリに移動します。

bash
cd my-antdv-app

ここで Ant Design Vue を追加します。Vue CLI は、特定のライブラリをプロジェクトに統合するための vue add コマンドを提供しており、Ant Design Vue もこれに対応しています。

bash
vue add ant-design-vue

このコマンドを実行すると、Ant Design Vue のバージョン選択（デフォルトで最新版）、Less サポートの追加確認、コンポーネントの自動インポート設定（フルインポートかオンデマンドインポートか）などのプロンプトが表示されます。パフォーマンスのために「Use babel-plugin-import to import components on demand」を選択することを強く推奨します。これにより、必要なコンポーネントだけがインポートされ、バンドルサイズが小さくなります。

vue add ant-design-vue コマンドは、必要な依存関係のインストール、main.js/main.ts ファイルへのインポート設定の追加、babel.config.js ファイルへの babel-plugin-import の設定追加などを自動で行ってくれるため、非常に便利です。

3.2.2. Vite を使用する場合

Vite は、モダンなフロントエンド開発ツールであり、非常に高速な開発サーバーとビルドプロセスが特徴です。Vue CLI よりもセットアップがシンプルで高速です。

Vite で Vue プロジェクトを作成します。

“`bash
npm create vite@latest my-antdv-app –template vue

または

yarn create vite my-antdv-app –template vue

または

pnpm create vite my-antdv-app –template vue
“`

プロジェクトディレクトリに移動します。

bash
cd my-antdv-app

依存関係をインストールします。

“`bash
npm install

または

yarn install

または

pnpm install
“`

次に Ant Design Vue をインストールします。

“`bash
npm install ant-design-vue –save

または

yarn add ant-design-vue

または

pnpm install ant-design-vue
“`

Vite の場合、Vue CLI の vue add のような自動設定コマンドはありません。手動で設定を行う必要があります。

  1. Less サポートの追加 (テーマカスタマイズする場合):
    bash
    npm install less less-loader -D
    # または
    yarn add less less-loader -D
    # または
    pnpm install less less-loader -D
    vite.config.js または vite.config.ts に Less の設定を追加します。

    “`javascript
    // vite.config.js
    import { fileURLToPath, URL } from ‘node:url’
    import { defineConfig } from ‘vite’
    import vue from ‘@vitejs/plugin-vue’

    export default defineConfig({
    plugins: [
    vue(),
    ],
    resolve: {
    alias: {
    ‘@’: fileURLToPath(new URL(‘./src’, import.meta.url))
    }
    },
    // ここにlessとthemeの設定を追加
    css: {
    preprocessorOptions: {
    less: {
    javascriptEnabled: true,
    // Ant Design のテーマ変数をここで上書きできます
    // modifyVars: {
    // ‘primary-color’: ‘#1DA57A’,
    // },
    },
    },
    },
    })
    “`

  2. コンポーネントの自動インポート (オンデマンドインポート):
    Vite 環境で babel-plugin-import のような機能を実現するには、vite-plugin-components (現在は @arco-plugins/vite-vue) や vite-plugin-style-import のような Vite プラグインを使用するのが一般的です。Ant Design Vue の公式ドキュメントでは @arco-plugins/vite-vue + vite-plugin-style-import の組み合わせや、よりシンプルな unplugin-vue-components + unplugin-auto-import の組み合わせが推奨されています。

    ここでは、よりシンプルで多くのライブラリに対応している unplugin-vue-components と unplugin-auto-import を使う方法を紹介します。

    まず、プラグインをインストールします。

    “`bash
    npm install unplugin-vue-components unplugin-auto-import -D

    または

    yarn add unplugin-vue-components unplugin-auto-import -D

    または

    pnpm install unplugin-vue-components unplugin-auto-import -D
    “`

    vite.config.js または vite.config.ts を更新します。

    “`javascript
    // vite.config.js
    import { fileURLToPath, URL } from ‘node:url’
    import { defineConfig } from ‘vite’
    import vue from ‘@vitejs/plugin-vue’

    // unplugin-vue-components と unplugin-auto-import をインポート
    import AutoImport from ‘unplugin-auto-import/vite’
    import Components from ‘unplugin-vue-components/vite’
    import { AntDesignVueResolver } from ‘unplugin-vue-components/resolvers’

    export default defineConfig({
    plugins: [
    vue(),
    // AutoImport を設定
    AutoImport({
    imports: [‘vue’], // 必要に応じて他のライブラリも指定
    dts: ‘src/auto-imports.d.ts’, // 生成される型定義ファイル
    // Ant Design Vue の特定の関数なども自動インポートしたい場合はここに追記
    // resolvers: [AntDesignVueResolver()], // こちらはcomponentsで処理するため不要
    }),
    // Components を設定
    Components({
    resolvers: [
    AntDesignVueResolver({
    importStyle: ‘less’, // または ‘css’ / true (デフォルトless)
    resolveIcons: true, // アイコンも自動インポートする場合 (別途 @ant-design/icons-vue インストール必要)
    }),
    ],
    dts: ‘src/components.d.ts’, // 生成される型定義ファイル
    }),
    ],
    resolve: {
    alias: {
    ‘@’: fileURLToPath(new URL(‘./src’, import.meta.url))
    }
    },
    css: {
    preprocessorOptions: {
    less: {
    javascriptEnabled: true,
    // modifyVars: {
    // ‘primary-color’: ‘#1DA57A’,
    // },
    },
    },
    },
    })
    ``
    この設定により、Vue ファイル内で    や` などの Ant Design Vue コンポーネントをインポート文なしで直接使用できるようになり、必要なスタイルやコンポーネントの実装が自動的にバンドルに含まれるようになります。これは開発体験を大きく向上させます。

どちらの方法でプロジェクトを作成しても構いませんが、初心者の方には vue add ant-design-vue コマンドがある Vue CLI の方が初期設定は少し楽かもしれません。しかし、Vite は開発時の起動やHMR (Hot Module Replacement) が非常に高速なので、開発効率を重視するなら Vite も有力な選択肢です。

3.3. 既存プロジェクトへのインストール

既に Vue.js プロジェクトがあり、そこに Ant Design Vue を追加したい場合は、以下の手順で行います。

  1. Ant Design Vue をインストール:
    プロジェクトのルートディレクトリで以下のコマンドを実行します。
    bash
    npm install ant-design-vue --save
    # または
    yarn add ant-design-vue
    # または
    pnpm install ant-design-vue

  2. Vue 3 の場合 (main.js または main.ts):
    アプリケーションのエントリポイントファイル (通常は src/main.js または src/main.ts) で Ant Design Vue をインポートし、Vue アプリケーションインスタンスに登録します。

    • フルインポート (非推奨 – バンドルサイズ大):
      “`javascript
      // src/main.js (Vue 3)
      import { createApp } from ‘vue’;
      import App from ‘./App.vue’;
      import Antd from ‘ant-design-vue’;
      import ‘ant-design-vue/dist/antd.css’; // デフォルトのスタイルをインポート

      const app = createApp(App);

      app.use(Antd); // Ant Design Vue の全コンポーネントを登録
      app.mount(‘#app’);
      ``
      TypeScript の場合は      .ts` ファイルになります。

    • 手動での部分インポート (推奨 – Tree Shaking):
      使用するコンポーネントだけをインポートする方法です。バンドルサイズを劇的に削減できます。

      “`javascript
      // src/main.js (Vue 3)
      import { createApp } from ‘vue’;
      import App from ‘./App.vue’;

      // 使用するコンポーネントを個別にインポート
      import {
      Button,
      Layout,
      Menu,
      // … 他に必要なコンポーネント
      } from ‘ant-design-vue’;

      // 各コンポーネントのスタイルをインポート
      // 個別のスタイルパスは公式ドキュメントを参照するか、後述の babel-plugin-import/vite-plugin で自動化
      import ‘ant-design-vue/dist/antd.css’; // デフォルトの全体スタイルをインポートするか、個別のスタイルをインポートする

      const app = createApp(App);

      // 個別にコンポーネントを登録
      app.component(‘a-button’, Button);
      app.component(‘a-layout’, Layout);
      app.component(‘a-menu’, Menu);
      // … 他に必要なコンポーネントを登録

      app.mount(‘#app’);
      “`
      この手動登録は非常に手間がかかるため、通常は次に説明する自動化ツールを使用します。

    • 自動での部分インポート (Babel/Vite プラグイン – 最も推奨):
      Vue CLI を使っている場合は、babel-plugin-import を設定します。vue add ant-design-vue コマンドはこの設定を自動で行ってくれますが、手動で行う場合は babel.config.js に以下の設定を追加します。

      まず、babel-plugin-import をインストールします。
      “`bash
      npm install babel-plugin-import -D

      または

      yarn add babel-plugin-import -D

      または

      pnpm install babel-plugin-import -D
      ``babel.config.js` を更新します。

      javascript
      // babel.config.js
      module.exports = {
      presets: [
      '@vue/cli-plugin-babel/preset'
      ],
      plugins: [
      [
      'import',
      {
      libraryName: 'ant-design-vue',
      libraryDirectory: 'es', // or 'lib' if you use cjs modules
      style: true // or 'css'
      },
      'ant-design-vue' // 同じプラグインを複数設定する場合の識別子
      ]
      ]
      }
      style: true は、コンポーネントの JavaScript ファイルと同時に、そのコンポーネントに対応する Less (または CSS) ファイルも自動的にインポートすることを意味します。Less を使用している場合は style: true を、CSS のみを使用する場合は style: 'css' を指定します。

      Vite を使っている場合は、前述の unplugin-vue-components や unplugin-auto-import プラグインを設定します。

      自動インポートプラグインを設定すると、main.js/main.ts ファイルでの特別なインポートやコンポーネント登録は不要になります。コンポーネントは .vue ファイル内で直接 <a-button> のように記述するだけで使用できるようになります。

      “`javascript
      // src/main.js (Vue 3 – 自動インポートプラグイン使用時)
      import { createApp } from ‘vue’;
      import App from ‘./App.vue’;

      // ここでのインポートは不要になる (プラグインが自動処理)
      // import { Button } from ‘ant-design-vue’;

      // ただし、全体のスタイルが必要な場合や、プラグインでスタイルインポートを設定していない場合は必要
      // import ‘ant-design-vue/dist/antd.css’;

      // ConfigProvider など、コンポーネントとしてではなく関数/プロバイダーとして使うものはここでインポートが必要
      // import { ConfigProvider } from ‘ant-design-vue’;

      const app = createApp(App);

      // コンポーネント登録は不要になる (プラグインが自動処理)
      // app.component(‘a-button’, Button);

      // use は必要に応じて Ant Design Vue が提供する plugin などを登録する場合に使う
      // app.use(Antd); // これはフルインポートの場合のみ
      // app.use(ConfigProvider); // Antd の ConfigProvider を使う場合など

      app.mount(‘#app’);
      ``
      開発時には、自動インポートによって生成される型定義ファイル (      components.d.ts,auto-imports.d.ts`) を確認すると、どのコンポーネントや関数が自動的に利用可能になっているかが分かります。

  3. Vue 2 の場合 (main.js または main.ts):
    Vue 2 の場合は構文が少し異なります。

    “`javascript
    // src/main.js (Vue 2)
    import Vue from ‘vue’;
    import App from ‘./App.vue’;
    import Antd from ‘ant-design-vue’;
    import ‘ant-design-vue/dist/antd.css’; // デフォルトのスタイルをインポート

    Vue.config.productionTip = false;

    Vue.use(Antd); // Ant Design Vue の全コンポーネントを登録

    new Vue({
    render: h => h(App),
    }).$mount(‘#app’);
    ``
    Vue 2 の場合も、    babel-plugin-importによる自動での部分インポートを強く推奨します。設定方法は Vue 3 と同様です (babel.config.js` を編集します)。

補足: スタイルのインポートについて

import 'ant-design-vue/dist/antd.css'; は Ant Design Vue の全てのコンポーネントに対するデフォルトスタイルをインポートします。これは手軽ですが、使用していないコンポーネントのスタイルも含まれるため、バンドルサイズが大きくなります。

オンデマンドインポートプラグイン (babel-plugin-import, unplugin-vue-components など) を使用し、style: true または importStyle: 'less' の設定をすることで、使用しているコンポーネントに対応するスタイルだけをインポートできます。これにより、スタイルに関するバンドルサイズも最適化されます。Less ファイルをインポートする場合は、Less プリプロセッサの設定が必要になります（前述の Vite 設定や、Vue CLI の Less インストールなど）。

これで、プロジェクトに Ant Design Vue を導入する準備が整いました。次に、実際のコンポーネントの使い方を見ていきましょう。

4. Ant Design Vue の基本的な使い方

プロジェクトに Ant Design Vue を導入したら、早速コンポーネントを使ってみましょう。ここでは、いくつかの基本的なコンポーネントを取り上げ、その使い方を解説します。

コード例では、自動インポートプラグインが設定されていることを前提とし、<a-button> のようにコンポーネント名をそのまま使用します。

4.1. ボタン (a-button)

ボタンは最も基本的なコンポーネントの一つです。

“`vue

“`

  • a-button: ボタンコンポーネントのタグです。
  • type: ボタンの種類を指定します (primary, default, dashed, text, link)。
  • size: ボタンのサイズを指定します (large, middle, small)。
  • shape: ボタンの形状を指定します (circle, round)。
  • loading: ローディング状態を表示します。
  • disabled: ボタンを無効にします。
  • href, target: type="link" の場合、リンクとして機能させます。
  • @click: クリックイベントのリスナーを指定します。通常の Vue.js と同様です。
  • <template #icon>: スロットを使用してアイコンをボタン内に配置します。アイコンは別途 @ant-design/icons-vue パッケージからインポートして使用します。

a-space コンポーネントは、子要素に一定の間隔を空けて横方向（デフォルト）または縦方向に配置するために使用されます。これも Ant Design Vue が提供する便利なレイアウトコンポーネントです。

4.2. グリッドレイアウト (a-row, a-col)

コンテンツをカラムに分割して配置する際に使用します。Bootstrap のグリッドシステムに似ています。

“`vue

“`

  • a-row: グリッドの行を表します。
  • a-col: グリッドのカラムを表します。
  • :span="n": カラムが占める幅を指定します。グリッドシステムは合計24分割なので、span="12" なら半分、span="8" なら1/3 を占めます。
  • :gutter="n" または :gutter="[horizontal, vertical]": カラム間の間隔（ガター）を指定します。配列で水平方向と垂直方向のガターを個別に指定できます。
  • :offset="n": 左側に n カラム分のオフセット（空白）を作成します。
  • :push="n", :pull="n": カラムを左右に移動させます。
  • :xs, :sm, :md, :lg, :xl: 各ブレークポイント（xs < 576px, sm ≥ 576px, md ≥ 768px, lg ≥ 992px, xl ≥ 1200px, xxl ≥ 1600px）での span, offset, push, pull をオブジェクト形式で指定することで、レスポンシブなレイアウトを簡単に実現できます。例えば :md="{ span: 8, offset: 4 }" のように指定します。

グリッドシステムは、アプリケーションの全体的なレイアウトや、セクション内のコンテンツ配置に非常に役立ちます。

4.3. レイアウト (a-layout)

アプリケーション全体の基本的な構造（ヘッダー、フッター、サイドバー、コンテンツ領域）を作成するためのコンポーネントです。

“`vue

“`

  • a-layout: レイアウトの親コンポーネント。
  • a-layout-header: ヘッダー領域。
  • a-layout-footer: フッター領域。
  • a-layout-sider: サイドバー領域。width プロパティで幅を指定できます。
  • a-layout-content: メインコンテンツ領域。
  • これらの子要素として、a-menu（メニュー）、a-breadcrumb（パンくずリスト）などのナビゲーションコンポーネントや、カスタムコンテンツを配置します。

この例では、標準的なアプリケーションレイアウト（ヘッダー、左サイドバー、コンテンツ、フッター）を作成しています。a-menu コンポーネントも Ant Design Vue が提供するナビゲーションコンポーネントです。

4.4. フォーム (a-form, a-form-item, a-input, etc.)

ユーザーからの入力を受け付けるフォームは、多くのアプリケーションで重要です。Ant Design Vue は強力なフォームコンポーネントを提供します。

基本的なフォームの構造とデータバインディングの例です。複雑なバリデーションについては後述します。

“`vue

“`

  • a-form: フォーム全体のコンテナ。layout (horizontal, vertical, inline) でレイアウトを指定できます。:model でフォームのデータを格納するオブジェクトをバインドします。@finish でフォームが正常に送信された時のイベントハンドラを指定します。
  • a-form-item: フォーム内の個々の入力フィールドをラップするために使用します。label でラベルテキストを、name で対応する model オブジェクトのキーを指定します。
  • a-input, a-input-password, a-input-number など: 具体的な入力コンポーネント。v-model:value で formState の対応するプロパティとデータバインドします (v-model は Vue 3 で v-model:value に変更されましたが、互換性のため v-model もまだ多くのコンポーネントで機能します)。
  • a-button type="primary" html-type="submit": フォーム送信ボタン。html-type="submit" を指定することで、<form> 要素の標準的な submit イベントを発生させます。

この例は非常にシンプルですが、Ant Design Vue のフォームコンポーネントを使うことで、標準的な HTML フォーム要素よりもリッチでデザインが統一されたフォームを簡単に作成できることが分かります。

4.5. テーブル (a-table)

データのリストや表形式での表示は、多くのアプリケーションで必要とされます。Ant Design Vue の a-table コンポーネントは非常に高機能です。

基本的なテーブルの例です。

“`vue

“`

  • a-table: テーブルコンポーネントのタグ。
  • :columns: テーブルのカラム定義を格納した配列をバインドします。各オブジェクトはカラムヘッダーのタイトル (title) と、データソースオブジェクトから値を抽出するためのキー (dataIndex) を持ちます。key は Vue の v-for と同様に、パフォーマンスのために各カラムを一意に識別するために必要です。
  • :data-source: テーブルに表示するデータを格納した配列をバインドします。各オブジェクトは、カラム定義の dataIndex に対応するプロパティを持つ必要があります。各データ項目には、テーブルが正しく動作するために一意の key プロパティが必要です。
  • <template #bodyCell="{ column, text }">: スロットを使用して、特定のカラムの表示をカスタマイズできます。この例では、’name’ カラムのテキストをリンクとして表示しています。スロットプロップスとして column (カラム定義オブジェクト) と text (そのセルのテキスト値) などを受け取れます。

a-table はこれ以外にも、ソート (sorter), フィルタリング (filters), ページネーション (pagination), 行の展開 (expandedRowRender), 行の選択 (rowSelection) など、多くの機能をプロパティやスロットで提供しています。これらを活用することで、複雑なデータ表示要件にも対応できます。

5. さらにステップアップするために

基本的なコンポーネントの使い方を理解したら、Ant Design Vue のより高度な機能や概念にも触れてみましょう。

5.1. テーマのカスタマイズ

前述の通り、Ant Design Vue は Less を使用したテーマカスタマイズをサポートしています。プライマリーカラー、フォント、ボーダーの半径など、多くの Less 変数が用意されており、これらを上書きすることでアプリケーション全体の見た目を簡単に変更できます。

例えば、プライマリーカラーを Ant Design のデフォルトの #1890ff から別の色に変更したい場合：

  1. プロジェクトに Less と Less-loader がインストールされていることを確認します。
  2. 設定ファイル (vue.config.js (Vue CLI) または vite.config.js (Vite)) で Less のオプションを設定します。前述の導入方法のセクションを参照してください。
  3. 設定ファイル内で modifyVars オプションを使用し、変更したい変数とその値を指定します。

“`javascript
// vue.config.js (Vue CLI の場合)
const { defineConfig } = require(‘@vue/cli-service’)

module.exports = defineConfig({
css: {
loaderOptions: {
less: {
lessOptions: {
javascriptEnabled: true,
modifyVars: {
‘primary-color’: ‘#f06292’, // 例: ピンクに変更
‘link-color’: ‘#f06292’,
‘border-radius-base’: ‘4px’,
// 他にも多くの変数を変更可能 (公式ドキュメント参照)
},
},
},
},
},
})
“`

“`javascript
// vite.config.js (Vite の場合)
import { fileURLToPath, URL } from ‘node:url’
import { defineConfig } from ‘vite’
import vue from ‘@vitejs/plugin-vue’
import Components from ‘unplugin-vue-components/vite’ // 自動インポートプラグインも使用する場合
import { AntDesignVueResolver } from ‘unplugin-vue-components/resolvers’ // 自動インポートプラグインも使用する場合

export default defineConfig({
plugins: [
vue(),
Components({ // 自動インポートプラグイン
resolvers: [
AntDesignVueResolver({
importStyle: ‘less’,
}),
],
dts: ‘src/components.d.ts’,
}),
],
resolve: {
alias: {
‘@’: fileURLToPath(new URL(‘./src’, import.meta.url))
}
},
css: {
preprocessorOptions: {
less: {
javascriptEnabled: true,
modifyVars: {
‘primary-color’: ‘#f06292’, // 例: ピンクに変更
‘link-color’: ‘#f06292’,
‘border-radius-base’: ‘4px’,
// 他にも多くの変数を変更可能 (公式ドキュメント参照)
},
},
},
},
})
“`

設定を更新したら、開発サーバーを再起動すると変更が反映されます。

Less 変数の完全なリストは、Ant Design の GitHub リポジトリにある ant-design-vars.less ファイルや、Ant Design Vue の公式ドキュメントで確認できます。

5.2. 国際化 (i18n)

多言語対応が必要な場合は、ConfigProvider コンポーネントを使用します。アプリケーションのルートレベルで ConfigProvider を配置し、locale プロパティに使用する言語パックを指定します。

“`vue

“`

  • a-config-provider: 国際化、テーマ、その他のグローバル設定を子コンポーネントに提供するコンポーネント。
  • :locale: 使用するロケールオブジェクトをバインドします。ant-design-vue/es/locale/ ディレクトリ以下に各言語のロケールファイルがあります。
  • 注意: Ant Design Vue の一部のコンポーネント (DatePicker, TimePicker, Calendar など) は、日付や時刻の操作に Day.js または Moment.js を使用しています。これらのコンポーネントの表示をローカライズするには、使用しているライブラリのロケール設定も別途行う必要があります。公式ドキュメントでは Day.js が推奨されています。

5.3. フォームのバリデーション (a-form とバリデーションルール)

Ant Design Vue のフォームコンポーネントは、強力なバリデーション機能を提供します。これは a-form の model と rules プロパティを組み合わせて実現します。

“`vue

“`

  • :rules: バリデーションルールを定義したオブジェクトをバインドします。オブジェクトのキーは a-form-item の name と一致させる必要があります。値はルールの配列です。
  • ルールオブジェクト:
    • required: 必須入力かどうか (true/false)。
    • message: バリデーションエラー時に表示するメッセージ。
    • trigger: いつバリデーションを実行するか ('blur', 'change', またはその配列)。
    • type: バリデーションの型 ('string', 'number', 'email', 'url', 'date', 'boolean', 'array', 'object', 'enum', 'int', 'float', 'regexp', 'method').
    • min, max: 数値や文字列の最小/最大値/長さ。
    • pattern: 正規表現によるパターンマッチング。
    • validator: カスタムバリデーション関数を定義できます。

a-form の :model と :rules を適切に設定することで、送信ボタンクリック時や指定した trigger イベント発生時に、自動的にバリデーションが実行され、エラーメッセージが表示されるようになります。送信成功時は @finish、失敗時は @finishFailed イベントが発生します。

5.3.1. Form.useForm (Composition API)

Composition API を使用している場合、Form.useForm フックを使うと、フォームの state 管理やバリデーション制御がより簡単になります。

“`vue

“`

useForm から返されるオブジェクトには、フォームのリセット (resetFields), 全体のバリデーション (validate), 特定フィールドのバリデーション (validateField) などの便利なメソッドが含まれています。複雑なフォームを扱う場合や、手動でバリデーションをトリガーしたい場合に非常に役立ちます。

5.4. その他の高度な機能

  • モーダル (a-modal) とドロワー (a-drawer): ユーザーの操作を中断せずに情報を表示したり、補助的なインターフェースを提供したりするコンポーネント。非同期処理と組み合わせることが多いです。

  • メッセージ (message), 通知 (notification), 確認ダイアログ (a-popconfirm, Modal.confirm): ユーザーへのフィードバックや確認を求めるためのコンポーネント。これらは通常、コンポーネントとしてではなく、JavaScript のメソッドとして呼び出します。
    “`javascript
    import { message } from ‘ant-design-vue’;

    const showSuccessMessage = () => {
    message.success(‘操作が成功しました。’);
    };

    const showErrorMessage = () => {
    message.error(‘エラーが発生しました。’);
    };
    “`
    * ConfigProvider: 国際化以外にも、日付ライブラリの設定、テーマ設定の一部、コンポーネントのデフォルト設定（例: Empty コンポーネントの表示内容）などをアプリケーション全体で一元管理するために使用できます。
    * Tree Shaking と最適化: 前述の自動インポートプラグインの設定を正しく行うことで、アプリケーションのバンドルサイズを最小限に抑えることが重要です。特に大規模なアプリケーションでは、この設定の有無がパフォーマンスに大きく影響します。

これらの機能は、公式ドキュメントで詳細な使い方や API リファレンスが確認できます。

6. 他の Vue UI ライブラリとの比較（簡潔に）

Ant Design Vue 以外にも、Vue.js 用の UI ライブラリは存在します。代表的なものと Ant Design Vue の位置づけを簡単に比較します。

  • Vuetify:
    • 非常に包括的なマテリアルデザインベースのライブラリ。
    • デザインシステムは Google の Material Design に厳密に従っている。
    • グリッド、レイアウト、コンポーネント、ディレクティブ、プラグインなど、すべてが揃った統合的なフレームワーク。
    • 独自の SCSS 変数によるテーマカスタマイズ。
    • 「全部入り」で特定のデザインシステムに乗りたい場合に強力。自由度は Ant Design Vue より少し低い傾向。
  • Element UI (または Element Plus for Vue 3):
    • Ant Design と同様にエンタープライズ向けを謳っているライブラリ。
    • 中国で非常に人気があり、ドキュメントも充実している。
    • デザインシステムは Ant Design とは異なる独自のもの。シンプルでフラットなデザインが特徴。
    • コンポーネントの種類や機能は Ant Design Vue と近い。
    • Less または SCSS によるテーマカスタマイズ。
    • どちらを選ぶかは、デザインの好みや開発チームの慣れ、特定の機能要件によることが多い。

Ant Design Vue は、

  • 洗練された、エンタープライズ向けの Ant Design システムを採用している点。
  • 高品質で豊富なコンポーネントに加え、強力なフォームやテーブル機能を持つ点。
  • Vue 3 との親和性が高く、Composition API にも対応している点。

これらの点において強みを発揮します。特に Ant Design のデザイン思想に共感できる場合や、中国発の成熟したデザインシステム上で開発したい場合に非常に適しています。

7. さらに学ぶためのリソース

本記事は Ant Design Vue の入門として、その特徴と基本的な使い方、導入方法を解説しました。さらに深く学ぶためには、以下の公式リソースが最も信頼できます。

  • 公式ドキュメント:
    • Ant Design Vue 公式サイト: https://next.antdv.com/ (Vue 3 版)
    • コンポーネント一覧、API リファレンス、使用例などが非常に詳しく解説されています。まずはここを Exploration することをお勧めします。
    • Vue 2 版のドキュメントはバージョン指定で確認できます。
  • Ant Design 公式デザインガイド:
    • Ant Design 公式サイト: https://ant.design/
    • これは Vue 版ではなく、デザインシステムそのものに関するドキュメントです。デザイン原則、視覚要素、パターンなどが詳しく解説されており、なぜコンポーネントがそのように振る舞うのか、どのように組み合わせるべきかの理解を深めるのに役立ちます。
  • GitHub リポジトリ:
  • Less 変数一覧:

これらのリソースを活用し、実際に様々なコンポーネントを試しながら学ぶのが最も効果的です。

8. まとめ

Ant Design Vue は、Vue.js アプリケーション開発において、高品質で一貫性のある UI を迅速に構築するための強力なライブラリです。Ant Design デザインシステムに基づいた豊富なコンポーネント、エンタープライズ向けの機能、国際化やテーマ設定のサポートなど、多くの魅力的な特徴を持っています。

本記事では、以下の内容を詳細に解説しました。

  • Ant Design Vue が何か、なぜ選ぶべきなのか
  • その主な特徴（コンポーネント、デザインシステム、エンタープライズ機能など）
  • 導入のための準備と、Vue CLI/Vite を使用したプロジェクトへのインストール方法
  • 基本的なコンポーネント（Button, Grid, Layout, Form, Table）の使い方
  • テーマカスタマイズや国際化、フォームバリデーションといったステップアップのための情報

これを足がかりに、ぜひあなたの Vue.js プロジェクトに Ant Design Vue を導入し、その開発効率と完成度の高さを体験してください。最初は戸惑うこともあるかもしれませんが、公式ドキュメントを参考にしながら様々なコンポーネントを試していくうちに、その強力さを実感できるはずです。

Happy Coding!

コメントする

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

上部へスクロール