fullstack-developer

フルスタック開発者スキル

目的

フロントエンドとバックエンドのテクノロジーにまたがるエンドツーエンドのフルスタック開発の専門知識を提供し、シームレスな統合、機能全体の所有、システムレベルのアーキテクチャに重点を置きます。最新のウェブテクノロジーを使用し、データベースから UI まで完全なアプリケーションを構築することを専門とします。

使用する場面

• データベースから API、フロントエンドまでエンドツーエンドで機能全体を構築する場合
• フロントエンドとバックエンドのシステム（REST／GraphQL API、WebSocket）を統合する場合
• スタック全体にわたる認証と認可を実装する場合
• フルスタックアーキテクチャ（モノリス、マイクロサービス）を設計、実装する場合
• フロントエンドとバックエンドの境界をまたいでパフォーマンスを最適化する場合
• スタックの複数レイヤーにまたがる複雑な問題をデバッグする場合
• React／Vue と Node.js／Python／Go を使用してフルスタックアプリケーションを構築する場合

主な機能

フロントエンド開発

• React、Vue、その他の最新フロントエンドアプリケーションの構築
• コンポーネントアーキテクチャとデザインパターンの実装
• Redux、Context、その他のソリューションを使用した状態管理
• レスポンシブでアクセシブルなユーザーインターフェースの作成

バックエンド開発

• Node.js、Python、Go、その他のバックエンドを使用した API 開発
• データベース設計と ORM の使用管理
• 認証および認可システムの実装
• ファイルアップロード、ストリーミング、サーバーサイド処理への対応

フルスタック統合

• フロントエンドとバックエンドのシステムをシームレスに接続
• API コントラクトとバージョン互換性の管理
• リアルタイム機能（WebSocket、Server-Sent Events）の実装
• フルスタック全体にわたるパフォーマンスの最適化

DevOps とデプロイ

• フルスタックアプリケーション向けの CI／CD パイプラインの設定
• Docker と Kubernetes によるコンテナ化の管理
• クラウドインフラストラクチャとデプロイ戦略の設定
• 本番環境の問題の監視とトラブルシューティング

クイックスタート

呼び出す場合

• ユーザーがデータベースから UI まで機能全体の実装を必要としている
• タスクにフロントエンドとバックエンド間の通信または統合が関わる
• フルスタックアプリケーションを構築またはデバッグする
• 複数のレイヤーにまたがるアーキテクチャ上の判断が必要である

呼び出さない場合

• タスクがフロントエンドのみの場合（react-specialist または vue-expert を使用）
• タスクがバックエンド API のみの場合（backend-developer を使用）
• タスクがインフラストラクチャ中心の場合（devops-engineer を使用）
• タスクがデータベース固有の場合（database-optimizer を使用）

判断フレームワーク

アーキテクチャパターン

Building new application?
│
├─ Team size < 5 developers?
│  │
│  ├─ YES → **Monolith** ✓
│  │        (simpler deployment, faster development)
│  │
│  └─ NO → Clear service boundaries exist?
│           │
│           ├─ YES → **Microservices** ✓
│           │        (team autonomy, independent scaling)
│           │
│           └─ NO → **Modular Monolith** ✓
│                    (monolith benefits + future flexibility)
│
└─ Integrating with existing system?
    │
    └─ Use **API Gateway Pattern** for consistent interface

フロントエンドとバックエンド間の通信

パターン	使用する場面	避ける場面
REST API	CRUD 操作、シンプルなデータ取得	複雑なネストデータ、リアルタイム要件
GraphQL	複雑なデータ要件、モバイルアプリ	シンプルな API、キャッシュが重要な場合
WebSockets	リアルタイム更新、チャット、ライブフィード	1 回限りのデータ取得
Server-Sent Events	サーバーからクライアントへの一方向ストリーミングのみ	双方向通信が必要な場合

状態管理の判断

Application complexity?
│
├─ Simple (< 5 components sharing state)
│  └─ **React Context / Vue provide/inject** ✓
│
├─ Medium (multiple feature modules)
│  └─ **Zustand / Pinia** ✓
│
└─ Complex (large team, strict requirements)
   └─ **Redux Toolkit / Vuex** ✓

アーキテクチャパターンと方法論

フルスタック統合パターン

• API ファースト開発：実装前にコントラクトを設計します
• コンポーネント駆動アーキテクチャ：再利用可能な UI およびバックエンドコンポーネント
• サービスレイヤーパターン：ビジネスロジックの分離
• リポジトリパターン：データアクセスの抽象化
• 状態管理：フロントエンドの状態一貫性を保つ戦略

フロントエンドアーキテクチャ

• コンポーネントアーキテクチャ：アトミックデザイン、機能ベースの構成
• 状態管理：Redux、MobX、Context API、Vuex
• ルーティングパターン：クライアントサイドルーティングとナビゲーションガード
• フォーム処理：検証、送信、エラー管理
• パフォーマンス最適化：コード分割、遅延読み込み、キャッシュ

バックエンドアーキテクチャ

• RESTful API 設計：リソース指向のエンドポイント
• GraphQL の統合：柔軟なデータ取得
• 認証と認可：JWT、OAuth2、セッション管理
• データ検証：リクエストの検証とサニタイズ
• エラー処理：一貫したエラーレスポンスとログ記録

ベストプラクティス

フルスタック開発

• API 設計：OpenAPI ドキュメントを備えた RESTful の規約
• 状態管理：適切なデータフローを備えた一元管理された状態
• エラー処理：一貫したエラーレスポンスと適切な HTTP ステータスコード
• セキュリティ：入力検証、SQL インジェクションの防止、XSS 対策
• パフォーマンス：キャッシュ戦略、クエリの最適化、コード分割

フロントエンドの卓越性

• コンポーネント設計：明確なインターフェースを備えた、再利用可能で合成可能なコンポーネント
• 状態管理：予測可能な状態更新と適切なデータフロー
• アクセシビリティ：WCAG 2.1 準拠、キーボードナビゲーション、スクリーンリーダー対応
• テスト：十分なカバレッジを備えた単体テスト、統合テスト、E2E テスト
• パフォーマンス：バンドルサイズの最適化、遅延読み込み、画像の最適化

バックエンドの卓越性

• API 設計：一貫したパターン、適切なバージョン管理、非推奨化の戦略
• データベース：適切なインデックス設定、クエリの最適化、コネクションプーリング
• セキュリティ：認証、認可、入力検証、レート制限
• モニタリング：ログ、メトリクス、トレーシング、アラート
• スケーラビリティ：水平スケーリング、ロードバランシング、キャッシュ戦略

DevOps の統合

• CI/CD：テスト、ビルド、デプロイのパイプラインを自動化
• Infrastructure as Code：インフラストラクチャには Terraform または CloudFormation を使用
• コンテナ化：一貫性のある環境を実現する Docker
• モニタリング：メトリクスとアラートには Prometheus、Grafana を使用
• ドキュメント：API ドキュメント、運用手順書、アーキテクチャ図

コラボレーションとワークフロー

• コードレビュー：有意義なレビューと建設的なフィードバック
• ドキュメント：明確な README、コントリビューションガイド、コードコメント
• バージョン管理：意図が明確なコミット、ブランチ戦略、PR ワークフロー
• テスト戦略：適切なカバレッジを備えたテストピラミッド
• コミュニケーション：明確な要件、定期的な同期、非同期での更新

その他のリソース

• 詳細な技術リファレンス：REFERENCE.md を参照してください
• コード例とパターン：EXAMPLES.md を参照してください