パーソナライズされた英語学習Webアプリの開発

Published:  at 

目次


概要

英語を学ぶ目的やレベル、そして学習に使える時間は、人によって大きく異なります。TOEIC対策をしている学習者と、日常会話を上達させたい学習者では必要な学習内容が異なります。また、英検対策では、さらに異なる形式の学習が必要になります。

そこで私は、ユーザー一人ひとりの目標、英語レベル、興味、そして利用可能な学習時間に合わせて学習体験を変えられる、パーソナライズ型の英語学習Webアプリ「英語ビット」を開発しています。

このプロジェクトの目的は、語彙学習、試験対策、練習問題、学習進捗の確認など、複数の英語学習ツールを一つのプラットフォームにまとめることです。

英語ビットは主に日本人の英語学習者を対象としており、現在はTOEIC、英検、そして総合的な英語力の向上を中心に開発しています。

主な機能

パーソナライズされたオンボーディング

英語ビットでは、学習を始める際にユーザーの目的や学習スタイルを把握するためのオンボーディングを行います。

最初からすべての機能を表示するのではなく、ユーザーに以下のような情報を入力してもらいます。

  • 現在の英語レベル
  • 学習目的
  • TOEICの目標スコア
  • 英検の目標級
  • 1回の学習に使える時間
  • 興味・関心のある分野

これらの情報を、ユーザーごとに学習体験をパーソナライズするための基盤として利用します。

例えば、1日10分しか学習時間がなく、TOEIC対策をしているユーザーと、英語上級者で趣味として1時間英語を学習しているユーザーでは、適した学習体験は大きく異なります。

また、ユーザーの目標が変わった場合でも、後からこれらの設定を変更できるように設計しています。

TOEIC・英検対策

英語ビットの主要な機能の一つが、試験対策のための学習システムです。

TOEICや英検などの試験に対応した問題を、試験のパートや難易度ごとに整理し、体系的に学習できるようにしています。

練習セッションの内容も保存されるため、ユーザーは過去の学習内容を確認し、自分の成績を振り返ることができます。

システムでは、以下のような情報を記録します。

  • 解答した問題
  • 選択した回答
  • 正解・不正解
  • 練習セッションの完了状況
  • 試験の種類と問題タイプ
  • 時系列での学習成績

長文読解などの問題では、複数の問題を一つの長文と関連付けることもできます。これにより、実際の試験に近い構成で問題を提供できるようにしています。

語彙学習

語彙学習も英語ビットの主要な機能の一つです。

ユーザーは自分専用の単語リストを作成し、以下のような情報を保存できます。

  • 単語
  • 意味
  • 例文
  • 自分用のメモ
  • タグ

これにより、単語帳を単独の機能として扱うのではなく、ユーザー全体の学習体験の一部として語彙学習を組み込むことができます。

また、将来的なパーソナライズを考慮した設計になっており、ユーザーの英語レベル、興味、過去の学習結果などに基づいて、学習する単語やアクティビティを自動的に選択できるようにすることを想定しています。

学習進捗の管理

英語ビットでは、ユーザーの学習状況を把握できるよう、学習アクティビティを記録します。

学習履歴から、例えば以下のような情報を確認できます。

  • 完了した練習セッション
  • 正答率
  • 解答した問題数
  • 時間経過による成績の変化
  • 試験やパートごとの成績

ダッシュボードでは、これらの情報を一つの画面にまとめます。

単に大量の問題を並べるのではなく、自分がどのように学習しているのか、どの分野が得意なのか、どこを改善する必要があるのかを把握しやすくすることを目指しています。

技術アーキテクチャ

技術スタック

英語ビットは、TypeScriptを中心としたモダンな技術スタックで開発しています。

  • TypeScript:アプリケーション全体で使用し、型安全性と保守性を向上
  • Astro:Webアプリケーションとサーバーサイドレンダリングを担当
  • Fastify:バックエンドAPIを提供
  • PostgreSQL:ユーザーアカウント、学習データ、練習問題、進捗などを保存
  • Drizzle ORM:型安全なデータベースクエリとスキーマ管理を担当
  • Zod:APIリクエストやユーザー入力のバリデーションに使用
  • Tailwind CSS:アプリケーションのUI構築に使用
  • Node.js:バックエンドサービスを実行

プロジェクトはモノレポ構成になっており、フロントエンド、API、共有データベースパッケージを一つのプロジェクトとして開発できるようにしています。

モノレポ構成

プロジェクトでは、ワークスペースベースのモノレポを採用しています。

簡略化すると、以下のような構成です。

apps/ web/ api/ packages/ db/

Webアプリケーションはユーザーが直接利用する画面を担当し、APIは認証、オンボーディング、語彙、練習セッション、ダッシュボードなどのアプリケーションロジックを担当します。

データベースのスキーマは共有パッケージにまとめています。これにより、APIなどの各サービスから同じ型安全なデータベース定義を利用できます。

また、この構成にしておくことで、将来的にモバイルアプリなどの新しいクライアントを追加する際にも、既存のビジネスロジックを重複して実装する必要がなくなります。

バックエンドとAPI

バックエンドでは、/api/v1 以下にバージョン管理されたREST APIを提供しています。

アプリケーションの各機能は、それぞれ独立したルートモジュールとして分離しています。

  • 認証
  • OAuth
  • オンボーディング
  • 語彙
  • 練習
  • ダッシュボード
  • 学習履歴
  • 設定

例えば、練習機能に関するエンドポイントは以下の配下にまとめています。

/api/v1/practice

このように機能ごとにAPIを分離することで、アプリケーションの規模が大きくなってもコードを管理しやすくしています。

リクエストのバリデーションにはZodを使用し、FastifyによってHTTPサーバーとプラグインアーキテクチャを構築しています。

また、APIにはレートリミットやセキュリティヘッダーなどの本番環境を想定したセキュリティ対策も実装し、一般的なWeb攻撃やAPIの悪用に対するリスクを低減しています。

認証

認証システムは、従来のメールアドレス・パスワード認証とソーシャルログインの両方に対応できるよう設計しています。

メールアドレス・パスワード認証では、以下の機能を実装しています。

  • 安全なパスワードハッシュ化
  • セッションベースの認証
  • パスワードリセット
  • メールアドレス認証
  • セッションの有効期限管理
  • アカウント削除

メールアドレスの認証では、データベースに生の認証トークンを保存するのではなく、ランダムに生成したトークンを使用します。

データベースにはトークンそのものではなく、暗号学的ハッシュを保存し、ユーザーには元のトークンを含む認証リンクをメールで送信します。

パスワードリセットトークンやセッショントークンにも同じ仕組みを採用しています。

これにより、データベースに認証情報そのものを保存することを避けています。

また、Google、Apple、LINEなどのOAuthプロバイダーにも対応できるよう開発を進めており、ユーザーがソーシャルアカウントを英語ビットのアカウントに紐付けられるようにする予定です。

開発における課題

パーソナライズされた学習の設計

開発における大きな課題の一つは、「パーソナライズされた学習」とは具体的に何なのかを設計することです。

ユーザーの好みを聞くだけでは十分ではありません。

入力された情報を、実際にユーザーが見るコンテンツや学習体験の違いにつなげる必要があります。

例えば、ユーザーの以下の情報は、どの学習アクティビティをおすすめするべきか判断するために利用できます。

  • 英語レベル
  • 試験の目標
  • 目標スコア
  • 学習時間
  • 興味・関心
  • 過去の学習結果

そのため、将来的により高度なレコメンドシステムを導入できるよう、これらの情報を構造化された形でデータベースに保存する必要があります。

アプリケーション全体を作り直すことなく、パーソナライズの仕組みを段階的に高度化できるアーキテクチャを目指しています。

認証とアカウントセキュリティ

認証機能の開発では、単純なログインフォームを作る以上に多くの課題がありました。

パスワードリセットやメール認証に使用するリンクは、以下の条件を満たす必要があります。

  • ランダムに生成される
  • 有効期限が短い
  • 安全な形で保存される
  • 一度しか使用できない
  • レートリミットによって保護される

また、認証APIからユーザーの機密情報が漏れないようにする必要もあります。

例えば、パスワードリセットをリクエストした際に、そのメールアドレスが実際に登録されているかどうかをAPIのレスポンスから判断できてはいけません。

このようなセキュリティ上の考慮事項は、単なる開発用プロジェクトから実際のサービスへと移行していくにつれて、ますます重要になります。

データベースのパフォーマンス

学習データの量が増えていくにつれて、データベースのパフォーマンスも重要になります。

英語ビットでは、ユーザー、練習セッション、問題、長文、回答、語彙、学習目標など、多くのデータが相互に関連しています。

そのため、ユーザーIDやセッションIDなど、頻繁に検索されるカラムにはインデックスを追加しています。

学習履歴を取得する際によく使用されるカラムの組み合わせについても、効率的に検索できるようインデックスを設計しています。

例えば、練習セッションにはユーザーIDと完了日時を利用したインデックスを設定し、ユーザーごとの過去の学習セッションを効率的に取得できるようにしています。

PostgreSQLとDrizzleを組み合わせることで、SQLの柔軟性とパフォーマンスを維持しながら、型安全なデータベースアクセスを実現しています。

今後のロードマップ

今後実装したい機能

今後、英語ビットの学習体験をさらに発展させるため、以下のような機能を検討しています。

  • AI学習アシスタント:解説、練習、パーソナライズされた学習提案を行うAIアシスタント
  • 適応型練習:過去の学習結果に応じて問題の難易度を自動的に調整
  • スペースド・リピティション:記憶の定着度に応じて語彙の復習タイミングを調整
  • スピーキング練習:英会話練習や発音フィードバック
  • パーソナライズされたレコメンド:目標、学習結果、利用可能な学習時間に基づいた学習コンテンツの提案
  • モバイルアプリ:スマートフォンなどのモバイル端末への展開
  • 試験対応の拡充:TOEIC・英検のコンテンツ拡充、および将来的な他の英語試験への対応

技術的な改善

ユーザー数やデータ量が増えるにつれて、アプリケーションの基盤についても改善していく必要があります。

今後は以下のような技術的改善を検討しています。

  • より高度なレコメンドアルゴリズム
  • 負荷の高い処理のバックグラウンド実行
  • 頻繁にアクセスされる学習コンテンツのキャッシュ
  • データベースクエリのさらなる最適化
  • 自動テストとインテグレーションテスト
  • モニタリングとオブザーバビリティ
  • より詳細な学習分析
  • AI機能に対応したスケーラブルなインフラ

まとめ

英語ビットは、日本人の英語学習者に対して、よりパーソナライズされた英語学習体験を提供することを目指したプロジェクトです。

すべての学習者を同じように扱うのではなく、まずユーザーの目標、英語レベル、興味、そして利用可能な学習時間を理解することから始めます。

そして、学習データが蓄積されるにつれて、その情報を活用し、ユーザー一人ひとりに合わせた学習体験へと進化させていくことを目指しています。

技術面では、TypeScript、Astro、Fastify、PostgreSQL、Drizzleを利用したフルスタックアプリケーションを構築しながら、認証、メールアドレス認証、APIセキュリティ、データベースパフォーマンス、スケーラブルなアプリケーション設計など、実際のプロダクション環境を想定した課題にも取り組んでいます。

長期的には、これらの基盤に適応型学習やAIを活用した機能を組み合わせ、単なる練習問題の集合ではなく、ユーザー自身に寄り添う「パーソナルな学習システム」のような英語学習プラットフォームを作ることを目指しています。