はじめに
はじめまして、とむです。Qiita初投稿になります！
現在、**「過去に英語学習で挫折した経験を持つ社会人」**をメインターゲットにした英語学習アプリ『（仮）Re-Learn English』を個人開発しています。
この記事は、その開発の進捗と、実装でハマった点の備忘録を兼ねた記録の第1回目です。これから個人開発を始めたいと思っている方や、同じような技術スタック（Next.js, Supabase）を使っている方の参考になれば嬉しいです。
なぜこのアプリを作ろうと思ったか
多くの人が英語の必要性を感じつつも、学習の継続に難しさを感じています。従来の学習方法では「楽しさ」や「成長実感」が得られにくく、途中で挫折してしまうケースが少なくありません。
何を隠そう、私自身もその一人でした。
そこで、「楽しさ」「成長実感」「個別最適化された学習体験」を提供することで、かつての自分のようなユーザーが今度こそ学習を習慣化できるアプリを作りたい、と考えたのが開発のきっかけです。
アプリの概要と技術スタック
今回開発しているアプリ『（仮）Re-Learn English』の概要です。
項目 内容
- アプリ名 （仮）Re-Learn English
- コンセプト 英語学習の挫折経験者が、楽しく学習を習慣化できるアプリ
- ターゲット 英語学習を何度か挑戦したもののその分挫折し、基礎からやり直したい20〜40代社会人
- 主な機能（MVP） ・AIによる学習パス設定
・4技能（R/L/W/S）のコア学習機能
・〇uolingo風のゲーミフィケーション - 技術スタック ・フロント/バックエンド: Next.js (TypeScript)
・DB/認証: Supabase
・AI: Google AI (Gemini API)
簡単な実装プロセス
今回はMVP（Minimum Viable Product）の最初のステップとして、以下の機能を実装しました。
環境構築: Next.jsプロジェクトを作成し、Tailwind CSSを導入。
データベース設計: Supabaseでユーザー情報 (profiles) やクエスト (quests) のテーブルを設計。
認証機能の実装: Supabase Authを利用して、メール・パスワードでのサインアップ/ログイン/ログアウト機能を実装。
簡単な学習機能: ログイン後に表示されるクエスト一覧と、簡単な問題表示画面を実装。
はまった点と解決策
初めて使う技術も多く、たくさんのエラーに遭遇しました。特に印象的だったハマりポイントをいくつか紹介します。（エラー画面のスクリーンショットを貼ると、より分かりやすくなります！）
問題: import Hoge from '@/components/Hoge' のようなパスが Module not found エラーになる。
原因: create-next-app で生成された tsconfig.json の paths 設定が、src ディレクトリを使う前提の ["./src/"] になっていました。私のプロジェクトは src を使わない構成だったため、パスの解決に失敗していました。
解決策: tsconfig.json の paths を ["./"] に修正。@/ がプロジェクトルートを指すように正しく設定し直しました。
問題: ユーザー登録は成功するのに、プロフィール情報（ニックネーム等）を保存する profiles テーブルにデータが自動で作成されない。
原因: 当初、アプリ側で「①ユーザー登録」→「②プロフィール作成」を別々に実行していましたが、タイミングの問題でエラーが頻発。そこで、DBのトリガー機能（ユーザーが登録されたら、自動でプロフィールも作成するおまじない）をSQLで設定しました。しかし、それでもプロフィールが作成されませんでした。
解決策: ユーザー登録時に supabase.auth.signUp の options.data にニックネームを渡していましたが、このデータはトリガー関数側で new.raw_user_meta_data->>'nickname' として受け取る必要がありました。この記述方法に気づくまで時間がかかりました...！
問題: 新規登録はできるのに、そのアカウントでログインしようとすると「メールアドレスが確認されていません」とエラーになる。
原因: Supabaseのデフォルト設定では、ユーザーがメール内の確認リンクをクリックするまで本登録されず、ログインもできない仕様になっていました。
解決策: 開発中は毎回メールを確認するのが手間なので、Supabaseのダッシュボードで Authentication > Emails > Confirm email の設定を一時的にオフにしました。これにより、登録後すぐにログインできるようになり、開発効率が大幅に向上しました。
今後の展望
ユーザー認証という土台ができたので、ここからアプリのコア機能である学習体験の部分を実装していきます。
直近のタスク：AIによる英作文添削機能の実装
要件定義書の要である「AIによる個別最適化」の第一歩として、Googleの Gemini API を使った英作文の添削機能を実装します。
まずは Google AI Studio でプロンプトの調整や挙動のテストを行い、プロトタイプを固める予定です。
開発の進め方
コード生成やリファクタリングには Claude のようなAIアシスタントも積極的に活用し、開発スピードを上げていきたいと考えています。
リリース
MVPが完成したら、Vercel を使ってデプロイし、友人などに実際に使ってもらってフィードバックをもらう予定です。
終わりに
最後までお読みいただき、ありがとうございました。
初めてのQiita投稿で拙い部分も多かったかと思いますが、個人開発のリアルな雰囲気が少しでも伝われば幸いです。
今後は、この記事で触れたAI添削機能の実装など、さらに面白いパートに入っていきます。開発の進捗は、またQiitaで発信していく予定です。
「この機能面白そう！」「こういうUIはどう？」といったご意見や、技術的なアドバイスなど、どんなフィードバックでも大歓迎です。コメントいただけると、開発の大きな励みになります！
それでは、また次回の記事でお会いしましょう！