AIで完全に自分好みの日本語学習アプリを作る方法
こんな悩みはありませんか：使いやすくて手になじむ語学学習ツールが欲しい。ネット上にはアプリがたくさんありますが、どれも何かが足りず、自分の学習習慣に完全にはフィットしません。
私自身の例で言うと、日本語単語を覚えるために、これまでいろいろな単語カード（フラッシュカード）アプリを使ってきました。一般的な流れは、問題を入力して、裏返すと答えが表示されるというものです。ですが日本語を覚えるときは、漢字とひらがなを同時に覚えたいことがよくあります。普通の単語カードアプリだと、たいてい 2 枚に分ける必要がありますが、本来は 1 枚のカードで済むはずで、その 1 枚が 2 通りのテスト方式に対応していればいいのです。
文法でも同じです。文法だけを見て中国語の意味を思い出す、例文の中の文法を穴埋めにして練習する、文法をハイライトして文全体の意味を問う。こうした「自分の学習方法に合わせてカスタマイズしたい」という要望は、市販のソフトでは意外と満たしにくいです。
幸い、今は AI の進化がとても速いです。ChatGPT や Gemini は聞いたことがあるかもしれません。さらに「vibe coding」の文脈では、Codex や Claude Code のようなツールを使うと、対話しながらアプリのプロトタイプを素早く作れます。たとえプログラミングができなくても、要件をきちんと説明すれば、まず動く版を AI に作らせ、対話を繰り返して望む形に近づけていけます。
本記事では、AI ツールを使って「自分の習慣に完全に合う」日本語学習アプリを作る方法を紹介します。自分専用の学習ツールができると、学習もより効率的になりました！例として、私が作った単語カードアプリを取り上げます。普段はこれで単語を覚えたり文法を練習したりしながら、好みの形になるまでずっと調整してきました。
¶ AI ツール
まず、使える AI ツールを簡単に紹介します。多くの人は ChatGPT や Gemini のようなチャット型ツールを使ったことがあると思います。ここで紹介するのは、より「プログラミング」寄りの AI ツールで、Codex や Claude Code などです。これらは AI coding agent（AI コーディングエージェント）とも呼ばれます。
一般的なチャットアシスタントと異なり、AI コーディングエージェントは実際に手を動かしてくれます。たとえばドキュメントの修正、コードの修正、各種コマンドの実行などです。開発者にとっては機能追加やバグ修正、新規システム構築に使えますし、プログラミングをしない人（デザイナー、建築家、語学学習者など）でも、要件を会話のように伝えるだけで AI に開発させられます。これを vibe coding（雰囲気プログラミング）と呼ぶこともあります。自然言語で「こういうプログラムがほしい」と伝え、対話を重ねて調整し、最終的に思い通りのものにしていきます。プロセス全体を通して、あなたが自分の手でコードを書く必要はほとんどなく、コードを読んだり理解したりする必要すらないこともあります。
文章だけだと魔法のように聞こえてイメージしづらいので、これから実際にやってみましょう。
¶ Claude Code
Codex でも Claude Code でも vibe coding はできますが、ここでは Claude Code で説明します。Claude Code は現在 macOS と Windows 向けのデスクトップアプリを提供しており、非開発者にとって使いやすいからです。開発者なら、端末の CLI 版を使っても構いません。
まずは Claude のアカウントを作成し、Pro または Max プランを購読します。その後、Claude のデスクトップアプリのダウンロードページにアクセスし、OS に合ったものをダウンロードします。
アプリをインストールしたら、「Code」画面に入ります（アプリのメイン画面上部で切り替えられます）。中央のテキスト入力欄の左下で、使用するプロジェクトフォルダを選択できます。ここで新しいフォルダを作り、以降の説明のために japanese-app と名付けましょう。次に、たとえば「簡単な日本語学習アプリを作って」のようなプロンプトを入れて、Claude の雰囲気をつかんでみてください。
ただ、もしこれだけで全部うまくいくなら話がうますぎますよね。少し遊んでみて、「アプリを生成して」と頼むと何が起きるか見てみてください。おそらく結果はあまり良くないはずです。そこで次は、想像通りの日本語学習アプリに近づける方法を説明します。
¶ 日本語学習アプリを作る
¶ 計画を立てる
vibe coding 用のツールを入れたら、AI で開発を始められます。このとき、あなたがコードを書けるかどうかが最重要とは限りません。それよりも、頭の中に明確なプロダクトの骨格があるかどうかが重要です。
あなたはむしろプロダクトマネージャーのような立場になります。機能一覧を考え、各画面がだいたいどういう見た目か、ユーザーにどう操作してほしいか、どんな体験をしてほしいかを設計します。ここが明確であるほど、あとが楽になります。
まずはプロダクト仕様書（計画書）を書くことをおすすめします。たとえば、私が作りたかった日本語学習アプリでは、最初に次のようなコア要件を書き出しました。
- 単語アプリは単語を覚えられて、出題方式を 2 つサポートすること：日本語の漢字を見て中国語を答える、日本語のひらがなを見て中国語を答える。
- 文法も練習でき、複数のテスト方式を提供すること：文法だけを見て意味を思い出す、例文の文法を穴埋めにする、例文中の文法をハイライトして意味を問う、など。
- 操作体験は市販の学習アプリに近いこと。
- アプリ自身のデータベースを作成・管理できること。
これが最低限の仕様です。さらに UI や操作感について具体的に書くこともできます。たとえば、ライトテーマかダークテーマか、カードの雰囲気は可愛い寄りかミニマル寄りか。こうした指示が具体的であるほど、AI はあなたの好みに近いものを出しやすくなります。
最初の仕様書はとても重要です。これは建築でいう「地盤・基礎」を作るのに似ています。小さな家を建てる前提で基礎を作ると、高層ビルのための基礎にはなりません。一方、最初に基礎をしっかり作っておけば、あとで増築・拡張するときにスムーズになります。
そのため、最初の機能と要件はできるだけ明確にしておき、大規模な作り直しを避けるのがおすすめです。もちろん途中で変えること自体は可能ですが、効率が落ちやすく、アーキテクチャも混乱してバグが増えやすくなります。
例として、私がこのアプリを作ったときの仕様書は次のようなものでした。私は原文を英語で書きましたが、ここでは理解しやすいように日本語訳を載せます。AI を使うときは中国語でも英語でも構いませんが、一般的には英語の方が精度が出やすいです。AI の学習データは英語が多いからです。
日本語学習用のフラッシュカード（Flashcard）アプリを作りたいです。Quizlet のようなアプリをイメージしています。
まず開発計画を plan.md として書いてください。
また、抜け漏れがないかを確認し、追加で明確化すべき質問も挙げてください。
## 基本要件
- React で開発する純 Web アプリ
- すべての JSON データは data ディレクトリに置き、category や level でデータセットを絞り込めること
- 基本的な記憶アルゴリズムとシャッフル機能が必要
- 学習進捗はブラウザのストレージに保存すること
## 日本語単語（Japanese Vocabulary）
単語の学習とテストに使用します。
データ形式は JSON で、例は以下です：
{
"name": "name of dataset",
"category": "vocabulary",
"level": "N3",
"data": [
{
"id": "xxx",
"japanese": "株式",
"hiragana": "かぶしき",
"simple_chinese": "股份",
"full_explanation": "...."
}
]
}
各データは以下のテスト方式をサポートします：
- 日本語の漢字のみ表示 -> 答えは中国語
- 日本語のひらがなのみ表示 -> 答えは中国語
- 中国語を表示 -> 答えは日本語（完全な解説は任意）
テスト時に漢字/ひらがなを選べるようにしたいです。
## 文法（Grammar）
文法の学習とテストに使用します。
データ形式は JSON で、例は以下です：
{
"name": "name of dataset",
"category": "grammar",
"level": "N3",
"data": [
{
"id": "xxx",
"japanese": "うちに",
"simple_chinese": "在～過程中／趁～",
"full_explanation": "some example sentences..."
}
]
}
テスト方式は以下を含みます：
- 日本語の文法のみ表示 -> 答えは簡体中国語
- 文法をハイライトした例文を表示 -> 答えは簡体中国語
- 簡体中国語の翻訳を表示 -> 答えは日本語（完全版は任意）
- 例文を表示し、文法部分を穴埋め（テスト対象を削除）にし、かつ中国語翻訳を表示 -> 答えは日本語（完全版は任意）
仕様書の中には、React を使うこと、純フロントエンド（pure front-end）の Web アプリにすること、といった比較的細かい技術要件もあえて入れています。こうした書き方は、多少なりとも開発経験がある人の方がしやすいと思います。もしプログラミングがまったく分からない場合は、最初は技術要件を省いても構いません。ただし、その場合は AI の出力方向がやや不安定になりやすいです。
たとえば「単語を覚えるアプリが欲しい」だけだと、AI は iOS や Android を想定するかもしれません。Web アプリにしても、バックエンドやデータベースが必要な構成を提案してくる可能性があります。私の場合は、追加のサーバーを立てずにそのままネットに公開したかったので、純フロントエンドの Web アプリにすることを明確に書きました。
また、React を指定したのは、あとで自分で微調整したり、AI に修正させたりするときに扱いやすいからです。
完全にプログラミング未経験の方は、先に ChatGPT と会話して、アプリの輪郭を言語化し、要件の洗い出しや必要な技術概念の補完をしてもらうのがおすすめです。深く学ぶ必要はなく、いくつかの核心的な違いを理解するだけで、より明確な仕様書を書けるようになります。
さらに、もう少し先のことも考えておきましょう。日本語学習アプリを作るということは、学習データを入れる必要があります。つまり、後で投入するデータ形式も事前に設計しておくべきです。プログラミングの概念がまったくない場合は、商用ソフトが一般ユーザーにどう操作させているかを参考にできます。たとえば Anki のように CSV や TXT 形式にするのも手です。ここではもう少し「geek」寄りに、開発者がよく使う JSON 形式を採用しました。
ここまでできたら、好きなエディタ（Word、Google ドキュメント、メモ帳など何でも）を開いて、上の例をコピペし、自分の好みに合わせて書き換えてください。たとえば画面遷移、ビジュアル、テスト機構などを調整します。
¶ AI に計画通りに実行させる
次に、先ほど編集した計画書を Claude Code にそのまま貼り付けるだけです。モデルは Opus 4.6 をおすすめします。最も高いモデルですが、その分パフォーマンスも最良です。ゼロから AI にアプリを書かせるときは、賢いモデルを使った方がよく、そうしないとアプリが欠陥住宅みたいになりかねません。
すると AI は、計画書に沿って開発の段取りを整理し始めます。必要なら軽く目を通して、修正が必要か確認してください。AI から細部の確認質問が来ることもあります。
その後、AI が実際に動き始めます。開発中はさまざまな権限が求められますが、多くの場合は許可して問題ありません。ただし、ファイル削除、プライベートなファイルの読み取り、あるいは rm（ファイル削除）というキーワードが見えた場合は慎重に判断してください。不安な操作は、なぜ必要なのかを AI に聞いたり、実行されるコマンドが何をするのかを先に調べたりすると安全です。
AI は計画書の内容を止まらずに実装していきます。数分で終わることもあれば、数十分かかることもあります。完了すると AI から終了の報告が来ます。その時点で「アプリを開いて確認させて」と指示すれば、自分で起動方法が分からなくても AI が立ち上げてくれます。Web アプリなら、ブラウザで開発用 URL を開き、出来上がったアプリを確認できます。
たとえば次のような画面が表示されます。
あるいは、Claude Code 右上の「preview」機能を使うと、ブラウザのプレビュー画面を開いてくれます。
¶ 継続的に修正する
次に、出来上がったアプリを実際に触ってみてください。すると、想像と違うところがたくさん見つかるはずです。仕様書を書いた時点で考えが及んでいなかった点、AI の実装が甘い点、使っているうちに思いつく新しいアイデア。いずれにせよ、直したいところが次々に出てきます。
私の場合は、当初の計画に加えて、発音を聞くための「読み上げ」、スマホでも「カードをスワイプ」できる操作、目を守るための「ダークモード」などを後から追加しました。
この段階では、Claude Code で AI と対話を続け、どう直したいかを具体的に伝えるだけで大丈夫です。AI が一つずつ実装してくれるので、終わったら正しくできているかを確認します。これを繰り返し、満足できるバージョンになるまで反復改善します。
¶ さらに学ぶ
AI は時々、直せば直すほど品質が落ちたり、収拾がつかなくなったりします。そこで重要になるのがバージョン管理です。バージョン管理はタイムマシンのようなもので、いつでも過去の状態に戻って「まだ壊れていなかった地点」からやり直せます。
また、Web アプリを作れたとしても、どうやってネット上に公開するのかが分からないことも多いです。Web アプリは最終的に公開して使ってもらうのが目的なので、静的サイトをサーバーに配置する方法などを学ぶ必要があります。
良い日本語学習データをどう集めるかも重要になります。Web からスクレイピングする、AI に生成させるなど方法はいろいろあります。データを入手したら、整形・最適化・自動化を行い、先ほど作ったアプリが扱える形に落とし込む必要があります。この過程でも多くを学べるはずです。
最初はプログラミングができなくても、AI を使って開発を始めると、プログラミング自体が意外と楽しいと気づくと思います。さらに、場合によっては AI に頼むより自分で直接コードを触った方が速く、面白いこともあります。そうなったら、より深い「プログラミング」や、プログラミング以外のスキルも必要になってきます。『プログラミングは CODE を書くことだけじゃない！』は良い入門書になります。
¶ 結論
AI が発達した今、ソフトウェア開発はもはやエンジニアの専売特許ではありません。誰でも AI を使って実現できます。語学学習についても、昔なら「環境がない」「資源がない」「良いツールがない」と嘆けましたが、時代は変わりました。AI は最高の先生であり、最高の相棒です。翻訳、解説、例文の生成などに使えるだけでなく、自分専用の学習ソフトそのものを作らせることもできます。
これは語学学習に限りません。AI はあらゆる業界のあらゆる場面に応用できます。株を分析してくれるソフト、家計簿ツール、ドキュメント処理スクリプト。全部 AI にやらせられます。本記事の方法は、思いつくあらゆるシーンに適用できます。
¶ 「日本語学習カード」完成版の共有
完成版の「日本語学習カード」をぜひ見てみてください。日本語学習者なら誰でも無料で使えます。ソースコードも完全公開で、元の開発計画書もリポジトリに置いてあります。コミット履歴を見れば、私がどうやって開発を進めたかも追えます。
このソフトは継続的にアップデートします。データについては、現時点では N5-N3 の単語部分だけを整備しました。
本記事には iframe で「日本語学習カード」を埋め込んでいるので、この場でそのまま触れます。ただし、スマホで読む方は、リンクを新しいタブで開いた方が使いやすいと思います。
日本語学習カード：
