03. 実装仕様ポータル¶

VendureバックエンドとNext.jsストアフロントの実装ドキュメントを横断的に参照できるハブです。開発フェーズで迷いがちな導線をカード形式で整理しました。

🚀 クイックリンク¶

🎯 目的	🔗 ドキュメント	📝 補足
Vendureの基本を理解したい	vendure-development-guide.md	GraphQL API、プラグイン、設定、開発環境
Vendureの深い知識を得たい	vendure-handbook.md	アーキテクチャ、コアコンセプト、実践パターン
Vendureのコアコンセプトを理解したい	vendure-core-concepts.md	ゾーン、チャネル、税・配送システムの技術詳細
Vendureプラグインを実装したい	vendure-plugins/index.md	掛率、割戻金、キャンペーン等の拡張仕様
Vendureシードを安全に投入したい	vendure-seed-data-guide.md	InitialData/CSV整合性ルールと検証スクリプト
フロントエンドの設計指針を確認	frontend/index.md	UI構造・状態管理・GraphQL連携
WordPress CMS統合を理解したい	integration/index.md	CMS統合、GraphQL API、コンテンツ管理
インフラ設定を行いたい	infrastructure/index.md	Fly.io、Upstash、DevContainer
実装例から着想を得たい	implementation-examples/index.md	コードスニペットとベストプラクティス

flowchart LR
  plan[Vendure拡張設計] --> pluginDoc[vendure-plugins/index.md]
  pluginDoc -->|GraphQL拡張| implExamples
  plan --> storeDoc[frontend/index.md]
  storeDoc -->|UI実装| implExamples[implementation-examples/index.md]
  infra[infrastructure/index.md] -->|CI/CD| implExamples
  infra -->|ローカル環境| devEnv[DevContainer Guide]

  subgraph Vendure
    pluginDoc
  end
  subgraph Storefront
    storeDoc
  end
  subgraph Cross
    infra
    implExamples
    devEnv
  end

設計ドキュメントと実装例の行き来を示した図です。Vendure／Storefrontで分担しながらも、InfrastructureとImplementation Examplesで横串管理します。

🧩 セクション概要¶

Vendure Plugins¶

主なテーマ: 顧客別掛率、直送モード10%サーチャージ、月次割戻金、キャンペーン6種
確認ポイント: GraphQL拡張、Webhook、スケジュールバッチ、テスト戦略
推奨フロー: プラグイン開発の基礎で実装手順確認 → 仕様確認 → プラグインテンプレート参照 → 実装サンプルで検証

Frontend (Next.js)¶

サブカテゴリ	内容
コンポーネント設計	Atomic Designベースのモジュール構成
状態管理	React Query＋GraphQL Code Generatorの利用方針
ルーティング	B2B固有の購入制限に合わせた保護ルート
UI/UXガイド	デザインワークショップの成果物へのリンク

WordPress CMS統合¶

操作マニュアル: WordPress CMSの操作・使用方法を体系的にまとめたマニュアル
WordPressをHeadless CMSとして使用する統合方法
GraphQL API（WPGraphQL）の使用方法とクエリ例
コンテンツ管理ガイド（お知らせ、キャンペーン、Heroスライド）
実装パターンとベストプラクティス

推奨: まず WordPress CMS操作マニュアルを参照してください。

Infrastructure & Operations¶

Fly.io 本番環境構成、ステージング環境、Upstash Redisの利用方法
DevContainer/ローカル開発環境構築手順、CI/CDタスク一覧
監視（Logtail, Better Stack）とエラーハンドリングの運用ルール

Implementation Examples¶

GraphQLクエリ/ミューテーションの利用例
Vendureプラグインのテストコード例
E2Eテストシナリオ（Playwright）とデータフィクスチャ

🧭 作業時のガードレール¶

型安全性: TypeScriptとGraphQL Code Generatorで型を担保し、API変更時に検出できるようにする。
自動化優先: oxlint/Prettier/knip/typecheckを定期実行し、CIとローカルのルールを揃える。
ドキュメント同期: 実装変更が生じた場合は、関連セクション（plugins/frontend/infrastructure）の記述を即時更新する。

✅ 更新チェックリスト¶

新規プラグインやAPIを追加したら、対応するセクションと実装例にリンクを追加した。
コード例は最新のフォルダ構成と一致しているか確認した。
インフラ構成の変更があれば、設計側（02-design）との整合も更新した。