orimemoの開発スタックとアーキテクチャ

orimemoは、折り紙作品の記録・共有を目的としたWebアプリケーションです。このブログでは、開発にまつわる技術的な知見や、実装の舞台裏をお届けしていきます。

技術スタック

orimemoは以下の技術スタックで構築されています：

フロントエンド

Next.js 15: App Routerを使用した最新のReactフレームワーク
TypeScript: 型安全性を確保し、開発体験を向上
TailwindCSS: ユーティリティファーストのCSSフレームワーク
Radix UI: アクセシブルなUIコンポーネントライブラリ

バックエンド

Supabase: PostgreSQLベースのBaaS（Backend as a Service）
Supabase Auth: 認証・認可機能
Supabase Storage: 画像ファイルの保存・配信
Row Level Security (RLS): データベースレベルでのアクセス制御

インフラ

Cloudflare Pages: 高速なエッジデリバリー
Cloudflare R2: 画像のCDN配信
GitHub Actions: CI/CDパイプライン

なぜこの構成を選んだのか？

1. Next.js App Routerの採用

Next.js 15のApp Routerは、React Server Componentsをフル活用できる最新のアーキテクチャです。

メリット:

サーバーサイドでのデータフェッチが容易
初回ロード時のJavaScriptバンドルサイズを削減
レイアウトの共有とネスティングが柔軟

課題と対処:

クライアントコンポーネントとサーバーコンポーネントの境界を明確に
use clientディレクティブの適切な配置

2. Supabaseによる迅速な開発

Supabaseは、PostgreSQLベースのオープンソースBaaSです。

選定理由:

リアルタイム機能（未来的にコメント機能などで活用予定）
Row Level Securityによる柔軟なアクセス制御
型安全なクライアントライブラリ
開発者体験の良さ（ローカル開発環境、CLIツール）

3. Cloudflare Pagesでのホスティング

選定理由:

グローバルなエッジネットワーク
無料枠が豊富
Next.jsとの統合が良好
R2との連携で画像配信を最適化

アーキテクチャ上の工夫

画像最適化

ユーザーがアップロードした画像は、以下のフローで処理されます：

クライアント側でリサイズ（ブラウザのCanvas API使用）
Supabase Storageにアップロード
Cloudflare R2にミラーリング（将来的なスケール対応）
Next.jsのImageコンポーネントで最適化配信

認証フロー

Supabase Authを使用し、以下の認証方式をサポート：

メールアドレス・パスワード
Google OAuth
マジックリンク（パスワードレス認証）

セッション管理はSupabaseが提供するCookie-basedセッションを使用しています。

データベース設計

正規化とパフォーマンスのバランス: 必要に応じて非正規化を許容
RLSポリシー: 各テーブルに適切なセキュリティポリシーを設定
インデックス戦略: クエリパフォーマンスを考慮したインデックス設計

今後の展望

このブログでは、今後以下のようなトピックを扱っていく予定です：

Next.js App Routerでの実装パターン
Supabaseを使った認証・認可の実装
画像アップロード・リサイズの最適化
パフォーマンスチューニング
テスト戦略
CI/CDパイプラインの構築

技術的な質問や、取り上げてほしいトピックがあれば、ぜひフィードバック機能からお知らせください！

次回は、「Next.js App Routerでの認証実装パターン」についてお届けする予定です。