Senior Frontend

最新のツールとベストプラクティスを備えた、シニアフロントエンド開発の完全なツールキット。

クイックスタート

主な機能

このスキルは自動化されたスクリプトを通じて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 で利用可能な包括的なガイド:

• 詳細なパターンとプラクティス
• コード例
• ベストプラクティス
• 回避すべきアンチパターン
• 実世界のシナリオ

NextJS 最適化ガイド

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.md
• references/nextjs_optimization_guide.md
• references/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/ ディレクトリ