コンテンツにスキップ

参考資料・外部リンク集

概要

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

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

Vendure(バックエンド)

Next.js(フロントエンド)

UI・デザインシステム

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

💳 決済システム

SB Payment

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

PayPal

📊 決済システム比較表

決済サービス 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)

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

🚀 インフラストラクチャ

Fly.io(Vendure ホスティング)

Vercel(Next.js ホスティング)

Upstash(Redis キャッシュ)

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

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

選定理由(リツビ構成)

  1. Fly.io(Vendure):
  2. コンテナ最適化、PostgreSQL統合
  3. 日本リージョン(東京)での低レイテンシ
  4. Vercel(Next.js):
  5. Next.js特化、日本リージョン
  6. エッジファンクション、CDN最適化

📊 外部システム連携

SMILE ERP システム

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

Google Analytics

🛡️ セキュリティ

SSL・HTTPS

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

📈 監視・分析

パフォーマンス監視

エラー追跡

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

🎨 デザイン・UI/UX

デザインシステム

アクセシビリティ

🛠️ 開発ツール

TypeScript

テスト

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

コード品質

  • oxlint - Rust製高速リンター(JavaScript/TypeScript)
  • Prettier - コードフォーマッター

📚 学習リソース

TypeScript・React

GraphQL

🌐 ブラウザ・互換性

ブラウザサポート

📋 プロジェクト管理

ドキュメント作成

バージョン管理

🎯 B2B EC 業界情報

業界レポート・調査

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

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

デバッグツール

ログ・監視

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

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

技術コミュニティ

Stack Overflow

📝 更新履歴

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

🔄 メンテナンスルール

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

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

🏆 採用技術一覧

分野 採用技術 代替候補 選定理由
Backend Vendure Saleor, Medusa B2B特化機能、TypeScript、プラグイン拡張性
Frontend Next.js Nuxt.js, SvelteKit React生態系、Vercel最適化、SSR/SSG
Database PostgreSQL MySQL, MongoDB リレーショナル、JSON対応、Vendure標準
Cache Redis (Upstash) Memcached, DynamoDB 高性能、永続化、サーバーレス対応
Hosting (BE) Fly.io Railway, Render Docker最適、DB統合、アジア地域
Hosting (FE) Vercel Netlify, Cloudflare Next.js特化、日本CDN、自動最適化
Payment SB Payment GMO PG, Stripe B2B特化、日本語、請求書払い
Monitoring Fly.io + Vercel DataDog, New Relic 統合監視、コスト効率、簡単セットアップ

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

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

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