はじめに
こんにちは！株式会社ネクストビートでテクノロジー・エバンジェリストなる肩書きでお仕事をしている水島です。大学院の頃はPEG（Parsing Expression Grammar）の研究をしていて、構文解析やプログラミング言語処理系が専門です。
先日、Anthropicの新モデルClaude Fable 5にほぼ丸投げで「プログラミング教育サイトを作って」と頼んでみたところ、想像をだいぶ超えるものが出てきました。
言語の庭 — ことばを育てて、言語をつくる
リポジトリはこちらです。
全6コース・54レッスン。日本語キーワードの教材用言語「にわ語」を備え、エディタも実行も構文木の可視化もすべてブラウザの中で完結します。登録不要・広告なし・無料。これが、放置時間にして合計2時間足らずで出てきました。
なお、この「言語の庭」は私の個人プロジェクトであり、弊社のサービスではありません。
正直に言うと、私はこのサイトの中身をほとんど書いていません。この記事では、何を指示して何が出てきたのか、そして構文解析を専門にしてきた人間の目で見て教材としての中身がどれだけ正確だったかを紹介します。最後に、手放しでは褒められない点（トークン消費）についても正直に書きます。
トップページ。「コードは、ことばだ。」の真下に、にわ語のエディタがいきなり埋まっていて、その場で実行できます。
与えたプロンプトは、ほぼこれだけ
Claude Codeには /goal でゴールを設定すると、あとは自律的にタスクを分解して進めてくれる機能があります。私が与えたのは、深津さん（@fladdict）のこのポストのプロンプトをもじった、次のゴールでした。このプロンプトが面白いなと思い、それなら、前から作りたいと思っていた初学者向けのプログラミング入門サイトを作らせてみよう、と試してみた次第です。
/goal 日本の教育業界が真面目にDXしなければ、ビジネスモデルや価格競争で全部ぶっ壊れるような素晴らしい無料の教育サイトを作って。GitHub Pagesで公開。デザインもUI/UXも最高を頼む。文理を問わず、入口をせばめず、陳腐にならないような
続けて足したのは、この2つだけです。
特にCS教育やプログラミング言語教育に特化した天下無双の、初心者にもはいりやすくそれでいて陳腐でないものを作ってほしい
playgroundがブラウザ上にもあるといいな
仕様書はありません。技術スタックの指定もしていません。「教材用のオリジナル言語を作れ」とも「構文木を可視化しろ」とも言っていません。「入門者にやさしいプログラミング教材サイト」という肌感を伝えただけです。
あとは進捗が上がってくるたびに「めっちゃええやん。続きもいこうか」と返していただけで、設計にも実装にもほぼ口を出していません。
タイムライン
作業は2セッションに分かれていて、放置していた時間は合計でも2時間足らずでした。
- 前半：Astro 6のスキャフォールドから始まり、デザインシステム、にわ語エンジン（TDDで63テスト、分岐カバレッジ88.7%）、CodeMirrorエディタ、構文木ビューア、JSサンドボックス（81テスト）、コース1全10レッスン、コース2全12レッスン、Lighthouseスコア97-100の調整まで
- 後半：コース3〜6（正規表現・アルゴリズム・計算理論・型システム）の32レッスンを追加し、アクセシビリティを88→100に
私がやったのは眺めて相槌を打つことだけです。
何が出てきたか
「にわ語」——教材のために言語を1つ作ってきた
サイトを開いてまず驚いたのがこれです。コース1は、JavaScriptでもPythonでもなく、「にわ語」という日本語キーワードのタートルグラフィックス言語から始まります。
まる を かく
みぎ へ 90 まわる
50 すすむ
「初心者向けの教材サイト」と頼んだら、教材で使うためのプログラミング言語を自作してきたわけです。エラーメッセージも日本語で、しかも設計思想があります。レッスン1のタイトルは「コンピュータは、世界一誠実な読み手」。わざと変な文を書かせてエラーを出させたうえで、こう説明します。
ここで注目してほしいのは、コンピュータが怒っていないことです。壊れてもいません。「おおきい、がどういうことか、私には分からなかった」と、正直に困っているだけです。
（中略）エラーは、誠実な読み手からの返事です。「ここまで読めた。ここで分からなくなった」という、世界でいちばん正確な読書感想文。
— コース1 レッスン1「コンピュータは、世界一誠実な読み手」
エラーを「失敗の印」ではなく「読み手からの返事」として最初に位置づける。入門書を書いたことのある人なら、この導入がどれだけ練られているか分かると思います。
ブラウザの中で、字句解析から評価まで動く
コース2「じぶんの言語をつくる」では、読者が電卓から始めて自分の言語を育てていきます。そのための実験環境「MiniLangLab」がレッスンに埋め込まれていて、コードを打つと①トークン列 → ②構文木 → ③評価結果が、その場で全部表示されます。
1 + 2 + 40 を入力すると、ことばの粒（トークン）、構文木、評価された値（43）が並んで表示される。字句解析→構文解析→評価という処理系の3工程が1画面に収まっています。
バックエンドはありません。にわ語もminilangも、字句解析器・構文解析器・評価器がすべてクライアントサイドの純TypeScriptで実装されています。無限ループ対策としてfuel方式（実行ステップ数の上限）の暴走防止まで入っています。ユーザーが書いたJavaScriptの実行はWeb Workerに隔離してタイムアウトでkillする方式で、エラーメッセージには日本語の注釈レイヤが被せてあります。
このあたり、「playgroundがブラウザ上にもあるといいな」という一言から、ここまで展開されました。
教材エンジンが「中の見える」自前実装
コースが進むと、さらに業の深いものが出てきます。
- コース3（正規表現）：正規表現エンジンが自前実装で、NFAの可視化つき。バックトラックしない実装なので、教材として「原理的限界」を正しく説明できる
- コース5（計算理論）：チューリング機械のシミュレータがあり、遷移表をユーザーが編集できる
- コース6（型システム）：minilangに型検査器が追加され、実行前にエラーを捕まえる体験ができる
- ことばの工房：コース2の修了者は自分の言語を設計して、キーワードを差し替えた言語をURLに符号化して共有できる
全部で54レッスン。タイトルだけ眺めても「停止性問題」「対角線論法」「チョムスキー階層」「型の限界」と、入門サイトの皮を被ったまま、かなり深いところまで連れて行く構成になっています。
専門家の目で見て、説明は正しいのか
「初心者にやさしい教材」自体は世の中にたくさんあります。問題は、やさしさのために正確さを犠牲にしている教材が非常に多いことです。「変数は箱」式のたとえは入口では分かりやすいのですが、あとで現実と食い違って壊れます。
このサイトはトップページで「変数は箱とは、教えません。」と宣言しています。大きく出たな、と思いながら、専門に近いコース2（言語処理系）を重点的に読みました。結論から言うと、ごまかしも誤りも見つけられませんでした。
たとえばコース2レッスン3「たし算の木」。構文木を神秘化せずに、こう導入します。
「1 たす 2 たす 40」を計算するとき、あなたは一度に全部を足しません。まず 1+2 を計算して 3 にして、それから 3+40 を計算します。つまり計算には順番があり、順番があるということは、式には「先に固まるまとまり」がある。
そのまとまりの入れ子を、まっすぐ描いたものが木です。
— コース2 レッスン3「たし算の木」
そして構文木をJavaScriptの { op, left, right } の入れ子として書かせ、評価器を再帰関数として実装させます。脇道のコラムでは、10 - 3 - 2 を素材に左結合を説明し、「もし右結合だったら答えは9。実際は5。結合の向きも、言語設計者が決めていること」と踏み込みます。
演習の締めの一文には唸りました。かけ算を追加させたあとで、こう種明かしするのです。
気づいたでしょうか——評価器にとって、かけ算の追加は1行でした。大変なのは、文字の列から木を組む側（工程②）。だから次のレッスンは、そこに正面から取り組みます。
これは言語処理系を書いたことのある人間なら全員が頷くポイントで、しかも次のレッスン（優先順位を木のかたちで説明する回）への引きになっています。再帰についても「ここは多くの人がつまずく場所で、つまずくのが普通です」と先回りして不安を取り除く。やさしさと正確さを、両方とも妥協していない。ここが私には一番の驚きでした。
構文解析の入門書を書いている身としては、正直ちょっと複雑な気持ちになるくらいの完成度です。
ただし、トークン消費はえげつない
ここまで褒めてきましたが、無視できない代償があります。トークン消費量です。
私はClaude Maxプラン（20x）を使っていますが、このサイト生成を含む数時間の作業で、その日のusage limitに達しました。Fable 5は1回のゴール設定から大量のタスクを並列展開して自走するぶん、消費が桁違いです。「2時間放置していたら完成していた」の裏側では、その2時間ぶんの思考と実装が全部トークンとして燃えています。
Opusで同じことをやろうとすると、おそらくここまでの完成度では出てきません。しかしOpusなら同じ予算でずっと長く走れるのも事実です。
まとめ：Fable 5とどう付き合うか
今回の体験をまとめると、こうなります。
-
凄さ：「入門者にやさしい教材サイト」程度の肌感しか伝えていないのに、教材用言語の自作・ブラウザ内で動く処理系・正確さを犠牲にしない説明文まで、設計判断の連鎖を自分で積み上げて完成品に到達した。
/goalを設定して放置するだけで、です - 弱点：トークン消費がえげつない。Max 20xでも数時間でlimitに達する
なので現時点の私のおすすめは、Fable 5を「計画と骨格」に使うことです。プロジェクトの立ち上げ、全体設計、品質の基準を作るところまでをFable 5に任せ、その後の細かい修正・機能追加・定型的なタスクはOpusやSonnetに引き継ぐ。今回のサイトも、基盤とコース構成が出来上がった今となっては、レッスンの追加や手直しはより軽いモデルで十分回せそうです。
「AIに丸投げで作らせたサイト」と聞いて想像するものより、だいぶ遠くまで来ていると思います。ぜひ一度、言語の庭を歩いてみてください。最初の「実行する」ボタンを押すところまで、登録も何も要りません。
最後に、種明かしをひとつ。この記事も、ネタ出しと編集とリテイク以外は、すべてClaude Fable 5が書いています。
何かお気づきの点があれば、ぜひコメントいただけると嬉しいです。それでは、また！
Discussion