はじめに
この記事では、私が個人開発した「Digital Time Capsule」というWebアプリケーションについて紹介します。このアプリケーションは、ユーザーが将来の自分にメッセージを残すことができるサービスです。
転職に失敗して時間が有り余っていたので、勉強を兼ねて作ってみました。なのでこれはポートフォリオ用にモダンな技術を使ってWebアプリを作りたかっただけのプロジェクトです。転職できたらサ終すると思います。無料プランでずっと動かしていたら申し訳ないので。
使用技術と選定基準
フロントエンドフレームワーク: Next.js 14 (App Router)
Next.js 14のApp Routerを使用しました。モダンなフレームワークで、特にコード分割やサーバーサイドレンダリング（SSR）が簡単に実装できることが魅力でした。
認証: NextAuth
認証にはNextAuthを選びました。NextAuthは複数の認証プロバイダー(GoogleとかGithubとかとか)を簡単に統合できる
データベース: Supabase
データベースにはSupabaseを使用しました。無料プランがあるため、開発初期の段階でコストを抑えつつ、PostgreSQLベースのデータベースを利用できる点が良いと思いました。ただし、Supabaseの無料プランは1週間しか持たないため、長期的な運用には不向きです。
ORM: Prisma
Prismaは、データベースとのやり取りを簡単にし、型安全なクエリを実現するために選びました。モダンな開発環境において、データベース操作をより直感的に行える点が大きな魅力です。
ホスティング: Vercel
ホスティングにはVercelを採用しました。VercelはNext.jsの開発元であり、無料プランでもシームレスなデプロイメントを提供してくれます。しかし、Vercelのクーロンジョブ（VercelJob）は無料プランだと1日1回しか動かせない制約があり、これに気づかず設定していた際に、デプロイエラーに悩まされました。また、vercel.jsonで1日に2回以上のCron設定を行ったために、Vercelのデプロイエラーの前にGitHubのCDで止まることがあり、かなり時間を無駄にしました。😢
UI: chadcn/ui & TailwindCSS
UIにはchadcn/uiを使用し、スタイリングにはTailwindCSSを採用しました。これらの技術はモダンであり、無料で利用できることから選定しました。シンプルでレスポンシブなデザインを効率的に作成できるため、開発速度が向上しました。
AI: Claude 3.5(Artifacts) ChatGPT-4o
フロントのデザイン周りはClaudeくんで作成しました。
バグ修正や分からないことはCursorエディタにChatGPT-4oのAPIを5ドル分買って余ってたので使いました。
おわりに
「Digital Time Capsule」Webアプリケーションの開発は、最新のモダンな技術を組み合わせで、いい勉強になりました。これらの技術選定は、無料プランがあることを基準に行いましたが、SupabaseやVercelの制約により、長期的な運用においては課題が残ることが分かりました。特に、VercelのクーロンジョブやSupabaseの無料期間については、今後のプロジェクトでの注意点として記憶に残りそうです。
質問やフィードバックがありましたら、ぜひコメントでお知らせください！
あと雇っていただける方いませんか。。。🙇
スキルシートです。。
https://taterunakayama.github.io/skill-sheet/
https://github.com/TateruNakayama
https://x.com/nakayamaaa011