Ant Design Proで管理画面を爆速構築した話

はじめに

管理画面を作るとき、「また同じような画面構成か...」と思うこと、ありませんか。

ログイン画面、ダッシュボード、テーブル一覧、フォーム入力。だいたい同じパターンなのに、毎回ゼロから作るのは正直しんどい。

そんなときに出会ったのがAnt Design Pro。Ant Designの開発元が提供しているエンタープライズ向けのReactボイラープレートです。

正直なところ、「ボイラープレートって結局カスタマイズ大変なんでしょ」と思っていたんですけど、これは違った。GitHub 37,000スター以上、344人のコントリビューターという規模感は伊達じゃなかったです。

Ant Design Proとは

Ant Design Proは「An out-of-box UI solution for enterprise applications」、つまりエンタープライズアプリケーション向けの「箱から出してすぐ使える」UIソリューションです。

単なるUIコンポーネント集であるAnt Designとは違い、こちらはプロジェクト全体のテンプレート。ルーティング、状態管理、認証、レイアウトまで、管理画面に必要な要素が最初から組み込まれています。

技術スタックとしては、React、Umi（アリババ製フレームワーク）、Dva（状態管理）、Ant Designを採用。最新のTypeScriptで書かれていて、MITライセンスのオープンソースです。

特徴・メリット

1. プロジェクト初期構築が一瞬で終わる

これ、意外と大きいんですよ。

管理画面のプロジェクトを作るとき、ディレクトリ構成どうしよう、ルーティングどうしよう、認証どうしよう、レイアウトどうしよう...と考える時間が結構ある。

Ant Design Proなら、コマンド一発でこれらが全部揃った状態でスタートできます。しかも、ベストプラクティスに基づいた構成なので、後から「しまった」となることが少ない。

2. 豊富なページテンプレート

管理画面でよく使うページパターンが、すでにテンプレートとして用意されています。

• ダッシュボード: 分析画面、モニタリング画面、ワークスペース
• フォーム: 基本フォーム、ステップフォーム、高度なフォーム
• リスト: テーブル一覧、カード一覧、検索リスト
• 詳細ページ: 基本詳細、高度な詳細
• 結果ページ: 成功、失敗
• 例外ページ: 403、404、500
• ユーザー関連: ログイン、登録、プロフィール

個人的には、ステップフォームのテンプレートが特に助かりました。ウィザード形式の入力画面って、自前で実装すると地味に面倒なんですよね。

3. 権限管理が組み込み済み

業務アプリで避けて通れない権限管理。これが最初から組み込まれています。

ルートレベルでのアクセス制御、コンポーネントレベルでの表示制御など、よくあるパターンがすでに実装されている。「管理者だけこのボタンを表示」みたいな要件も、サクッと対応できます。

4. 国際化対応が標準装備

グローバル展開する可能性があるなら、最初から多言語対応しておきたい。Ant Design Proは国際化の仕組みが組み込まれていて、言語ファイルを追加するだけで多言語化できます。

日本語、英語、中国語（簡体字・繁体字）、ポルトガル語などに対応。30代になって思うのは、こういう「後から入れると大変な機能」が最初からあるのは本当にありがたい。

5. モック機能で開発効率アップ

バックエンドAPIができていない段階でも、モックデータでフロントエンド開発を進められます。

開発初期のAPIがまだ固まっていない時期に、UIだけ先に作り込めるのはコスパ的にかなり大きい。

インストール方法

CLIのインストール

# グローバルにCLIをインストール
npm i @ant-design/pro-cli -g

プロジェクトの作成

# 新規プロジェクトを作成
pro create my-admin-app

実行すると、いくつか質問されます。

? 🐂 Use umi@4 or umi@3 ? (Use arrow keys)
❯ umi@4
  umi@3

? 🚀 Do you need all the blocks or a simple scaffold? (Use arrow keys)
❯ simple
  complete

個人的には、まずはsimpleを選んでおいて、必要に応じてブロック（ページテンプレート）を追加していくのがおすすめです。

依存関係のインストールと起動

cd my-admin-app
npm install
npm start

これだけで、認証付きの管理画面がローカルで動きます。初めて見たときは「え、もうできてるじゃん」と思いました。

基本的な使い方

プロジェクト構成

├── config/                 # Umi設定
│   ├── config.ts          # メイン設定
│   ├── routes.ts          # ルーティング定義
│   └── defaultSettings.ts # デフォルト設定
├── src/
│   ├── pages/             # ページコンポーネント
│   ├── components/        # 共通コンポーネント
│   ├── services/          # API呼び出し
│   ├── models/            # 状態管理（Dva）
│   ├── locales/           # 国際化ファイル
│   └── access.ts          # 権限設定
└── mock/                   # モックデータ

ルーティングの追加

config/routes.tsでルーティングを定義します。

export default [
  {
    path: '/user',
    layout: false,
    routes: [
      { path: '/user/login', component: './User/Login' },
    ],
  },
  {
    path: '/dashboard',
    name: 'dashboard',
    icon: 'dashboard',
    component: './Dashboard',
  },
  {
    path: '/list',
    name: 'list',
    icon: 'table',
    routes: [
      {
        path: '/list/basic',
        name: 'basic',
        component: './List/BasicList',
      },
      {
        path: '/list/card',
        name: 'card',
        component: './List/CardList',
      },
    ],
  },
];

nameとiconを指定するだけで、サイドメニューに自動的に反映されます。これ、地味に便利。

ページコンポーネントの作成

// src/pages/Dashboard/index.tsx
import { PageContainer } from '@ant-design/pro-components';
import { Card, Row, Col, Statistic } from 'antd';
import { ArrowUpOutlined, ArrowDownOutlined } from '@ant-design/icons';

const Dashboard: React.FC = () => {
  return (
    <PageContainer>
      <Row gutter={16}>
        <Col span={6}>
          <Card>
            <Statistic
              title="アクティブユーザー"
              value={1128}
              precision={0}
              valueStyle={{ color: '#3f8600' }}
              prefix={<ArrowUpOutlined />}
              suffix="人"
            />
          </Card>
        </Col>
        <Col span={6}>
          <Card>
            <Statistic
              title="売上"
              value={93}
              precision={2}
              valueStyle={{ color: '#cf1322' }}
              prefix={<ArrowDownOutlined />}
              suffix="%"
            />
          </Card>
        </Col>
      </Row>
    </PageContainer>
  );
};

export default Dashboard;

PageContainerで囲むだけで、パンくずリストやページタイトルが自動的に表示されます。

ProTableの活用

データ一覧を表示するなら、ProTableが便利です。

import { ProTable } from '@ant-design/pro-components';
import type { ProColumns } from '@ant-design/pro-components';

interface User {
  id: number;
  name: string;
  email: string;
  status: 'active' | 'inactive';
  createdAt: string;
}

const columns: ProColumns<User>[] = [
  {
    title: 'ID',
    dataIndex: 'id',
    width: 80,
  },
  {
    title: '名前',
    dataIndex: 'name',
    copyable: true,
  },
  {
    title: 'メール',
    dataIndex: 'email',
  },
  {
    title: 'ステータス',
    dataIndex: 'status',
    valueEnum: {
      active: { text: '有効', status: 'Success' },
      inactive: { text: '無効', status: 'Error' },
    },
  },
  {
    title: '作成日',
    dataIndex: 'createdAt',
    valueType: 'dateTime',
    hideInSearch: true,
  },
  {
    title: '操作',
    valueType: 'option',
    render: (_, record) => [
      <a key="edit">編集</a>,
      <a key="delete">削除</a>,
    ],
  },
];

const UserList: React.FC = () => {
  return (
    <ProTable<User>
      columns={columns}
      request={async (params) => {
        // API呼び出し
        const response = await fetchUsers(params);
        return {
          data: response.data,
          total: response.total,
          success: true,
        };
      }}
      rowKey="id"
      search={{ labelWidth: 'auto' }}
      pagination={{ pageSize: 10 }}
      toolBarRender={() => [
        <Button key="add" type="primary">
          新規作成
        </Button>,
      ]}
    />
  );
};

検索フォーム、ページネーション、ツールバーが自動生成される。通常のAnt Design Tableを使うよりも、コード量が大幅に減ります。

実践的なユースケース

権限制御の実装

// src/access.ts
export default function access(initialState: { currentUser?: API.CurrentUser }) {
  const { currentUser } = initialState || {};
  return {
    canAdmin: currentUser && currentUser.role === 'admin',
    canManager: currentUser && ['admin', 'manager'].includes(currentUser.role),
  };
}

// ページコンポーネントで使用
import { useAccess, Access } from 'umi';

const SomePage: React.FC = () => {
  const access = useAccess();
  
  return (
    <div>
      <Access accessible={access.canAdmin}>
        <Button danger>削除（管理者のみ）</Button>
      </Access>
    </div>
  );
};

テーマのカスタマイズ

// config/defaultSettings.ts
const Settings: ProLayoutProps & { pwa?: boolean } = {
  navTheme: 'light',
  colorPrimary: '#1890ff',
  layout: 'mix',
  contentWidth: 'Fluid',
  fixedHeader: true,
  fixSiderbar: true,
  title: '管理システム',
  pwa: false,
};

export default Settings;

API連携

// src/services/user.ts
import { request } from 'umi';

export async function getUsers(params: {
  current?: number;
  pageSize?: number;
}) {
  return request<API.UserList>('/api/users', {
    method: 'GET',
    params,
  });
}

export async function createUser(data: API.User) {
  return request<API.User>('/api/users', {
    method: 'POST',
    data,
  });
}

Umiのrequestはインターセプターも設定できるので、認証トークンの付与やエラーハンドリングも一元管理できます。

Ant DesignとAnt Design Proの使い分け

項目	Ant Design	Ant Design Pro
種類	UIコンポーネント	プロジェクトテンプレート
用途	汎用的なUI構築	管理画面構築
含まれるもの	コンポーネント	ルーティング、認証、レイアウト等
学習コスト	低い	やや高い
カスタマイズ性	高い	中程度
おすすめ	一般的なWebアプリ	管理画面・ダッシュボード

個人的には、管理画面を作るならAnt Design Pro一択ですね。新規プロジェクトで「とりあえずAnt Designだけ入れて始めよう」とすると、結局同じようなレイアウトや認証の仕組みを自前で作ることになる。

まとめ

Ant Design Proを使ってみて感じたこと：

• 初期構築: CLIで一発。考える時間が大幅に短縮される
• テンプレート: よくあるページパターンが揃っていて、カスタマイズも容易
• 権限管理: 業務アプリで必須の機能が組み込み済み
• 開発体験: TypeScript対応、モック機能、ホットリロードと揃っている
• エコシステム: ProComponentsとの連携で、さらに開発効率が上がる

30代になって思うのは、「どれだけ本質的な開発に集中できるか」という話。管理画面のレイアウトやルーティングに時間を使うより、ビジネスロジックに集中したい。

Ant Design Proは「管理画面開発のベストプラクティスをパッケージ化した」という感じ。車輪の再発明を避けて、サクッと管理画面を立ち上げたい人にはおすすめです。

まだ使ったことがない人は、まずはpro createでプロジェクトを作ってみてください。動くものが目の前にあると、イメージが湧きやすいと思いますよ。

参考リンク

• Ant Design Pro公式サイト
• Ant Design Pro GitHub
• Ant Design Pro プレビュー
• ProComponents
• Best of JS - Ant Design Pro