【個人開発】ITエンジニアが次に読むべき技術書を推薦するアプリケーションを作ってみた

はじめに

個人開発として、NextDevReadというWebアプリケーションを開発し、公開したので、どんな技術を使って、どんな構成で、どんなふうに開発進めてきたのか紹介していきたいと思います。

NextDevReadとは

NextDevReadは、ITエンジニアが次に読むべき技術書を推薦するWebアプリケーションです。ユーザーの読書履歴と興味のある技術分野や現在のスキルをもとに、AIが次に読むべき技術書を推薦してくれます。

NextDevRead - 次に読むべき技術書を提案

ITエンジニア向けに「次に読むべき技術書」を提案するサービス。AI推薦により、あなたのスキルレベルと興味に合った技術書を見つけましょう。

自分自身がよく技術書を読んでいるのですが、次にどんな技術書を読もうか迷うことが多かったので、自分自身をターゲットにしました。本屋で本を探す時間も楽しい一方で、今まで読んできた本や自分のスキルをもとに、AIが推薦してくれると、新しい本との出会いが増えるのではないかと思い、開発を始めました。

使用した技術とアーキテクチャ

使用した技術は下記のとおりです。

• Typescript: フロントエンドの実装言語
  • React: フロントエンドのライブラリ
  • React Router: ルーティングライブラリ
• Tailwind CSS: CSSフレームワーク
• Go: バックエンドの実装言語
  • Gin: バックエンドのフレームワーク
• Supabase: データベース、認証、ストレージ
• Cloudflare: DNS + CDN
  • Cloudflare Pages: フロントエンドのホスティング
• Render: バックエンドのホスティング
• Github Actions: CI/CD
• Docker: コンテナ
  • Docker Compose: ローカル開発環境
• Gemini API: AI推薦エンジン
• Google Books API: 書籍情報取得
• Resend: メール配信
• Github Copilot: 実装サポート

アーキテクチャは下記の通りです。

フロントエンドは、他のプロジェクトでも使ったことのあるTypescript、React、Tailwind CSSと初めて使うReact Routerで実装しました。バックエンドはGoを使ってみたかったので、GoとGinで実装しています。

インフラは、AWSやGoogle Cloudでデータベースを構築するとコストがかかるため、今回はPaaS系のサービスを使うことにしました。フロントエンドはCloudflare Pages、バックエンドはRenderでホスティングしています。データベースや認証、ストレージはSupabaseを利用しています。この構成だと、インフラのコストがほとんどかからず、構築できました。

開発の進め方

今回は、アイディア出しから実装まで、ChatGPTもしくはGithub Copilotをフルに活用して開発を進めました。

具体的には、下記の流れで進めました。

1. アイディア出し
2. 要件定義
3. 技術選定
4. 設計（システム構成、画面構成、DB設計、API設計）
5. 実装

生成AIに壁打ちしつつ、内容が固まったら、Markdownにドキュメントとしてまとめてもらって、作成したドキュメントをもとに、次にステップに進むという形で進めました。

個人開発を進める中で、要件やドキュメントをしっかり固めず進めてしまい、途中で方向性がぶれてしまうことが多かったのですが、今回はドキュメントをしっかり固めたことで、スムーズに開発を進めることができました。また、ドキュメントがあることで、生成AIを活用した実装もやりやすかったです。

今後実装したい機能

今後は、

• ネイティブアプリ化
• ユーザー同士の交流機能

などにも挑戦していきたいと考えています。

参考

• React Router Official Documentation
• Gemini API | Google AI for Developers
• Supabase Docs
• Docs + Quickstarts | Render
• Welcome to Cloudflare | Cloudflare Docs