vuejs-typescript-best-practices について
vuejs-typescript-best-practicesは、Vue.jsとTypeScriptによる開発ガイドです。フロントエンドアプリのコード構成、Composition API、UIスタイル、パフォーマンス最適化を扱います。
主な機能
- 01TypeScriptとインターフェースの利用
- 02Vue Composition APIの採用
- 03モジュール単位のコード整理
- 04レスポンシブなモバイルファースト設計
- 05非同期コンポーネントとビルド分割の最適化
活用シーン
- 01Vueプロジェクトのファイル構成設計
- 02Composition APIコンポーネントの作成
- 03モバイル対応インターフェースの構築
- 04読み込みとViteビルドサイズの最適化
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/インストール後、Claude Code で/vuejs-typescript-best-practicesを入力して読み込まれたか確認します。
詳細
Vue.js TypeScript のベストプラクティス
TypeScript、Node.js、Vite、Vue.js、Vue Router、Pinia、VueUse、Headless UI、Element Plus、Tailwind のエキスパートとして、ベストプラクティスとパフォーマンス最適化を深く理解しています。
コードのスタイルと構成
- 関連する例を用いて、簡潔で保守しやすく、技術的に正確な TypeScript コードを書きます
- 関数型および宣言型のプログラミングパターンを使用し、クラスは避けます
- DRY の原則に従い、コードの重複を避けるため、反復とモジュール化を優先します
- 補助動詞を使った説明的な変数名を使用します（例：isLoading、hasError）
- ファイルを体系的に整理します。各ファイルには、エクスポートするコンポーネント、サブコンポーネント、ヘルパー、静的コンテンツ、型など、関連する内容のみを含めます
命名規則
- ディレクトリ名には小文字とハイフンを使用します（例：components/auth-wizard）
- 関数には名前付きエクスポートを優先します
TypeScript の使用
- すべてのコードで TypeScript を使用します。拡張性があり、宣言のマージもできるため、type より interface を優先します
- enum は避け、型安全性と柔軟性を高めるために map を使用します
- TypeScript のインターフェースを使用して関数コンポーネントを作成します
構文とフォーマット
- 純粋関数には、巻き上げの恩恵を受けられ、明確さも向上する「function」キーワードを使用します
- 常に Vue Composition API の script setup スタイルを使用します
UI とスタイリング
- コンポーネントとスタイリングには Headless UI、Element Plus、Tailwind を使用します
- Tailwind CSS でレスポンシブデザインを実装し、モバイルファーストのアプローチを採用します
パフォーマンスの最適化
- 該当する場合は VueUse の関数を活用して、リアクティビティとパフォーマンスを向上させます
- 非同期コンポーネントをフォールバック UI とともに Suspense でラップします
- 重要度の低いコンポーネントには動的読み込みを使用します
- 画像を最適化します。WebP 形式を使用し、サイズ情報を含め、遅延読み込みを実装します
- Vite のビルドプロセスで、コード分割などの最適化されたチャンク戦略を実装し、バンドルサイズを縮小します
主な規約
- Lighthouse や WebPageTest などのツールを使って、Web Vitals（LCP、CLS、FID）を最適化します
コメント
Markdown 対応