アウトプットの質を向上させるための問題集作成プラットフォーム「Memoredge」を個人開発で作成しました。
どんなサービス？
ユーザーが自分専用の問題集(問題とそれに対する解答)を作成し、カードをタッチすることで解答を確認しながら、繰り返し学習を行うことができるサービスです。
開発したきっかけ
私はEdTech企業のインターンシップに1年半従事する中で、学習において「インプットを支援するサービスは参考書や動画など多く存在する一方で、アウトプットを効果的に行う仕組みはテスト以外にあまりない」と感じました。そこで、アウトプットの質を向上させるための仕組みを作りたいと考え、Memoredgeの開発を始めました。このサービスでは、ユーザーが自分専用の問題集を作成し、カードをタッチすることで解答を確認しながら、繰り返し学習を行うことができます。これにより、知識の定着を促し、学習や復習の補助、知識の整理、試験対策などに役立つことを目的としています。
製作期間
色々回り道をし挫折もありこのサービスを作ることになったのですが、それも含めると約1カ月半程度になります。
開発において大切にしたこと
個人開発において最も重要なのは、運用コストの最適化だと考えています。運用コストを極力抑えることで、資金難によるサービスの停止を防ぎ、継続的に提供できる仕組みを作ることを重視しました。また、広告を導入するとユーザー体験が損なわれる可能性があるため、無料で親しみやすく、使いやすいサービスを実現することを開発の軸に据えました。また、背伸びをしないということも意識しました。新しい技術を学んだり使ったりするのは好きですが今回はサービスとしてユーザーに使ってもらうことが目標だったため開発段階で挫折したくなかったからです。
技術選定
1. フロントエンド（Next.js, React, TypeScript）
Next.jsを採用した理由は、SSG（静的サイト生成）やISR（増分静的再生成）によってパフォーマンスを向上できるためです。ページの読み込みが速く、サーバー負荷を抑えられるので、無料のVercel環境で快適に運用できると思いました。Reactを使用することで、コンポーネント単位での開発が可能になり、メンテナンス性が向上し、将来的に機能追加がしやすく、継続的に改善できる点も良いと思いました。
2. バックエンド（Next.js API Routes）
Next.jsのAPI Routesを採用することで、APIリクエストに関するログを中央集権的に管理でき、開発がシンプルになります。また、別途バックエンドサーバーを立てる必要がなく、Vercel上でAPIを動作させることで、無料枠内で運用が可能です。他のフルスタックフレームワーク（例：Express）を使用すると、別途ホスティングが必要になり、運用コストが増加しますが、Next.jsのAPI Routesならその必要がないため、これを選びました。
3. 認証（NextAuth.jsを使用したGoogle認証）
Google認証を採用した理由は、ユーザーが簡単にログインでき、パスワード管理の負担がないためです。サービスの新規会員登録時にメールアドレスとパスワードを設定するのはユーザー側からするとめんどくさいとなり離脱されたら困るので、Googleのアカウントならユーザーは持っているだろうと想定しGoogle認証にしました。NextAuth.jsを選んだ理由は、Google OAuthを簡単に実装でき、独自の認証システムを構築する手間を省けるためです。また、認証情報の管理が自動化されるため、セキュリティのリスクを抑えつつ無料で運用できます。
4. データベース管理（Prisma + PostgreSQL / Supabase）
Prismaを採用した理由は、内部でSQLを最適化するので、効率的なクエリが自動的に生成され、スムーズにデータ操作が行えるからです。開発効率が上がり、リソースの少ない個人開発に向いています。
Supabase（PostgreSQL）を採用した理由は、無料枠があり、PostgreSQLの標準機能を活用でき、Prismaとの相性も抜群だからです。Firebase Firestoreも候補になり得ましたが、リレーショナルデータの管理には不向きなため、質問と解答の関連を整理しやすいPostgreSQLが最適だと考えました。
5. デプロイ（Vercel）
Vercelを選んだ理由は、Next.jsの公式ホスティングプラットフォームであり、無料プランでも十分なパフォーマンスを発揮できるためです。CI/CDが組み込まれており、GitHubと連携してプッシュするだけで自動デプロイが可能です。他の選択肢としてNetlifyやHerokuもありますが、Next.jsを使うならVercelが最適だと考えました。
その他の技術
Chakra UI
公式ドキュメントの充実度や継続的なメンテナンスが行われているかを重視しました。また、私自身のUIデザインに関する知見が浅かったため、デフォルトで洗練されたデザインが提供され、直感的に扱えるChakra UIが適していると判断しました。これにより、開発効率を向上させつつ、使いやすく視認性の高いインターフェースの実現を目指しました。
大変だったところ
初めての個人開発だったため、まず何から始めればよいのか分からず、手探りの状態からのスタートとなりました。そこで、技術記事や海外のYouTube動画を参考にしながら、開発を進めていきました。特に苦労したのはAPIの設計・実装です。インターンシップでは業務自動化の一環でAPIを呼び出す経験はありましたが、一からエンドポイントを設計し、実装するのは初めてだったため、試行錯誤を重ねました。また、SQLの文法自体はインターンで学んでいたものの、データベースの設計や運用については知識が浅く、特にクラウド環境へのデプロイ時に課題に直面しました。当初は、データベースもローカルで管理できると考えていましたが、実際にデプロイした際にクラウド上で管理する（Supabaseを利用する）方が適していると気づき、その理解を深めるまでに時間がかかりました。これらの課題を乗り越える中で、自ら情報を収集し、試行錯誤しながら実装する力や、クラウド環境を考慮した設計の重要性を学ぶことができました
フィードバック・問い合わせ
以下のフォームにお問い合わせやご要望などなんでも送ってください！
Discussion