開発
技術スタック
プロジェクトで使用する主要フレームワークとライブラリ一覧
02. 技術スタック
1. 概要
このドキュメントは、本プロジェクトで使用されている主要なフレームワーク、ライブラリ、ツールの一覧とその役割について説明します。技術選定の背景や理由を理解するための参考資料です。
2. 開発環境・ビルドツール
-
デスクトップアプリ・フレームワーク: Tauri V2
- 役割: Next.jsアプリケーションをデスクトップアプリとしてパッケージングし、Rustによる高性能なバックエンド機能を提供します。
-
パッケージマネージャー: Bun (workspaces)
- 役割: Monorepo構成（例:
next-appワークスペース）の依存関係を管理します。 - 注意点: 依存関係のインストールは、基本的にリポジトリのルートディレクトリで
bun installを実行してください。 - 移行: 2026年3月にnpmからBunに移行しました（高速化と効率化のため）。
- 役割: Monorepo構成（例:
-
JavaScript実行環境: Bun / Node.js
- 役割: 開発サーバーの実行、ビルドプロセス、スクリプトの実行など、サーバーサイドのJavaScript環境を提供します。
- Bun: パッケージ管理、開発サーバー起動などローカル開発環境で使用。
- Node.js: Vercelデプロイ環境、Sharp画像処理などNode.js依存の機能で使用。
-
バンドルツール: Turbopack (Next.js内部)
- 役割: Next.js v16以降のデフォルトバンドルツールで、高速な開発サーバーと最適化された本番ビルドを提供します。
- 注意点: PWA対応ライブラリ
@serwist/nextはWebpackに依存しているため、本番ビルド時はnext build --webpackコマンドを使用し、Webpackを強制的に利用しています。
-
リンター: ESLint
- 役割: コードの静的解析を行い、一貫性のあるコーディングスタイルを維持し、潜在的なバグを未然に防ぎます。
- バージョン管理: プロジェクトでは最新のESLintエコシステムを採用しており、
@next/eslint-plugin-next(v16.0.8)、@eslint/js(v9.39.1)、typescript-eslint(v8.49.0) を使用しています。これらのバージョンは定期的に更新され、パフォーマンスと互換性が向上しています。
-
フォーマッター: Prettier
- 役割: ESLintと連携し、コードのフォーマットを自動的に統一します。
3. フロントエンド
| カテゴリ | ライブラリ/フレームワーク | 役割・選定理由 |
|---|---|---|
| PWA対応 | @serwist/next | Next.jsアプリケーションにService Workerを統合し、PWA化（インストール、オフライン対応）を実現するために採用。 |
| メタフレームワーク (App) | Next.js (App Router) v16 | Reactベースの開発を効率化。SSR, SSG, CSRを柔軟に組み合わせられるApp Routerモデルを採用し、パフォーマンスとDXを両立。重要: v15以降、cookies(), headers(), params, searchParamsなどのAPIが非同期化されました。Server Componentでこれらを使用する際は必ずawaitが必要です。 |
| メタフレームワーク (Web) | Astro | 静的コンテンツ（LP、ブログ、ドキュメント）の配信に特化したフレームワーク。アイランドアーキテクチャにより、極限までJavaScriptを排除した高速なページ配信を実現。 |
| UIライブラリ | React | コンポーネントベースのUI構築のためのコアライブラリ。 |
| 状態管理 | Jotai | Atomicアプローチによるシンプルなグローバル状態管理。不要な再レンダリングを抑制し、パフォーマンスを向上させるために採用。 |
| データ永続化 | Dexie.js | IndexedDBを容易に扱うためのラッパーライブラリ。クライアントサイドでの複雑なデータ構造の永続化を実現。 |
| dexie-export-import | Dexie.jsの公式アドオン。IndexedDBデータベース全体のバックアップと復元機能を提供。 | |
| データ圧縮 | CompressionStream API | ブラウザ標準のストリーミング圧縮API。データベースのエクスポートファイルをGzip形式で圧縮し、ファイルサイズを70-90%削減。外部ライブラリ不要で、モダンブラウザでネイティブサポート。 |
| E2E暗号化 | Web Crypto API | ブラウザ標準の暗号化API。クラウド同期機能でAES-256-GCM暗号化とPBKDF2鍵導出を実装。Zero-Knowledge アーキテクチャによりサーバー側でデータを復号できない設計を実現。 |
| 認証 | @supabase/ssr | Next.js App Router環境で、サーバーコンポーネント、サーバーアクション、プロキシ（旧ミドルウェア）全体で安全にユーザーセッションを管理するために採用。注: 最新版ではgetAll/setAllメソッドを使用したcookie管理が推奨されています。 |
| 型定義 | @types/wicg-file-system-access | File System Access APIのTypeScript型定義を提供し、安全なファイル保存ダイアログの実装を支援。 |
| UIコンポーネント | shadcn/ui | Radix UIとTailwind CSSをベースにしたコンポーネント集。アクセシビリティが高く、カスタマイズ性に優れている。 |
| スタイリング | Tailwind CSS | ユーティリティファーストのCSSフレームワーク。迅速なUI実装と一貫したデザインシステムの構築を支援。 |
| アイコン | Lucide React | シンプルで一貫性のあるSVGアイコンライブラリ。 |
| フォーム管理 | React Hook Form | パフォーマンスを重視したフォームバリデーションライブラリ。 |
| スキーマ検証 | Zod | TypeScriptファーストのスキーマ宣言・検証ライブラリ。フォームやAPIレスポンスの型安全性を確保。 |
| 重要: パッケージ間の型不整合を避けるため、全ワークスペースで v4.1.12 に統一・固定されています。 | ||
| 国際化対応 | i18next | 多言語対応を実現するためのフレームワーク。 |
| accept-language-parser | MiddlewareでブラウザのAccept-Languageヘッダーを解析し、最適な言語を自動検出するために採用。 | |
| i18next-browser-languagedetector | クライアントサイドでの言語検出。Cookie (NEXT_LOCALE) を優先的に参照するように設定。 | |
| Markdown表示 | Unified, Remark, Rehype | Markdown/HTMLの解析と変換のための強力なエコシステム。ストリーミング応答時の高頻度な再レンダリングに起因するDOMエラーを解消し、安定性を確保するためにreact-markdownから移行。 |
| レスポンシブ対応 | use-mobile.tsx (Custom Hook) | window.matchMediaを利用してモバイルデバイスかどうかを判定し、UIのレイアウト切り替えを制御。 |
| D&D機能 | dnd-kit | Reactのためのモダンで軽量なドラッグ＆ドロップツールキット。プロットのアウトライナー機能に加え、プロンプトカードの自由な並べ替えUIを実現するために採用。 |
| react-dropzone | HTML5のドラッグ＆ドロップAPIを使用したファイルアップロードエリアを実装するためのライブラリ。公開ウィザードのカバー画像アップロード機能で採用。 | |
| アニメーション | Framer Motion | Reactアプリケーションにプロダクション品質のアニメーションを容易に追加するためのライブラリ。Exploreページのインライン・エクスパンダーUIで使用。 |
| 汎用フック | react-use | センサー、UI、アニメーションなど、多岐にわたる便利なカスタムフックを提供するライブラリ。Exploreページで画面幅を取得するuseWindowSizeフックを利用。 |
| 画像ライトボックス | yet-another-react-lightbox | モダンでアクセシブルなReact用Lightboxコンポーネント。カバー画像の拡大表示機能を実装するために採用。シンプルなAPIと豊富なカスタマイズオプションを提供。 |
| 差分計算 | diff | プレビュー画面における新旧原稿の差分表示（文字単位）を実現するために採用。 AIのリライト結果を視覚的に確認できるよう支援。 |
4. バックエンド
4.1. BFF & AI連携
| カテゴリ | ライブラリ/フレームワーク | 役割・選定理由 |
|---|---|---|
| BFF | Hono | 軽量・高速なWeb標準ベースのフレームワーク。Next.js API Routesへの統合により採用。AI連携や各種ライブラリとの互換性を確保するため、ランタイムは**Node.js (Serverless Functions)**を使用。 |
| BFF Adapter | Next.js API Routes | HonoアプリケーションをNext.js環境で動作させるためのエントリポイントとして使用。 |
| AI連携 | LangChain.js | 複数のLLMプロバイダーを抽象化し、統一的なインターフェースでAI機能を実装。プロンプト管理や出力の整形を効率化。 |
| BFFバリデーション | @hono/zod-validator | Hono APIのリクエスト/レスポンスをZodスキーマで検証するために採用。型安全なコントローラーの実装を実現。 |
| AIエージェント | LangGraph.js | 状態管理と循環ロジックを持つ自律型エージェントを構築するためのライブラリ。ブラウザ上で実行され、複雑なタスクの計画・実行・評価ループを実現。 |
| ベクトル検索 | Orama | ブラウザ上で動作する全文検索・ベクトル検索エンジン。チャットの長期記憶（Long-Term Memory）の基盤として採用。IndexedDBへの永続化と高速なハイブリッド検索を提供。 |
| 埋め込み生成 | Transformers.js | ブラウザ内で機械学習モデルを実行するためのライブラリ。WebGPUを活用し、サーバーを介さずにテキストのベクトル化（Embedding）を行うために採用。 |
| 画像処理 | sharp | 高性能なNode.js画像処理ライブラリ。OGP画像生成APIでWebP形式の画像をPNGに変換するために採用。リサイズ、フォーマット変換などの豊富な機能を提供し、メモリ効率が良い。 |
| HTMLパース | cheerio | サーバーサイドでのHTMLパース用ライブラリ。URLオープンツールで取得したコンテンツの加工に使用。Node.js環境での動作を前提とする。 |
| Markdown変換 | turndown | HTMLからMarkdownへの変換ライブラリ。AIが読みやすい形式に変換するために採用。DOMを必要とするライブラリの制約から、API全体のランタイムをNode.js化する要因となった。 |
| + | 決済基盤 | Stripe |
4.2. データベース & 認証
| カテゴリ | サービス/ライブラリ | 役割・選定理由 |
|---|---|---|
| BaaS | Supabase | 認証、データベース（PostgreSQL）、ストレージなどのバックエンド機能を提供。特にAuth機能は、オプションの会員機能の基盤として採用。 |
| データベース | PostgreSQL | Supabaseのバックエンドとして動作。ユーザープロフィール情報(profilesテーブル)を格納。 |
| DB管理 | Supabase CLI | ローカル開発環境とリモートのSupabaseプロジェクトを連携させ、マイグレーション管理を行う。 |
5. テスト
| カテゴリ | ツール | 役割 |
|---|---|---|
| E2Eテスト | Playwright | ブラウザを自動操作し、エンドツーエンドのユーザー操作をシミュレートするテストを実行。 |
| 単体/結合テスト | Vitest | Viteベースの高速なテストランナー。 |
6. インフラ・デプロイメント
| カテゴリ | サービス | 役割・選定理由 |
|---|---|---|
| ホスティング | Vercel | Next.js と Astro の両プロジェクトをホスト。モノレポ内の異なるルートディレクトリを個別のプロジェクトとしてデプロイ可能。 |
| ドメイン管理 | Vercel Domains | blueperiod.blue 独自ドメインの管理。ネイキッドドメイン（wwwなし）をメインとし、サブドメイン（blue.）への柔軟な振分を実現。 |
| CI/CD | Vercel CLI | 自動デプロイは現在停止。開発者による vercel --prod コマンドを用いたマニュアルデプロイを運用。 |
7. デスクトップ (Tauri)
| カテゴリ | ライブラリ/フレームワーク | 役割・選定理由 |
|---|---|---|
| コアフレームワーク | Tauri V2 | Rust製の軽量・セキュア・高性能なデスクトップフレームワーク。WebViewを活用し、Web技術をそのままデスクトップに持ち込むために採用。 |
| バックエンド言語 | Rust | メモリ安全かつ高速なシステムプログラミング言語。Tauriのコアロジックや、CORS制限のない通信、ファイルシステム操作を担う。 |
| HTTPクライアント | reqwest | Rust用のエルゴノミックなHTTPクライアント。ローカルLLMへのCORSフリーな通信を実現するためにRust側で採用。 |
| シリアライズ | serde / serde_json | Rustデータのシリアライズ・デシリアライズ。IPCコマンドの引数やレスポンスの処理に使用。 |
| プロセス管理 | std::process::Command | Node.js (Honoサイドカー) の起動・管理に使用。 |
| シェル連携 | @tauri-apps/plugin-shell | 外部プログラムの実行、デフォルトブラウザでURLを開くなどのシェル操作を実現。 |
| ファイルシステム | @tauri-apps/plugin-fs | ユーザーの許可を得た範囲でのファイル読み書き、ディレクトリ操作を実現。 |
| ダイアログ | @tauri-apps/plugin-dialog | ネイティブのファイル保存・選択ダイアログを表示。 |
| 通知 | @tauri-apps/plugin-notification | OS標準の通知システムを使用してユーザーにフィードバックを提供。 |
| アップデート | @tauri-apps/plugin-updater | アプリケーションの自動更新機能を統合。 |
関連ドキュメント:
01_architecture.md