技術情報

技術スタック一覧

「私事ブログ変換」は以下の技術・サービスを組み合わせて構築されています。

Frontend フロントエンド

React 19 + Vite

UIの構築にReact 19を使用。ビルドツールにはViteを採用し、高速な開発・ビルド環境を実現しています。

Backend バックエンド

Vercel Serverless Functions

APIは api/ ディレクトリ配下にVercel Serverless Functionsとして実装しています。サーバーの管理不要で、リクエストに応じて自動でスケールします。

AI AI

Claude Sonnet 4 / Claude Haiku 4.5

ブログ文章の変換にはAnthropic社のClaude Sonnet 4（claude-sonnet-4-20250514）を使用。ハッシュタグの自動生成など軽量な処理にはClaude Haiku 4.5を使い分けることでレスポンス速度とコストを最適化しています。

Auth 認証

Clerk

ユーザー認証にはClerkを採用（@clerk/clerk-react + @clerk/backend）。ソーシャルログインやメール認証をシンプルに実装できます。

Email メール

Resend

お問い合わせフォームの送信処理にResendを使用しています。

KV Store KV / セッションストア

Upstash Redis

ゲスト変換のカウント管理・変換履歴の保存・リワードトークンの管理にUpstash Redisを使用しています。サーバーレス環境と相性のよいHTTP APIで手軽にKVストアを利用できます。

Analytics 解析

Vercel Analytics

アクセス解析にVercel Analyticsを使用しています。プライバシーに配慮した軽量な計測が特徴です。

PWA PWA対応

vite-plugin-pwa + Workbox

PWA（Progressive Web App）対応により、スマートフォンのホーム画面への追加やオフラインキャッシュが利用可能です。

Deploy デプロイ

Vercel

フロントエンドとバックエンドをVercelにまとめてデプロイしています。GitHubと連携し、mainブランチへのプッシュで自動デプロイされます。

開発について：このアプリはAIとの対話を通じて開発されました。技術選定から実装まで、Claudeのアドバイスを受けながら構築しています。詳しくは開発秘話をご覧ください。