Web制作の学習を進めていると、たった一つのエラーや、思ったように動かないCSSのせいで数時間溶かしてしまうこと、ありませんか？
「周りに聞ける人がいれば、一瞬で解決するのに……」
独学や駆け出しの時期、誰もが一度は感じるこの孤独感。
今回は、そんな悩みを解決する「AI（ChatGPTなど）の活用法」について書きたいと思います。
世間では「AIにコードを書かせる」ことが注目されがちですが、私が一番おすすめしたいのは、AIを「24時間いつでも質問できる先輩エンジニア（メンター）」として雇うという使い方です。
AIに「答え」ではなく「解説」を求める
学習中にAIを使う際、やってしまいがちなのが「〇〇を実装するコードを書いて」と丸投げすることです。
これだと動くものは作れますが、自分のスキルとして定着しにくいですよね。
そこでおすすめなのが、「なぜ？」を聞くスタイルです。
1. エラーの原因を解説してもらう
検証ツールに出たエラーメッセージ、英語で怖気づいてしまいませんか？
そんなときは、エラー文と該当のコードをAIに貼り付けて、こう聞きます。
プロンプト例： 「このコードを実行したら以下のエラーが出ました。どこが間違っているのか、なぜこのエラーが出るのか、初心者にもわかるように解説してください」
ポイントは「修正後のコード」だけをもらうのではなく、「原因の解説」を求めることです。
これで「次から気をつけよう」という学びになります。
2. 複雑なコードを「日本語訳」してもらう
ネットで見つけた便利なスニペットや、模写コーディングの解答コード。
「動くけど、なんで動いてるか分からない」という行はありませんか？
プロンプト例： 「このCSSの記述（またはJavaScript）、1行ずつ何をしている処理なのかコメントアウトで解説を入れてください」
これを行うと、魔法の呪文に見えていたコードが、意味のある命令の集まりに見えてきます。
3. クラス名の相談相手になってもらう
地味に時間を取られるのが「クラス名の命名」です。wrapper container inner... 毎回悩みますよね。
プロンプト例： 「ブログ記事のカード型レイアウトを作っています。BEM記法でコーディングする場合の、分かりやすいクラス名の案を3パターン提案してください」
自分では思いつかない単語を知るきっかけになり、語彙力が上がります。
注意点：AIもたまに嘘をつく
非常に頼りになるAIですが、情報の正確さには注意が必要です（ハルシネーションと言われます）。 特に古いjQueryの記述や、廃止されたCSSプロパティを提案してくることもあります。
「メンターの先輩も、たまに勘違いすることがある」くらいの気持ちで、提示されたコードは必ず自分で動かして検証する癖をつけると、より力がつくはずです。
まとめ
AIは「楽をするためのツール」でもありますが、使い方次第では「学習効率を爆上げするツール」になります。
今まで「分からない！」と1人で抱え込んでいた時間を、これからはAIというパートナーと一緒に乗り越えていきましょう。
