30 days AI challenge 21 日目 – day 21

本記事は 2026/02/01 ~ 2026/03/02 の間毎日 AI アプリケーション開発（AI を搭載したアプリ開発 or AI を使用した開発）をテーマに 30 days AI challenge を行う 21 日目のブログポストです。

今日は AI 言語学習アプリを作りました。

英語（言語）学習アプリは巷にあふれかえっておりますが、今日のアプリは、私の思った “あったらいいな” を詰め込んだ AI 言語学習アプリです。

アプリ概要
技術要素
終わりに

アプリ概要

メイン機能は、登録したトピックに関して AI と指定した言語で会話ができる機能です。ただ、それだけでは面白くないので、AI の会話の中の単語や文章を選択し、その意味の表示とデータベースへの登録ができるようにしました。

このように、知りたい箇所を選択してハイライトすることで、その意味を調べることができます。

データベースに登録することができ、登録した語彙は次の AI の会話で登場するように設定が可能です。このように反復学習を行えるようなアプリとなります。

おまけ機能として、登録した語彙に関するクイズも AI が作ってくれます。

AI 会話の時 “登録済み語彙を復習に使う” ボタンを選択することで、データベースに登録された語彙を AI が積極的に使うようになり、その箇所をハイライト表示してくれます。

AI との会話でその言語を学んでいくので、ユーザーは AI への返信をチャット欄に入力し会話を続けられます。

技術要素

いつも通り、AI との会話や単語検索、クイズ生成等はバックエンドで Gemini にプロンプトを投げているだけです。

AI の会話から任意の語彙を選択し、意味の検索/登録を行う仕組みは以下の通りの構成です。

レイヤー	技術	役割
フロント	window.getSelection() (JS)	ドラッグ範囲のテキスト取得
連携	DotNetObjectReference + [JSInvokable]	JavaScript → Blazor コールバック
DB	Microsoft.Data.SqlClient (ADO.NET)	登録チェック・保存
AI	GeminiService.GetChatResponseAsync	意味・種類・例文の生成
解析	JsonSerializer.Deserialize	AI の JSON レスポース解析

JavaScript を使用してユーザーがハイライトした箇所を取得します。

container.addEventListener('mouseup', function (e) {
    const sel = window.getSelection();
    const text = sel ? sel.toString().trim() : '';
    if (text.length > 0) {
        const range = sel.getRangeAt(0);
        const rect = range.getBoundingClientRect();
        dotNetRef.invokeMethodAsync('OnTextSelected', text, x, y);
    }
});

Blazor から以下のように JavaScript を呼び出し、選択範囲を取り出します。

[JSInvokable]
public void OnTextSelected(string text, double x, double y)
{
    _selectedText = text;
    _showSelectionButton = true;
    InvokeAsync(StateHasChanged);
}

あとはその結果をもとに AI にプロンプトを投げるだけです（この間に DB へのクエリ実行を行い、その単語が既に登録されていないかを判定します）。

var prompt = $@"Analyze the following {targetLanguage} text and provide:
1. Determine if it is a ""Word"", ""Idiom"", or ""Sentence""
2. Provide the Japanese meaning/translation
3. Provide an example sentence using it
Text: ""{text}""
Respond ONLY in this exact JSON format:
{{ ""type"": ""Word"", ""meaning"": ""日本語の意味"", ""exampleSentence"": ""..."" }}";

var response = await _geminiService.GetChatResponseAsync(prompt, history);
var json = ExtractJson(response);
var result = JsonSerializer.Deserialize<LookupResult>(json, options);

終わりに

仕事柄英語でのコミュニケーションをすることが多いですが、知らない単語やイディオムなどがまだまだ多く、自分に適した英語学習アプリやサービスが無いかなと思っていました。

特に、知らない単語や言い回しが出てきたときに、いつもその箇所をコピペして検索エンジンや AI から返された結果をみて、必要に応じてメモ帳や OneNote にメモを残す、といったような勉強をしていました。このコピペ作業が面倒だったので、今回のアプリはその点を解消するようなソリューションとなっています。

このアプリに音声認識や音声読み取り機能をつければ会話学習にも使えますね（”英”会話とあえて言わなかったのは簡単に別言語の学習に切りかられるから）。

ただ、1 点改善点として、AI からのレスポンスに時間がかかるので会話のやり取りや単語検索の際にどうしても待ち時間が生じてしまいます、UX 観点ではここを改善できるとよいと思いました（これは使用している AI の性能や契約プランにもよると思います）。

最後まで閲覧いただきありがとうございました。明日もお願いします！