開発フェーズのタスク

• 要件定義
• フロントエンド技術選定
• プロジェクト初期設定（Vue汎用テンプレート構築）
• 基本ページ開発
• アプリマーケットトップページ（審査済みアプリ一覧表示）
• アプリ詳細ページ
• コンテンツ作成機能（アプリ/問題/評価項目）
• 解答機能（アプリ問題解答/結果表示/回答履歴確認）

使用技術

• Vue 3 (Vue CLI)
• Pinia（状態管理）
• Axios（HTTP通信）
• Arco Design（UIコンポーネント）
• ESLint + Prettier + TypeScript
• OpenAPIコード自動生成

開発手順

プロジェクト初期設定

Vue CLIを使用して新規プロジェクト作成：
vue create app-market-frontend

ページレイアウト開発

Arco Designコンポーネントライブラリ導入

複数レイアウト対応

認証不要ページ（ログイン/登録）ではナビゲーションを非表示にするため、複数レイアウト対応が必要

実装方法：

1. vue-routerの子ルート機能を活用
2. ルート設定例：

{
  path: "/auth",
  component: AuthLayout,
  children: [
    { path: "login", component: LoginForm },
    { path: "register", component: RegistrationForm }
  ]
}

App.vueでのレイアウト分岐：

<template>
  <div id="app">
    <AuthLayout v-if="route.path.includes('/auth')" />
    <MainLayout v-else />
  </div>
</template>

APIリクエスト処理

Axiosの基本設定例：

const apiClient = axios.create({
  baseURL: "https://api.example.com",
  timeout: 15000,
  credentials: true
});

OpenAPIツールによる自動コード生成を活用

グローバル状態管理

Piniaストア実装例（ユーザー情報管理）：

export const useUserStore = defineStore("user", () => {
  const currentUser = ref<UserProfile>({ name: "ゲスト" });
  
  const updateUser = (userData: UserProfile) => {
    currentUser.value = userData;
  };
  
  const loadUserData = async () => {
    const response = await fetchUserProfile();
    if (response.status === 200) {
      currentUser.value = response.data;
    }
  };
  
  return { currentUser, updateUser, loadUserData };
});

コンポーネントでの利用：

const userStore = useUserStore();
userStore.loadUserData();

権限管理システム

ルートメタデータに権限要件を定義：

{
  path: "/admin",
  meta: { requiredRole: "ADMIN" }
}

グローバルナビゲーションガードで権限チェック

主要ページ構成

ユーザー管理

認証画面、管理者用管理コンソール

アプリケーション管理

アプリ管理、問題管理、評価管理

アプリケーション表示

トップページ、詳細ページ

コンテンツ作成

1. アプリケーション登録（編集機能対応）
2. 問題/評価項目追加

作成者判定ロジック：

const isOwner = computed(() => {
  return userStore.currentUser.id === appData.value.authorId;
});

解答機能

問題解答インターフェース、結果表示、回答履歴閲覧