senior-frontend

Senior Frontend

モダンなツールとベストプラクティスを備えた、シニアフロントエンド開発者向けの総合ツールキットです。

クイックスタート

主な機能

このスキルは、自動化スクリプトを通じて3つの中核機能を提供します:

# Script 1: Component Generator
python scripts/component_generator.py [options]

# Script 2: Bundle Analyzer
python scripts/bundle_analyzer.py [options]

# Script 3: Frontend Scaffolder
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. セットアップと設定

# Install dependencies
npm install
# or
pip install -r requirements.txt

# Configure environment
cp .env.example .env

2. 品質チェックの実行

# Use the analyzer script
python scripts/bundle_analyzer.py .

# Review recommendations
# Apply fixes

3. ベストプラクティスの実装

以下に記載されているパターンとプラクティスに従ってください:

• references/react_patterns.md
• references/nextjs_optimization_guide.md
• references/frontend_best_practices.md

ベストプラクティスの要約

コード品質

• 確立されたパターンに従う
• 包括的なテストを書く
• 判断の理由を文書化する
• 定期的にレビューする

パフォーマンス

• 最適化の前に計測する
• 適切なキャッシュを使用する
• 重要なパスを最適化する
• 本番環境で監視する

セキュリティ

• すべての入力を検証する
• パラメータ化されたクエリを使用する
• 適切な認証を実装する
• 依存関係を最新の状態に保つ

保守性

• 明確なコードを書く
• 一貫した命名を使用する
• 役立つコメントを追加する
• シンプルに保つ

よく使うコマンド

# Development
npm run dev
npm run build
npm run test
npm run lint

# Analysis
python scripts/bundle_analyzer.py .
python scripts/frontend_scaffolder.py --analyze

# Deployment
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/ ディレクトリ