Reactの設定地獄に疲れたら、Umiという選択肢がある

はじめに

新しいReactプロジェクトを立ち上げるたびに、ルーティング、ビルド設定、状態管理、Lint……と、 本題に入る前の準備で疲れてしまった経験はないでしょうか。ライブラリを一つひとつ選定して つなぎ合わせる作業は、規模が大きくなるほど負担が積み重なっていきます。

Umiは、この「立ち上げの面倒さ」を丸ごと引き受けてくれるReactフレームワークです。 Ant Group（アリババ系列）社内で1万を超えるアプリケーションを支えてきた実績を持ち、 ルーティングからビルド、プラグインによる機能拡張までを一貫した仕組みで提供します。 この記事では、Umiの特徴からインストール、実際のコードの書き方までを順を追って紹介します。

Umiとは

Umiは中国のAnt Group（蟻集団）が開発する、エンタープライズ向けのReactアプリケーション フレームワークです。公式には「拡張可能なエンタープライズグレードのフロントエンド アプリケーションフレームワーク」と位置づけられており、社内の大規模プロダクト群を 支える基盤として育てられてきました。

単なるルーティングライブラリやビルドツールの寄せ集めではなく、ルーティングを軸に 据えたうえで、ビルド・プラグイン・デプロイまでを一つのフレームワークとして まとめている点が最大の特徴です。

主な特徴

• 規約ベース＋設定ベースの両対応ルーティング - pagesディレクトリにファイルを置くだけの 規約型ルーティングと、.umirc.tsで細かく制御する設定型ルーティングの両方を選べます
• プラグインアーキテクチャ - ソースコードからビルド成果物までのライフサイクル全体に フックできるプラグインシステムを持ち、Ant Design連携や国際化などが公式プラグインとして 提供されています
• Mako / MFSUによる高速ビルド - Rust製バンドラーMakoや、依存関係を事前バンドルして 再構築コストを下げるMFSU（Mako Fast Split Upgrade）により、大規模プロジェクトでも 高速な開発体験を維持できます
• SSR / SSG対応 - サーバーサイドレンダリングと静的サイト生成をフレームワークレベルで サポートしています
• TypeScript・React 18標準対応 - 追加設定なしでTypeScriptとReact 18の機能を利用できます

インストール

Umiはcreate-umiというスキャフォールディングツールを使ってプロジェクトを作成します。

# npm
npx create-umi@latest

# yarn
yarn create umi

# pnpm
pnpm dlx create-umi@latest

コマンドを実行すると、テンプレート（simple app、Ant Design proのテンプレートなど）や npmクライアントを選択するインタラクティブなプロンプトが表示され、それに答えるだけで プロジェクトのひな型が生成されます。

基本的な使い方

プロジェクトを作成すると、次のようなディレクトリ構成になります。

my-umi-app/
├── .umirc.ts       # Umiの設定ファイル
├── src/
│   ├── pages/      # ファイルベースルーティングの起点
│   │   ├── index.tsx
│   │   └── users/
│   │       └── index.tsx
│   └── app.tsx     # ランタイム設定（レイアウトなど）
└── package.json

src/pages配下にファイルを置くだけで、そのままURLに対応するルートになります。 例えばsrc/pages/users/index.tsxは/usersというパスでアクセスできます。

// src/pages/users/index.tsx
export default function UsersPage() {
  return (
    <div>
      <h1>ユーザー一覧</h1>
    </div>
  );
}

開発サーバーの起動やビルドは、生成されたpackage.jsonのスクリプト経由で行います。

npm run dev    # 開発サーバーを起動
npm run build  # 本番用ビルドを生成

.umirc.tsでは、ルーティングの明示指定やプロキシ設定、テーマのカスタマイズなど、 アプリケーション全体の挙動を設定できます。

// .umirc.ts
import { defineConfig } from 'umi';

export default defineConfig({
  routes: [
    { path: '/', component: 'index' },
    { path: '/users', component: 'users/index' },
  ],
  npmClient: 'pnpm',
});

実践的なユースケース

Umiは「小さく始めて必要な分だけ機能を足す」設計になっているため、プロジェクトの 規模やフェーズに応じて使い方のパターンが変わってきます。

ファイルベースルーティングで素早く画面を増やす

プロトタイピングや小〜中規模のプロジェクトでは、.umirc.tsにルートを列挙するより、 src/pagesのディレクトリ構造だけでルーティングを表現する方が圧倒的に速く画面を 増やせます。ネストしたディレクトリはそのままネストしたパスになり、[id].tsxのような ファイル名で動的ルートも表現できます。

src/pages/
├── index.tsx           # -> /
├── users/
│   ├── index.tsx        # -> /users
│   └── [id].tsx          # -> /users/:id
└── settings/
    └── index.tsx         # -> /settings

// src/pages/users/[id].tsx
import { useParams } from 'umi';

export default function UserDetail() {
  const { id } = useParams();
  return <div>ユーザーID: {id}</div>;
}

新しいページを追加するたびに.umirc.tsを編集する必要がないため、機能追加のたびに ルーティング定義を書き換える手間から解放されます。

プラグインで状態管理や国際化を後付けする

Umiは最初からすべての機能を積んでおくのではなく、必要になった時点でプラグインを 有効化していくスタイルを取ります。例えば状態管理には公式プラグインの@umijs/pluginsに 含まれるmodelプラグインを使うと、Reduxのようなボイラープレートなしでグローバルな 状態を扱えます。

// .umirc.ts
import { defineConfig } from 'umi';

export default defineConfig({
  plugins: ['@umijs/plugins/dist/model'],
  model: {},
});

// src/models/counter.ts
import { useState } from 'react';

export default function useCounterModel() {
  const [count, setCount] = useState(0);
  return { count, increment: () => setCount((c) => c + 1) };
}

// 任意のコンポーネントから利用
import { useModel } from 'umi';

export default function Counter() {
  const { count, increment } = useModel('counter');
  return <button onClick={increment}>count: {count}</button>;
}

同様に国際化にはlocaleプラグイン、リクエスト処理にはrequestプラグインが 用意されており、プロジェクトの成長に合わせて必要な機能だけを積み増していけます。

SSR / SSGでコンテンツ配信を最適化する

ブログやコーポレートサイトのように、SEOや初回表示速度が重視されるページでは、 Umiのssr設定を有効にすることでサーバーサイドレンダリングや静的サイト生成に 切り替えられます。

// .umirc.ts
import { defineConfig } from 'umi';

export default defineConfig({
  ssr: {},
  exportStatic: {}, // ビルド時に静的HTMLとして書き出す
});

同じソースコードのまま、SPAとして動かすかSSR/SSGとして配信するかを設定の 切り替えだけでコントロールできる点が、Umiを「立ち上げ後も長く使える」フレームワークに している理由の一つです。

まとめ

Umiは、ルーティング・ビルド・プラグインという三本柱を一つのフレームワークに まとめることで、Reactプロジェクトの立ち上げから大規模運用までを一貫してカバーします。 ファイルベースルーティングによる素早い開発、プラグインによる段階的な機能拡張、 そしてMakoやMFSUによる高速ビルドは、いずれも「規模が大きくなっても開発体験を 落とさない」ための工夫です。

Reactでの開発環境構築に手間を感じているなら、npx create-umi@latest一つで まず動くものを触ってみるのがおすすめです。

参考リンク

• Umi公式ドキュメント
• Umi GitHub
• umi - npm