vue3-naiveui-fsd

Vue 3 + Naive UI + FSD シニア開発スキル

Naive UI、Feature-Sliced Design アーキテクチャ、TypeScript、業界のベストプラクティスを活用して、本番環境対応の Vue 3 アプリケーションを構築するためのエキスパートレベルのスキルです。

技術スタック

• Vue 3 と Composition API（<script setup>）
• Naive UI v2.43+ コンポーネントライブラリ
• Feature-Sliced Design（FSD） アーキテクチャ
• 厳格モードの TypeScript
• 状態管理用の Pinia
• ルーティング用の Vue Router 4
• ユーティリティスタイル用の Tailwind CSS v4
• HTTP リクエスト用の Axios
• 日付処理用の Day.js
• アイコン用の Lucide Vue Next
• 国際化用の Vue I18n

リファレンス

詳細なドキュメントは references/ フォルダーに整理されています。

ファイル	説明
fsd-architecture.md	FSD のディレクトリ構造とレイヤーのルール
api-layer.md	Axios の設定、インターセプター、サービスパターン
types.md	TypeScript のパターン、I プレフィックス規則
stores.md	Pinia のグローバルストア（auth、operation）
composables.md	usePagination、useValidationRules、useTheme
forms.md	フォームのコンポーザブルパターン（useXxxForm）
pages.md	テーブルと CRUD を備えたページコンポーネント
shared-ui.md	BaseTable、BaseModal、ボタン
utilities.md	フォーマッター、ヘルパー
router.md	ルーター設定、ガード、ローディングバー

クイックスタートのパターン

コンポーネントの構造

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { NCard, NButton } from 'naive-ui'
import type { IUser } from '@/entities/user'

const props = defineProps<{ userId: number }>()
const emit = defineEmits<{ success: [] }>()

const loading = ref(false)
// ... logic
</script>

<template>
  <NCard>
    
  </NCard>
</template>

FSD レイヤーのインポートルール

app     → pages, features, entities, shared
pages   → features, entities, shared
features → entities, shared
entities → shared only
shared  → nothing (self-contained)

型の命名規則

IUser         // Base entity
IUserList     // List item (simplified)
IUserDetail   // Full detail
IUserForm     // Form data
IUserListParams // Query params

コード品質チェックリスト

• TypeScript の厳格モードに合格する
• 型に I プレフィックス規則を使用する
• FSD レイヤーの境界を遵守する
• API サービスを shared/api/ に配置する
• フォームのロジックをコンポーザブル（useXxxForm）に配置する
• ページネーションに usePagination を使用する
• バリデーションに useValidationRules を使用する
• ユーザーに表示するすべてのテキストに i18n を使用する
• ローディング状態とエラー状態を処理する