令和最新版　AI時代のプログラミング学習ベストプラクティス

背景

React は何度も挑戦して挫折しています。唯一すこし壁を動かしたのがこの間の Tauri を使ったアプリケーション開発ですが、スパゲッティコード化して塩漬け状態です*1。ただ単にAIに併走してもらいつつ代わりに書いてもらうのでは限界がある、というのが正直なところです。

今回、ヨットの局面評価を行う web アプリを作成しています。ヨットは Nintendo Switch のゲームソフト「世界のアソビ大全51」にも収録されているサイコロゲームです。トランプの代わりにサイコロを使うポーカーのようなゲームです。過去にこのヨットを数学的に分析する連載を行ったこともありました。

ちなみに電子書籍も販売しているので、気になった方はぜひご購入ください。

本を書くぐらいですから、どういう計算を行わないといけないのかはかなりしっかり理解しています。そのため、バックエンド開発については、AIの力を借りながらも、ある程度スムーズに進めることができました。細かいライブラリの使い方や TypeScript の書き方は覚束なくても、抽象的なレベルで何を書けばよいかは明確にあるし、最終的な形も明確にあったからです。

一方で、フロントエンドは難題です。React の書き方の知識が少ししかないのはもちろん、どういうアーキテクチャがあって、それをどう組み合わせればよいのかすら分かりません。また、どのようなものができあがりそうかも想像できませんでした。AIに指示しようにも、足がかりがない状態です。

右も左も分からないと独学がキツい問題

 例えばあなたが楽器を習ったことがない人だったとして、余暇に楽器を始めてみたいなと思ったとします。するといきなり膨大な壁にぶつかることになります。例えば...

• 楽器ってどこ行けば買えるの？値段の相場は？
• 楽器ってそもそもどんな種類があるの？
• 初心者が始めても難しくないのかな？
• レッスンを受けた方がいい？自分で練習できる？
• 自宅で練習しても大丈夫？
• 大丈夫じゃないとして、どこで練習すればいいの？
• (楽器を買えたとして) なにをまず練習すればいいの？これであってる？できてる？

知り合いに楽器経験者がいれば根ほり葉ほり聞いて解決できるかもしれませんが、それもないなら相当な執念が必要になるでしょう。

このように、学びたいものの知識や経験があまりに不足していると独学の難易度が跳ね上がります。これは割と世の中の真理だと思っています。

オーソドックスな独学方法

プログラミングの独学、つまり明示的に生身の人間と相互にやりとりしながら学ぶのではない学習方法では、主に以下の2つから情報を得るのがスタンダードです。

• 書籍
• ネット記事

特に、自分の知識量と同じぐらいの前提知識で書かれた入門書があれば、最高の独学のお供です。この本を読みながら、手を動かしつつ、概念やテクニックなどを頭と体に擦り込んでいく作業になります。

しかし右も左も分からないレベルだと、まずこの書籍にたどり着くまでが大変です。手当たり次第に周辺知識の情報収集を行って、自分が本当に身につけなければならないことが何なのかを特定し、しかもそれを自分に合ったレベルで解説している本を見つけ出す必要があります。運が悪ければ、まだ世の中に存在しないことさえあります。その場合、難解な別の本を全力で背伸びしながらアタックすることになるでしょうが、これはかなりハードです。

また、一通り知識を身につけたとして、今度は自分の作りたいものを作ろうとすると、もう一段ハードルがあります*2。本を読みながら進めるのを補助輪つきの自転車に例えれば、自分で書くのは補助輪なしに対応します。後ろで支えてくれる人がいないと、相当ハードです。

Claude Code は独学の救世主

ここで救世主になるのが、Claude Code の Learning モードです。Claude Code はお馴染み CLI で実行できる AI エージェントサービスです。平たく言えば、コマンドをカタカタしつつ言葉で依頼を投げると、いい感じにファイルを編集したりしてくれるツールです。

Claude Code には output-style という設定項目があり、その中に Learning というモードがあります。これは、指示に合ったものをガンガン生成するのではなく、あえて一部を未実装な状態で生成し、ユーザーが穴埋めをして学習を進められるモードです。Insight という学習のためのヒントも定期的に出してくれるので、コラム的に楽しく知識を得ることができます。

実はバックエンドの開発でも、この機能にかなり助けてもらいました。作りたいものがはっきりしているとはいえ、何をどの順番で作っていけばいいのかは AI に聞きながら進めたかったからです。分からないことはいくらでも質問できるし、とことん付き合ってくれます。

それでも高い独学の壁。どうする？

しかし、この救世主の力を以てしても、まだフロントエンドの壁は高いです。そもそも何を作りたいかがふわふわしているので、教えてもらうにもふわふわした方向性になります。闇の中で目的地も分からないまま、少し先がぼんやり見えるろうそくを片手に進むような感じです。

人に教わることで例えてみると、先生がゴールを明確に持っていないような状況です。先生は個別具体的な書き方は当然熟知していますが、こちらが最終的に目指すものが伝わっていないので、一緒にフラフラさまようことになります。これでは質のいい学習にはなりません。

ここで「であれば、まずは先生が見る用のお手本を作ればよいのでは？」という発想に至ります。右も左も分からないのにお手本なんて作れるの？と思うかもしれません。しかしそれが可能なんです。そう、AIならね。

Vibe Coding でお手本作成

Vibe Coding とは、ざっくり言うと「ふわっとした自然言語でAIに指示して、詳細はすべてAIにお任せする開発手法」です。細かい知識がなくてもそこそこのクオリティのものが作成されることが話題となりました。

Vibe Coding の欠点はいくつかありますが、学習という点においては「全部お任せなので、中身が全然分からない」ということが一番の欠点です。できたものを読むぐらいはできるものの、学習効果は限定的ですし、そもそも何をかいているのかよく分からないでしょう。AIにお願いして順番に解説してもらうことも可能ですが、やはり自分で手を動かすことに勝る学習法はないはずです。

そこで、この Vibe Coding を「学習の過程に用いる」のではなく、「学習前の下準備に使う」というのが、今回の記事のメインテーマです。知識がなくてもそこそこのものができることを逆手にとって、ゴールとして作りたいものを作ってしまい、それを資料として先生役をやってもらうという発想です。

具体的な手順

前置きが長くなりました。実際に行った具体的な手順を説明します。

(1) まず最初に、どのようなアプリを作っていきたいか計画します。この段階では、自分のできる範囲のもので大丈夫です。ある程度知識があれば、どのような画面構成だとか、機能の実装にはこのような仕組みを使うとかも考えてOKです。ない場合は、居酒屋で夢を語るぐらいのノリでもOKです。これらの内容を Markdown ファイルとして作成しておきます。

(2) Vibe Coding の要領で実際にコードを生成します。作業フォルダを作成した上で、先ほどのファイルを配置し、AIに「このファイルに書いてあるようなアプリを完成させて下さい。記載のない詳細の仕様についてはすべてお任せするので、ちゃんと動くところまで作って下さい。」等と依頼します。しばらくかかるかもしれませんが、運が悪くなければちゃんと何かしらはできるでしょう。

(3) できたものを動かしてみます。(1) の内容次第ですが、この段階では意図から大きくはずれたものができることが多いと思います。これを見てどういった内容が指示に足りていなかったのかを書き出していきます。あるいは、もし軽微な内容であれば、直接AIに命令して修正してもらいます。私の場合は、見た目の設計がかなり気に入らなかったので、別途 Claude と壁打ちして、デザイン仕様書を作ってもらいました。

(4) ある程度出尽くした＆修正できたと感じたら、一旦「現在のアプリの仕様を Markdown ファイルにまとめて下さい」と依頼します。そうすると、(1) の依頼よりもはるかに詳細が詰まったファイルができあがるはずです。

(5) (4) で作った仕様書と (3) で作った追加要望書を参照して「追加要望を満たすように仕様を再検討し、改めて仕様書を作成して下さい」と依頼します。文書レベルだと結構賢く統合してくれるので、このステップが大切です。

(6) 別の作業フォルダを作成し、(5) で作った新しい仕様書を持ってきます。このあとは(2)～(5)と同様のことを繰り返します。最終的に「これをお手本に作りたいな」というものができたら、お手本完成です。

(7) お手本の仕様書を作成してもらったら、次に「この仕様書の内容を段階的に実装することで、技術の学習を行いたいです。効果的な学習プランを立てて Markdown に出力してください。」と依頼します。もし可能であれば、あなたの現在の知識や経験や技術力についてまとめたドキュメントを作っておいて、参考情報として渡すとよりよいでしょう。

以上で準備完了です。あとは学習用の作業フォルダに学習プランと仕様書を配置して、Claude Code が Learning モードになっていることを確認した上で、二つの文書を参照して「学習を進めたいのでインストラクションをお願いします」等と依頼すればOKです。

Tips

セッションごとに先生の振る舞いにばらつきがあったので、以下のファイルを作成して、最初に渡すようにしました。

• ユーザーは React 初心者です。丁寧にわかりやすい説明を心がけてください。
• 実装はユーザーが手動で行います。ユーザーが明示的に指示しない限りは、自分でファイルを更新するのではなく、具体例を示してユーザーに入力を促してください。
• 段階的に学習を進められるよう、一度に渡す課題の量には注意してください。
• ユーザーは Rust, Python, C# に習熟しています。必要に応じてこれらの言語との比較を示すことで、ユーザーの理解を促進できます。
• このプロジェクトの目的は、アプリケーションを早く完成させることではなく、ユーザーが React を理解することです。次に進めることを強く促すのではなく、質問があるかどうかを確認し、問題なければ次に進むようにしてください。

先生のモデルは Haiku で十分です。質問攻めしてもトークンを使い果たさない安心感があるのでおすすめです。一方でお手本づくりは Sonnet を使う方が質が安定してよいかもしれません。

まとめ

Claude Code の Learning モードはプログラミングの独学の救世主ですが、さらに Vibe Coding で下準備を行うことで、救世主をもっと強くできます。「本当はできるようになりたいけど、なかなか身につけられない」と思っているプログラミング技術がある方は、ぜひこれを使って突破してみてください。

ではまた。