この章では、Web制作を学習している段階でAIをどう使うかを学びます。
AIは、わからないことを質問したり、エラー文を説明してもらったり、練習問題を作ってもらったりするのに向いています。
ただし、答えをすぐに見すぎると、自分で考える力が育ちにくくなります。
学習中にAIを使う意味
Web制作の学習では、つまずく場面がたくさんあります。
- HTMLタグの使い分けがわからない
- CSSが効かない
- レイアウトが崩れる
- JavaScriptのエラー文が読めない
- 説明を読んでも理解できない
- 自分のコードのどこが悪いかわからない
AIを使うと、こうしたつまずきをその場で質問できます。
特に、エラー文や自分のコードを貼って質問できるのは、学習効率を上げるうえで大きな助けになります。
わからないコードを解説してもらう
教材やサンプルコードを読んでいて意味がわからない時は、AIに解説してもらえます。
次のJavaScriptコードを、Web制作初心者向けに解説してください。
特に、何のためにquerySelectorを使っているのか、classList.toggleが何をしているのかを知りたいです。
コード:
...ただ「解説して」だけではなく、どこがわからないかを書くと、説明が自分に合いやすくなります。
エラー文を質問する
エラー文は、学習中に避けて通れません。
エラーが出たら、エラー文、該当コード、やりたいことをセットでAIに渡します。
JavaScriptでハンバーガーメニューを作っています。
クリックしたらメニューを開きたいのですが、次のエラーが出ます。
エラー:
Cannot read properties of null
やりたいこと:
ボタンをクリックしたら、navにis-openクラスを付けたいです。
該当コード:
...
原因の候補と、確認する順番を教えてください。エラー文だけを貼るより、やりたいこととコードを一緒に渡す方が、原因を絞り込みやすくなります。
自分の理解度を確認する
AIは、理解度チェックにも使えます。
CSSのpositionについて学びました。
私の理解が合っているか確認したいので、初心者向けの確認問題を5問作ってください。
回答後に、間違いをやさしく解説してください。自分で説明できるかどうかを確認するのも効果的です。
Flexboxについて自分なりに説明します。
説明に間違いがあれば指摘してください。
説明:
...学習では、読むだけでなく、説明することで理解が深まります。
練習問題を作ってもらう
教材を読んだあと、AIに練習問題を作ってもらうと復習しやすくなります。
HTMLの基本タグを学びました。
次の条件で練習問題を3問作ってください。
- 初心者向け
- 見出し、本文、画像、リンク、リストを使う
- 解答例も付ける
- それぞれの問題で意識するポイントも書く練習問題は、自分のレベルに合わせて難易度を調整できます。
「少し難しくして」「実務寄りにして」「ヒントだけにして」のように追加で依頼すると、学習しやすくなります。
自分のコードをレビューしてもらう
自分で書いたコードをAIに見てもらうと、改善点に気づきやすくなります。
次のHTMLとCSSをレビューしてください。
観点:
- HTMLの意味が自然か
- class名がわかりやすいか
- CSSが重複していないか
- スマホ対応で崩れそうなところがないか
いきなり修正コードを出すのではなく、まず問題点を箇条書きで教えてください。最初から修正コードを出させるより、まず問題点を出してもらう方が学習になります。
AIに頼りすぎると起きること
AIは便利ですが、頼りすぎると成長が止まりやすくなります。
よくあるパターンは次の通りです。
- エラーが出たらすぐにAIへ貼る
- 出てきたコードを意味がわからないまま使う
- 自分で調べる前に答えをもらう
- コードが動けば理解したことにしてしまう
- なぜ直ったのか説明できない
これを続けると、制作スピードは一時的に上がっても、自力で直す力が育ちにくくなります。
学習中のおすすめ手順
学習中は、次の流れでAIを使うとバランスが取りやすいです。
- まず自分で読んで考える
- わからない点を言葉にする
- AIに質問する
- 回答を自分の言葉で言い換える
- 自分のコードで試す
- なぜ動いたか説明する
AIを使っても、自分の手で試すことは省略しません。
学習の目的は、AIに答えを出してもらうことではなく、自分で理解して使えるようになることです。
この章のまとめ
- AIは、コード解説、エラー相談、練習問題、レビューに使える
- 質問するときは、やりたいこと、コード、エラー文をセットで渡す
- AIに答えだけでなく、確認する順番も聞くと学習になる
- 意味がわからないコードをそのまま使わない
- AIを使いながらも、自分で考える時間と試す時間を残す