シニアフロントエンド
モダンなツールとベストプラクティスを用いたシニアフロントエンドのための完全なツールキット。
クイックスタート
主な機能
このスキルは、自動化スクリプトを通じて3つの中核機能を提供します。
# スクリプト1: コンポーネントジェネレーター
python scripts/component_generator.py [options]
# スクリプト2: バンドルアナライザー
python scripts/bundle_analyzer.py [options]
# スクリプト3: フロントエンドスキャフォルダー
python scripts/frontend_scaffolder.py [options]
中核機能
1. コンポーネントジェネレーター
コンポーネント生成タスクのための自動化ツール。
機能:
- 自動スキャフォールディング
- 組み込みのベストプラクティス
- 設定可能なテンプレート
- 品質チェック
使用方法:
python scripts/component_generator.py <project-path> [options]
2. バンドルアナライザー
包括的な分析および最適化ツール。
機能:
- 詳細な分析
- パフォーマンスメトリクス
- 推奨事項
- 自動修正
使用方法:
python scripts/bundle_analyzer.py <target-path> [--verbose]
3. フロントエンドスキャフォルダー
専門タスクのための高度なツール。
機能:
- エキスパートレベルの自動化
- カスタム設定
- 統合対応
- プロダクション品質の出力
使用方法:
python scripts/frontend_scaffolder.py [arguments] [options]
リファレンスドキュメント
Reactパターン
references/react_patterns.md で包括的なガイドが利用可能:
- 詳細なパターンとプラクティス
- コード例
- ベストプラクティス
- 避けるべきアンチパターン
- 実世界のシナリオ
Next.js最適化ガイド
references/nextjs_optimization_guide.md の完全なワークフロードキュメント:
- ステップバイステップのプロセス
- 最適化戦略
- ツール統合
- パフォーマンスチューニング
- トラブルシューティングガイド
フロントエンドのベストプラクティス
references/frontend_best_practices.md の技術リファレンスガイド:
- テクノロジースタックの詳細
- 設定例
- 統合パターン
- セキュリティ考慮事項
- スケーラビリティガイドライン
テクノロジースタック
言語: TypeScript, JavaScript, Python, Go, Swift, Kotlin フロントエンド: React, Next.js, React Native, Flutter バックエンド: Node.js, Express, GraphQL, REST APIs データベース: PostgreSQL, Prisma, NeonDB, Supabase DevOps: Docker, Kubernetes, Terraform, GitHub Actions, CircleCI クラウド: AWS, GCP, Azure
開発ワークフロー
1. セットアップと設定
# 依存関係のインストール
npm install
# または
pip install -r requirements.txt
# 環境設定
cp .env.example .env
2. 品質チェックの実行
# アナライザースクリプトの使用
python scripts/bundle_analyzer.py .
# 推奨事項の確認
# 修正の適用
3. ベストプラクティスの実装
以下のドキュメントに記載されたパターンとプラクティスに従ってください:
references/react_patterns.mdreferences/nextjs_optimization_guide.mdreferences/frontend_best_practices.md
ベストプラクティスのまとめ
コード品質
- 確立されたパターンに従う
- 包括的なテストを作成する
- 決定事項を文書化する
- 定期的にレビューする
パフォーマンス
- 最適化前に測定する
- 適切なキャッシュを使用する
- クリティカルパスを最適化する
- 本番環境で監視する
セキュリティ
- すべての入力を検証する
- パラメータ化クエリを使用する
- 適切な認証を実装する
- 依存関係を最新に保つ
保守性
- 明確なコードを書く
- 一貫した命名を使用する
- 役立つコメントを追加する
- シンプルに保つ
よく使用するコマンド
# 開発
npm run dev
npm run build
npm run test
npm run lint
# 分析
python scripts/bundle_analyzer.py .
python scripts/frontend_scaffolder.py --analyze
# デプロイメント
docker build -t app:latest .
docker-compose up -d
kubectl apply -f k8s/
トラブルシューティング
よくある問題
references/frontend_best_practices.md の包括的なトラブルシューティングセクションを確認してください。
ヘルプを得る
- リファレンスドキュメントを確認する
- スクリプトの出力メッセージをチェックする
- テクノロジースタックのドキュメントを参照する
- エラーログを確認する
リソース
- パターンリファレンス:
references/react_patterns.md - ワークフローガイド:
references/nextjs_optimization_guide.md - テクニカルガイド:
references/frontend_best_practices.md - ツールスクリプト:
scripts/ディレクトリ