参考資料・外部リンク集¶

概要¶

リツビ BtoB ECサイト開発・運用に関連する重要な参考資料とリンクを体系的にまとめた文書です。

🏗️ 技術プラットフォーム¶

Vendure（バックエンド）¶

公式ドキュメント - Vendureの完全なドキュメンテーション
GraphQL API Reference - GraphQL APIリファレンス
プラグイン開発ガイド - カスタムプラグイン開発
GitHub - ソースコード・Issues・Discussions

Vite / TanStack Router（フロントエンド）¶

Vite 公式ドキュメント - Vite の基本ガイド
TanStack Router (React) - ルーティングと loader / beforeLoad 設計
React TypeScript Cheatsheet - React + TypeScript 実装指針

UI・デザインシステム¶

shadcn/ui - UIコンポーネントライブラリ
Tailwind CSS - CSSフレームワーク
Radix UI - アクセシブルなUIプリミティブ

💳 決済システム¶

SB Payment¶

開発者向けドキュメント - API仕様・連携ガイド
API リファレンス - 決済API詳細仕様
テスト環境ガイド - テスト用設定・カード番号
エラーコード一覧 - エラーハンドリング用

GMOペイメントゲートウェイ¶

開発者ガイド - 連携仕様書
API仕様書 - 決済API仕様

PayPal¶

Developer Documentation - PayPal連携ドキュメント
REST API Reference - REST API仕様

📊 決済システム比較表¶

決済サービス	API形式	B2B対応	日本語サポート	手数料目安	実装難易度
SB Payment	REST API	⭕ 優秀	⭕ 完全対応	2.5-3.5%	🟢 易しい
GMO PG	REST/SOAP	⭕ 対応	⭕ 完全対応	2.8-3.8%	🟡 普通
PayPal	REST API	△ 部分対応	⭕ 対応	3.6% + 固定	🟢 易しい
Stripe	REST API	⭕ 対応	△ 英語中心	3.6%	🟢 易しい

選定理由（リツビ採用：SB Payment）¶

B2B特化: 請求書払い・銀行振込に強い
日本市場: 日本企業のニーズを理解した機能
サポート: 日本語での技術サポート充実
コスト: B2B取引量での優位性

🚀 インフラストラクチャ¶

Fly.io（Vendure ホスティング）¶

公式ドキュメント - Fly.io プラットフォームガイド
Node.js デプロイガイド - Node.jsアプリケーションのデプロイ
PostgreSQL ガイド - Fly Postgres 設定・運用
監視・ログ - アプリケーション監視

Cloudflare Workers（Storefront / React Dashboard ホスティング）¶

公式ドキュメント - Cloudflare Workers プラットフォームガイド
Static Assets on Workers - Cloudflare Workers での静的アセット配信
Pages ドキュメント - Cloudflare Pages ガイド
Environment Variables - 環境変数管理

Redis（Fly app 運用）¶

Fly Redis Blueprint - Fly.io 上で Redis app を運用する現在の参考

🏗️ ホスティングプラットフォーム比較表¶

サービス	用途	料金モデル	日本リージョン	自動スケール	DB統合	デプロイ方式
Fly.io	Vendure/API	従量課金	🟢 東京（日本リージョン）	⭕ 自動	⭕ Postgres内蔵	Docker/Git
Cloudflare Workers	Vite/Frontend	従量課金	🟢 東京（エッジ）	⭕ 自動	△ 外部連携	Git Push
Railway	フルスタック	従量課金	🟡 米国中心	⭕ 自動	⭕ 内蔵	Git/Docker
Render	フルスタック	定額+従量	🟡 米国・EU	⭕ 自動	⭕ 内蔵	Git/Docker
AWS	Enterprise	従量課金	🟢 東京	⭕ 高機能	⭕ RDS等	複雑

選定理由（リツビ構成）¶

Fly.io（Vendure）:
コンテナ最適化、PostgreSQL統合
日本リージョン（東京）での低レイテンシ
Cloudflare Workers（Storefront）:
グローバルエッジネットワーク、低レイテンシ
Pages と Workers の統合、D1/R2/KV との連携

📊 外部システム連携¶

SMILE ERP システム¶

SMILE公式サイト - SMILE製品情報
API連携仕様書 - 社内提供資料（要アクセス権限）
データ形式定義書 - 社内提供資料（要アクセス権限）

Google Analytics¶

GA4 開発者ガイド - Google Analytics 4 実装
Enhanced Ecommerce - Eコマース追跡
GTM ガイド - Google Tag Manager

🛡️ セキュリティ¶

SSL・HTTPS¶

Let's Encrypt - SSL証明書の無料取得
SSL Labs Testing - SSL設定の検証ツール

セキュリティベストプラクティス¶

OWASP Top 10 - Webアプリケーションセキュリティ
Node.js Security Checklist - Node.js セキュリティガイド

📈 監視・分析¶

パフォーマンス監視¶

Lighthouse - Webパフォーマンス測定
Core Web Vitals - パフォーマンス指標ガイド

エラー追跡¶

Sentry - エラー追跡・監視
LogRocket - フロントエンド監視

🎨 デザイン・UI/UX¶

デザインシステム¶

Material Design - Google Material Design
Design System Checklist - デザインシステム構築ガイド

アクセシビリティ¶

WCAG 2.1 ガイドライン - Webアクセシビリティガイドライン
A11y Project - アクセシビリティ実装ガイド

🛠️ 開発ツール¶

TypeScript¶

公式ハンドブック - TypeScript言語仕様
TSConfig Reference - 設定ファイルリファレンス

テスト¶

Vitest - 高速なViteネイティブテストランナー
Testing Library - React コンポーネントテスト
Playwright - E2Eテスト自動化（Storefront）

コード品質¶

oxlint - Rust製高速リンター（JavaScript/TypeScript）
oxfmt - Rust製高速フォーマッター（JavaScript/TypeScript/Markdown/YAML）

📚 学習リソース¶

TypeScript・React¶

React TypeScript Cheatsheet - React + TypeScript 実用ガイド
TypeScript Deep Dive - TypeScript 詳解

GraphQL¶

GraphQL 公式ラーニング - GraphQL基礎学習
TanStack Query - React用データフェッチ・状態管理（Storefront のクエリ/ミューテーション標準）

🌐 ブラウザ・互換性¶

ブラウザサポート¶

Can I Use - ブラウザ機能サポート状況
MDN Web Docs - Web標準リファレンス

📋 プロジェクト管理¶

ドキュメント作成¶

MkDocs - 静的ドキュメントサイト生成
Material for MkDocs - MkDocsテーマ

バージョン管理¶

Git 公式ドキュメント - Git使用方法
Conventional Commits - コミットメッセージ規約

🎯 B2B EC 業界情報¶

業界レポート・調査¶

経済産業省 EC市場調査 - 日本のEC市場動向
矢野経済研究所 - BtoB EC市場調査レポート

法規制・コンプライアンス¶

個人情報保護委員会 - 個人情報保護法ガイドライン
特定商取引法ガイド - ECサイト運営時の法的要件

🔧 デバッグ・トラブルシューティング¶

デバッグツール¶

Chrome DevTools - ブラウザ開発者ツール
React Developer Tools - React専用デバッグツール

ログ・監視¶

Winston - Node.jsログライブラリ
Pino - 高速JSONロガー

📞 サポート・コミュニティ¶

技術コミュニティ¶

Vendure Discord - Vendure開発者コミュニティ
Vite Discussions - Vite 公式ディスカッション

Stack Overflow¶

Vendure タグ - Vendure関連質問
Vite タグ - Vite 関連質問

📝 更新履歴¶

日付	更新者	更新内容
2024/12/24	システム	初版作成・基本的なリンク集を整備

🔄 メンテナンスルール¶

リンク有効性: 月1回、全リンクの有効性を確認
情報更新: 各技術の新バージョンリリース時に対応ドキュメントを更新
追加ルール: 新しい技術・サービス導入時は必ず本ドキュメントにリンクを追加
整理: 不要になったリンクは削除し、アーカイブセクションに移動

🎯 技術選定クイックリファレンス¶

🏆 採用技術一覧¶

分野	採用技術	代替候補	選定理由
Backend	Vendure	Saleor, Medusa	B2B特化機能、TypeScript、プラグイン拡張性
Frontend	Vite + TanStack Router	Nuxt.js, SvelteKit	React生態系、軽量な SPA/Worker 構成、段階的な route 分割
Database	PostgreSQL	MySQL, MongoDB	リレーショナル、JSON対応、Vendure標準
Cache	Redis (Fly app)	Memcached, DynamoDB	高性能、永続化、専用 Redis app 運用
Hosting (BE)	Fly.io	Railway, Render	Docker最適、DB統合、アジア地域
Hosting (FE)	Cloudflare Workers	Netlify, Vercel	グローバルエッジ、D1/R2/KV連携、自動最適化
Payment	SB Payment	GMO PG, Stripe	B2B特化、日本語、請求書払い
Monitoring	Fly.io + Cloudflare	DataDog, New Relic	統合監視、コスト効率、簡単セットアップ

📚 必須学習リソース優先度¶

優先度	技術分野	必須リソース	学習目安
🔴 最高	Vendure	公式ドキュメント	2-3週間
🔴 最高	Vite / TanStack Router	Vite Guide / TanStack Router	1-2週間
🟠 高	GraphQL	公式ラーニング	1週間
🟠 高	TypeScript	公式ハンドブック	2週間
🟡 中	PostgreSQL	公式チュートリアル	3-5日
🟡 中	Redis	公式ドキュメント	2-3日

💡 新しい参考資料の追加: プロジェクトで新しいサービスやツールを使用する場合は、必ずこのドキュメントに追加してチーム全体で共有してください。