ChatGPTにコードを頼んでも、一発で動かないことは多いですよね。

そんなときにどう言い直せばいいのか。

この回では、正しいVBAのコードが出るまでの7往復をそのまま紹介します。

あわせて、HTML・CSSの勉強を手伝ってくれるGPTsの使い方も見ていきます。

コードの修正依頼が苦手な方は、ぜひ読んで下さい！


一発で動かないのは、普通のこと

ここまで紹介してきたVBAのソースコードは、すべてChatGPTに出してもらったものです。

ただ、1回のやり取りで正しいコードが出ないことも、多いです。

簡単なコードなら1回で出ますが、少し複雑になると、1回では難しくなります。

そこで、正しいソースコードを出してもらうまでの会話の流れを、実際のやり取りをもとに解説します。

例は、列の幅を特定のパターンにするVBAです。

途中で紹介するコードは、誤ったものです。

あらかじめご了承下さい。


7回のやり取り

1回目は、最初のコードを動かすと、A列が50ポイント（405ピクセル）、B列が20ポイント（165ピクセル）という結果になりました。

単位がポイントとピクセルで食い違っているうえ、A列のほうが広くなっています。


2回目は、A列とB列の幅が逆になっていると伝えると、A列が狭く、B列が広くなりました。

ただ、幅が20ポイントと50ポイントのままだったので、ポイントではなくピクセルで出してもらうことにしました。


3回目は、ポイントで計算した幅をピクセルに直してもらったところ、今度は偶数列の幅が0になりました。

ChatGPTのコードは、必ず実行して、きちんと動くかを確かめて下さい。

ただ、これはGPT-3.5での結果なので、GPT-4ならもう少し精度が上がるかもしれません。


4回目は、エラーが出たので、ChatGPTにコードを出し直してもらいます。

5回目は、エラーメッセージをそのまま伝えて修正してもらうと、今度は別のエラーが出ました。

6回目は、出たエラーを報告したのに、またもや別のエラーが出てしまいました。


7回目で、質問を変えて解決しました。

3回も別のエラーが出たので、質問の仕方を変えたのです。

幅をピクセルで指定すると失敗することがよく分かったので、最初からポイントで指定することにしました。

Excelで列の幅を調整するときには、ポイントとピクセルの両方が表示されます。

20ピクセルと50ピクセルをポイントに換算して、その数値で指示しました。

ChatGPTの精度は上がっていますが、単純でないコードの場合は、何度かやり取りが必要です。


このやり取りから分かること

- 結果やエラーメッセージを、そのままChatGPTに伝えて、修正してもらう


- 同じ方法でエラーが続くなら、質問の仕方を変える


- 動くコードが出たとしても、予期せぬエラーに対応できるかをしっかり考える


HTML・CSSの勉強を手伝ってもらう

コーディングを手伝ってくれるGPTs「Code Tutor」を使ってみましょう（原稿を書いた当時の話です。カスタムGPTsの終了予定は2026年12月）。

Web制作にチャレンジしたい方が、HTMLとCSSを勉強している場面を想定しました。


勉強のコツを聞く

Webデザインの仕事を受注したくて、HTML＆CSSを勉強しています。

独学だと覚えることが多く、なかなか進みません。

HTMLとCSSを学ぶコツを教えてください！

【難しく感じていること】CSSのFlexboxの書き方／HTMLの入れ子構造／marginとpaddingの違い


難しいと感じていることを、具体的に3つ挙げています。

答えは、それぞれに的確でした。

  • Flexbox：レイアウトを柔軟に扱う強力なツール。flex-direction、justify-content、align-itemsなどの基本プロパティの役割を理解して、実際に動かしてみる
  • HTMLの入れ子構造：小さなページを作り、段階的に要素を追加する。たとえば、divの中にpを入れて、要素がどう作用し合うかを見る
  • marginとpadding：marginは要素の外側の空間（他の要素との距離）で、paddingは内側の空間（境界とコンテンツの間の距離）。実際に適用して、効果を観察する

コードを書いて試すこと、具体的な例や質問を共有することを勧めて、質問に対して的確にアドバイスしてくれました。


表にまとめてもらう

学習者が難しく感じるFlexboxを、もう少し深掘りします。

「Flexboxのプロパティを復習したいので、基本のプロパティを、分かりやすい表にまとめてください。見出しは、プロパティ名／機能／備考の3つにしてください」

と頼みました。

表題を指定すると、分かりやすい表になります。

続けて、プロパティごとの値（flex-directionならrowやrow-reverseなど）も、「属性名／機能／備考」の表にしてもらいました。

かなり分かりやすくなりました。


イメージ図は出せなかった

文章だけでは分かりにくいので、各属性を設定したときの動きを、イメージ図にできたら便利です。

そこで、「表に『イメージ図』の列を足して、図を追加することはできますか？」

と頼みました。

答えは、「画像を直接作ることはできませんが、代わりに、各属性の様子を思い浮かべられるような説明を加えます」というものでした。

残念ながら、イメージ図は出してもらえませんでした。

やはり、AIだけで学ぶのは難しいようです。

テキストや動画を学習の中心にして、ChatGPTは補助として使うのがベストかもしれません。

表づくりのように、整理や復習を手伝ってもらう使い方は、向いています。