バグを直して学ぶWebアプリを作りました
以前、異次元の教育効率なバグコード教育メソッド という記事を書きましたが、そのメソッドを実際にブラウザ上で体験できるWebアプリを開発しました。
まずは、実際に遊んでみてください。
どんなアプリ？
出題されるのは「バグのあるコード」です。
問題を読んで動くように、コードを修正してください。
- VS Code風のエディタ: ブラウザ上で直接コードを編集・実行できます
- リアルタイム判定: 修正して実行すると、即座にテストランナーが走り、合否判定が行われます
- 思考の可視化: なぜ間違ったのか、どこに注目すべきだったのかを解説で振り返ります
AI時代のエンジニアの価値とは？
2026年現在、AIがコードを書くことは当たり前になりました。「こういうアプリを作って」と言えば、数秒で動くコードが出力されます。
では、私たちエンジニアの仕事は何になるのでしょうか？
AIが出力したコードが動かなかったとき、あるいは期待した挙動と少し違ったとき、「AIがダメだ」と諦めていませんか？
あるいは、エラーメッセージを見て見ぬふりをして、適当にコードを書き換えていませんか？
「動かないコード」を前にしたときこそ、エンジニアの真価が問われます。
そして、そこにはプログラミング本来の「楽しさ」が詰まっています。
このアプリを通じて、AI時代を生き抜くための「論理的思考」の楽しさを体験してほしいと考えています。
論理的思考とは「デバッグ」そのものである
巷でよく聞く「論理的思考（ロジカルシンキング）」。
難しそうな言葉ですが、エンジニアにとっては身近な行為そのものです。
論理的思考とは
直感や感情に頼らず、物事を筋道立てて整理し、矛盾なく結論を導き出す思考法。
問題を要素に分解し、**「なぜ（Why）」「どのように（How）」**を掘り下げて構造的に考えること。
これって、デバッグ行為そのものですよね？
- 現象の観察: エラーログを読む、挙動を確認する。
- 仮説の構築: 「ここが間違っているのではないか？」「このデータがおかしいのではないか？」と推論する。
- 検証: ログを出す、コードを書き換えて試す。
エラーコードも見ずに当てずっぽうで直そうとしても、バグは直りません。
「なんとなく動いた」で済ませていると、さらに大きなバグを生みます。
仕様で定義された業務ロジックを、論理的に正しくコンピューターが分かる言葉に変換するのがプログラミングです。
動かないのは、その論理がどこかで破綻しているからです。
コンピューターはエラーログや実行結果でその「矛盾」を必死に伝えようとしています。
人間が 「何をしたくてこのコードが書かれているのか」「何が起きているのか」「なぜそういうことが起きるのか」 を理解してはじめて、正しい解決方法が見つかります。
この工程こそが論理的思考のトレーニングであり、正しいデバッグ方法を身につけることは、一生モノの思考力を手に入れることと同義だと私は考えています。
アプリ開発秘話：AIとの共創
このアプリ自体も、AI時代の開発スタイルで作られています。
着想から要件定義、開発まで、ほぼ1日で完遂しました。
壁打ちから生まれたコンセプト
最初は「論理的思考を身につけさせる教育って難しいよね」「評価基準も曖昧だし」と、Antigravity で Gemini 3 Pro と壁打ちをしていました。
するとGeminiから 「デバッグこそ論理的思考の塊であり、あえてバグのある問題（間違い）を量産することこそAIの得意分野だ」 という提案がありました。
これだ、と思いました。
正解のコードを書かせるのではなく、間違いを直させる。これなら無限に問題を作れるし、思考のプロセスを評価できる。
AI主導の開発
最近のAIは非常に賢く、指示を出せばあとはみるみる開発が進んでいくのを眺めているだけです。
「Reactでこういうコンポーネント構成がいいかな」「テストランナーはどう実装しよう」といった私の思考を先回りしてコードを書いてくれます。
（途中、無料枠が切れたので Copilot (Claude 4.5 Sonnet) に課金切り替えしましたが…）
「こだわり」は人間の仕事
一方で、AIに任せきりにできない部分もありました。それは 「コンセプト」と「体験」 です。
「いい感じに作って」では、凡庸なアプリしかできません。
- 「プログラムを題材にしたアプリだから、VS Code みたいな見た目にしたい」
- 「ローディング画面はドーナツローディングにしてワクワク感を出したい」
- 「テスト結果は某ゲーム雑誌のクロスレビュー風にしてほしい」
- 「正解したら紙吹雪を飛ばして達成感を演出したい」
- 「解説を読むのは退屈だから、タイプライター風のアニメーションを入れたい」
こうした 「楽しさを伝えるための演出」 や 「学習体験の一貫性」 は、人間が明確な意図を持って指示しなければなりませんでした。
「論理的思考を楽しむ」というコアコンセプトを、UI/UXの隅々にまで浸透させる。
これからのエンジニアに残される重要な仕事は、こうした 「意思決定」と「ディレクション」 なのだと再確認しました。
おわりに：思考の旅に出よう
AIがどんなに進化しても、最終的に「それが正しいか」「意図通りか」を判断するのは人間です。
論理的に考えることができれば、AIへの指示も的確になり、生成されたコードの矛盾も見抜けます。お客様への説明も説得力を増すでしょう。
何より、論理的に考えることは楽しいです。
モヤモヤしていた事象が、一本の線でつながり、理路整然と解決したときの快感。
「理にかなっている」状態の心地よさ。
このアプリで用意した問題はまだ少ないですが、まずはここから「思考の旅」を始めてみませんか？
きっと、デバッグ画面を見る目が少し変わるはずです。
Think Lab from Buggy Code