アーキテクチャ設計の概要

本プロジェクトは、単一リポジトリ内で複数のアプリケーションを管理するmonorepoパターンを採用しています。コア機能はパッケージ単位で分離され、依存関係の整合性と再利用性を高める工夫がなされています。主なディレクトリ構成は以下の通りです。

• apps/：各UIキットに対応した実装版アプリケーション
• packages/：共有コンポーネント、ユーティリティ関数、ステータス管理モジュール
• docs/：構造化された技術文書とAPI仕様の記録
• playground/：インタラクティブな動作検証用のサンドボックス環境

技術選定としては、リアクティブなUI構築にVue 3、厳密な静的チェックにTypeScript、高速なホットリロードとバンドルにVite、グローバル状態の同期にPiniaを採用しています。また、Flexibilityを重視し、Ant Design、Element Plus、Naive UIへのアダプターレイヤーを内蔵することで、開発現場の好みに応じて基盤を選択可能です。

Vue 3の実装パターン

エントリーポイントでは、環境変数のマージと名前空間の生成を行った後、非同期ブートストラップ処理へ移行します。初期化順序は設定適用→ロジック展開→DOM反映→ローディング状態解除の順で制御されており、予期せぬ競合を防ぐ設計となっています。

const setupApplicationEnv = async (): Promise<void> => {
  const buildStage = import.meta.env.DEV ? 'development' : 'production';
  const releaseTag = import.meta.env.VITE_APP_VERSION ?? 'latest';
  const scopeName = `${import.meta.env.VITE_APP_NAMESPACE}-${releaseTag}-${buildStage}`;

  await applyUserSettings({
    identifier: scopeName,
    customOverrides: presetPreferences,
  });

  const { executeCoreStartup } = await loadLazyModule('./src/core/startup');
  await executeCoreStartup(scopeName);

  clearGlobalLoadingOverlay();
};

実際のVueインスタンス生成とプラグイン登録は、専用ランチャーで一元管理されます。ディレクティブの適用、多言語対応、ストア初期化、ルーティングの紐付け、アニメーション拡張子を順番に組み込みます。最後に動的タイトル更新ロジックを実行してDOMへレンダリングします。

const runMainBootstrapper = async (contextIdentifier: string) => {
  await initializeUIAdapters();
  await prepareDynamicFormEngine();

  const rootInstance = createApp(AppShell);

  registerCustomLoadingDirectives(rootInstance, {
    spinningClass: 'spinning',
    loadingClass: 'loading',
  });

  await implementLocalizationPlugin(rootInstance);
  await provisionStateStores(rootInstance, { identifier: contextIdentifier });
  attachRoleBasedAccessControls(rootInstance);

  const { configureTooltipEngine } = await loadExternalModule('@shared/common-ui/es/tooltip');
  configureTooltipEngine(rootInstance);

  rootInstance.use(routerInstance);

  const { MotionExtension } = await loadDynamicPackage('@shared/plugins/animations');
  rootInstance.use(MotionExtension);

  watchEffect(() => {
    if (preferences.app.enableDynamicTitle) {
      const routeLabel = routerInstance.currentRoute.value.meta?.heading;
      const computedTitle = routeLabel
        ? `${translate(routeLabel)} - ${preferences.app.displayName}`
        : preferences.app.displayName;
      document.title = computedTitle;
    }
  });

  rootInstance.mount('#application-root');
};

アクセス制御やフォームロジックはComposition APIを活用してフック関数化されており、必要な画面でのみインポートされるよう構成されています。

TypeScriptの型システム統合

プロジェクト全体で統一された型定義セットが提供されており、データフローの一貫性を担保しています。ユーザープロフィール情報やナビゲーション構造に関するインターフェースは明示的に宣言されています。

export interface UserProfileData {
  accountId: string | number;
  loginName: string;
  fullName: string;
  portraitUrl: string;
  description?: string;
  dashboardPath?: string;
  assignedRoles: RoleDefinition[];
}

export interface NavigationRouteDefinition {
  heading: string;
  symbol?: string;
  visible?: boolean;
  restorePosition?: boolean;
  cacheView?: boolean;
  hiddenInMenu?: boolean;
  // 追加メタデータ省略
}

通信層においてもジェネリクスを活用し、リクエスト送信時の引数型とレスポンスボディの型を明確に区別します。これにより、実行時エラーをコンパイル段階で捕捉できます。

export async function fetchResource<T = unknown>(
  endpointPath: string,
  requestOptions?: AxiosRequestOptions
): Promise<ApiResponseBody<T>> {
  return httpClient.request<T>({
    path: endpointPath,
    method: 'GET',
    ...(requestOptions ?? {}),
  });
}

Viteビルドパイプラインの最適化

環境ごとの差異を吸収するため、設定値は外部プロファイルから読み込まれます。開発中はホスト解放とCORS有効化、プロキシ設定が自動的に適用され、本番ビルドではターゲットブラウザに合わせて最適化が行われます。

export default defineConfig(({ command }): UserConfig => {
  const isDev = command === 'serve';

  return {
    basePath: PUBLIC_ASSET_PATH,
    rootDir: process.cwd(),
    resolveAlias: configuredAliases,
    devServer: {
      hostAllowAll: true,
      portNumber: DEV_SERVER_PORT,
      autoOpenBrowser: isDev && ENABLE_AUTO_OPEN,
      corsPolicy: true,
      proxyRules: createReverseProxyTable(API_MOCK_TARGETS),
    },
    productionBuild: {
      targetSetting: 'es2015',
      outputDirectory: BUNDLE_OUTPUT_DIR,
      assetFolder: 'static-assets',
      rollupSettings: {
        outputs: {
          chunkNamingPattern: 'scripts/[name]-[hash].js',
          entryNamingPattern: 'scripts/[name]-[hash].js',
          assetNamingPattern: '[ext]/[name]-[hash].[ext]',
        },
      },
    },
    optimizeDeps: {
      includeList: ['external-dependency-a', 'external-dependency-b'],
    },
  };
});

本番環境向けには、ルート単位でのコード分割、大型画像やエディターの遅延読み込み、静的アセットのハッシュ付き圧縮、およびCommonJS互換ライブラリのESM変換がデフォルトで有効化されています。

核心モジュールの実装詳細

状態管理はPiniaベースで構築されており、features単位でモジュールが分割されています。名前空間を通じてStoreの重複防止とスコープ整理が実施されています。

ルーター側では認証済み権限に応じたメニューフィルタリングを実装しており、未認可パスへの直接遷移をブロックするガード関数が組み込まれています。また、`@shared/ui-kit`からは検索窓、テーブルページャー、ドラッグ可能レイアウトなどの業務特化コンポーネントを提供しており、全て強固な型シグネチャとJSDoc記載が完了しています。

開発環境構築と設定

リポジトリの取得と依存関係の解決にはNode.jsパッケージマネージャーが推奨されます。pnpmワークスペースを利用することで、横断的なシンボリックリンク管理とディスク容量の節約が可能です。

git clone https://github.com/example/vue-admin-template.git
cd vue-admin-template
npm install -g corepack
corepack enable
pnpm install --frozen-lockfile

作業ディレクトリ内の構成は明確に分けられており、特定のUIフレームワークのみを対象に起動することも可能です。ドキュメントフォルダには運用手順や設定フラグ一覧が網羅されています。

テーマ設定のカスタマイズ

デザインシステムの採用色やバリエーションは設定オブジェクトで上書き可能です。パッケージ内に標準テーマファイルが存在し、CSS変数としてDOMに展開される仕組みとなっています。

export const designThemeOverrides = {
  brandPrimaryColor: '#096dd9',
  statusSuccessTint: '#52c41a',
  alertWarningHighlight: '#faad14',
  errorCriticalColor: '#ff4d4f',
  borderRadiusStandard: '6px',
  fontScaleBase: '1rem',
};