OpenAIは6日(米国時間)、特定の目的のために「ChatGPT」をカスタムできる「GPTs 」を発表しました。「GPTs」はなんと、カスタマイズして個人で販売できるそうで、AIは日々進化し続けています。

本日は、ChatGPTで、コーディングの修正する方法について紹介します。

ChatGPTでコードを修正する手順

ChatGPTでコードを修正する手順は３つです。

• 手順①コーディングで「つまずいている」部分を説明する。
• 手順②コーディングで「どのように修正してほしいのか」伝える。
• 手順③修正したいコードを提出する。（HTML、CSS、JavaScriptなど）

具体的に説明していきます。

手順①コーディングで「つまずいている」部分を説明する。

まずは、コーディングの現状の説明や、つまづいている部分を紹介します。

こちらの質問の書き方のポイントは、上司や同僚に伝えるように、前提条件や動作のパターンも丁寧に解説する事です。

【プロンプト例】

スライダーmax‐with 611pxの段階で、スライダーが2つになり、各スライダーの外側の余白が、15pxずつ均等に空くデザインを作成したいです。しかし、2つのスライダーが、やや右寄りになっています。

　

手順②コーディングで「どのように修正してほしいのか」伝える。

手順①でChatGPTにしてほしい事を伝えたら、どんな修正をしてほしいのかを説明します。

ここでのポイントは、Pixel数、フォントカラー、フォントサイズも伝えると、ほぼズレなく修正が可能になります。

【プロンプト例】

ブロックの外側の余白がHPとから15pxずつ均等に空くようなデザインを提案してもらうことは可能でしょうか？
ブロックの背景は＃744E4Eでお願いします。

　

手順③修正したいコードを提出する。（HTML、CSS、JavaScriptなど）

最後は、現在書いているコードを貼り付けたら完了です。

コードは長くても問題ないです。

具体的な質問と回答例

【質問文】

現在、HP制作のお知らせセクションで、すべて、お知らせ、イベント、ブログの４つのボタンを作成しています。現在はCSSコードにactiveをつけてボタンを押すと色が変わる反応を作っているのですが、このボタンをラジオボタンにしたいです。

このようにコードを書いているのですが、どのように変更すればいいでしょうか？
条件:色はやフォントサイズ図形のサイズはそのままにしてください。

記載したコード
<div class=”news-btn1″>
　<a href=””   class=”news-btn2″>
　<a href=”” class=”news-btn3″>
・・・

　

【回答例】

まとめ：ChatGPTでコードの修正は可能。

ChatGPTでコードの修正を行う手順は３つ

• ①コーディングで「つまずいている部分」を説明する。
• ②コーディングで「どのように修正してほしいのか」伝える。
• ③修正したいコードを提出する。（HTML、CSS、JavaScriptなど）

ジェイ・ラインはこのように、最新のIT技術を活用しながら採用サイト制作を行っています。

採用に課題を抱えている方は、こちらからご相談ください。