القائمة
Nuxt 4プロジェクトで再利用可能なComposableを作成する際のテンプレートとガイドライン
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
| name | create-composable |
| description | Nuxt 4プロジェクトで再利用可能なComposableを作成する際のテンプレートとガイドライン |
このスキルは、「いぬいのうた」プロジェクトで再利用可能なComposition API ロジックを作成する際の標準パターンを提供します。
// composables/useSomething.ts
export const useSomething = () => {
const state = ref<Type>(initialValue);
const loading = ref(false);
const error = ref<string | null>(null);
const fetchData = async () => {
loading.value = true;
error.value = null;
try {
// ロジック実装
state.value = result;
} catch (e) {
error.value = 'エラーメッセージ';
console.error(e);
} finally {
loading.value = false;
}
};
return {
state,
loading,
error,
fetchData,
};
};
// composables/useSongs.ts
export const useSongs = () => {
const songs = ref<Song[]>([]);
const loading = ref(false);
const error = ref<string | null>(null);
const fetchSongs = async (params?: SongSearchParams) => {
loading.value = true;
error.value = null;
try {
const data = await $fetch('/api/songs', { query: params });
songs.value = data.results;
} catch (e) {
error.value = 'データの取得に失敗しました';
console.error(e);
} finally {
loading.value = false;
}
};
return { songs, loading, error, fetchSongs };
};
// composables/useToggle.ts
export const useToggle = (initialValue = false) => {
const state = ref(initialValue);
const toggle = () => {
state.value = !state.value;
};
const setTrue = () => {
state.value = true;
};
const setFalse = () => {
state.value = false;
};
return {
state,
toggle,
setTrue,
setFalse,
};
};
// composables/usePlaybackControl.ts
export const usePlaybackControl = () => {
const currentTime = ref(0);
const duration = ref(0);
const isPlaying = ref(false);
const play = () => {
isPlaying.value = true;
};
const pause = () => {
isPlaying.value = false;
};
const seek = (time: number) => {
currentTime.value = Math.max(0, Math.min(time, duration.value));
};
const progress = computed(() => {
return duration.value > 0 ? currentTime.value / duration.value : 0;
});
return {
currentTime,
duration,
isPlaying,
progress,
play,
pause,
seek,
};
};
app/composables/use プレフィックス + PascalCaseuseSongs.ts, usePlayer.ts, usePlaylist.ts// composables/useSongs.ts
import type { Song, SongSearchParams } from '~/types/api';
export const useSongs = () => {
// 実装
};
interface UseSongsReturn {
songs: Ref<Song[]>;
loading: Ref<boolean>;
error: Ref<string | null>;
fetchSongs: (params?: SongSearchParams) => Promise<void>;
}
export const useSongs = (): UseSongsReturn => {
// 実装
return { songs, loading, error, fetchSongs };
};
export const useAutoFetch = (url: string) => {
const data = ref(null);
// ライフサイクルフックの使用
onMounted(async () => {
data.value = await $fetch(url);
});
// クリーンアップ
onUnmounted(() => {
// 必要に応じてクリーンアップ
});
return { data };
};
✅ use プレフィックス
use で始める✅ 型安全性
✅ 再利用性
✅ エラーハンドリング
Composables を使うべき場合:
Stores を使うべき場合:
export const usePaginatedFetch = <T>(endpoint: string) => {
const items = ref<T[]>([]);
const page = ref(1);
const totalPages = ref(1);
const loading = ref(false);
const fetchPage = async (pageNum: number) => {
loading.value = true;
try {
const data = await $fetch(endpoint, {
query: { page: pageNum }
});
items.value = data.results;
totalPages.value = data.total_pages;
page.value = pageNum;
} finally {
loading.value = false;
}
};
return { items, page, totalPages, loading, fetchPage };
};
export const useDebouncedSearch = (searchFn: (query: string) => Promise<void>) => {
const query = ref('');
const loading = ref(false);
let timeoutId: NodeJS.Timeout;
const search = (value: string) => {
query.value = value;
loading.value = true;
clearTimeout(timeoutId);
timeoutId = setTimeout(async () => {
await searchFn(value);
loading.value = false;
}, 300);
};
onUnmounted(() => {
clearTimeout(timeoutId);
});
return { query, loading, search };
};
export const useLocalStorage = <T>(key: string, initialValue: T) => {
const state = ref<T>(initialValue);
// 初期化時にローカルストレージから読み込み
onMounted(() => {
const stored = localStorage.getItem(key);
if (stored) {
state.value = JSON.parse(stored);
}
});
// 状態が変わったら保存
watch(state, (newValue) => {
localStorage.setItem(key, JSON.stringify(newValue));
}, { deep: true });
return state;
};
Composable作成完了時に確認：
use プレフィックスapp/composables/ に配置