ChatGPTにプログラミングをさせるコツ
当サイトはChatGPTにプログラミングさせて構築したWebサイトです。プログラムを作らせる時、最もChatGPTの力が発揮されると言われています。
ChatGPTに具体的な問いを投げる
GPTにプログラミングをさせる第１のコツは、「具体的なプロンプトを作る」です。
ChatGPTは具体的であればあるほど、専門的なコードを生成してくれます。
「ウェブサイトを作りたい」というざっくりとした質問だと、コードを生成してくれません。「〜のように機能する〜を、〜の技術を使って作りたい」と具体的に指定すると、こうクオリテイなプログラミングをさせることができます。
例えば、ウェブサイトのハンバーガメニュー（当サイトの左上にある三本線のメニューボタン）を作りたいとします。当サイトのそれを作るとき、次のようにプロンプトを作りました。
クリックしたら、上下のバーはバッテンになり、真ん中のバーは左へスライドしながらフェードアウトしていくようなアニメーションをハンバーガーメニューにつけたいすると次のようにコードを生成してくれます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>アニメーション付きハンバーガーメニュー</title>
</head>
<body>
<header>
<div class="hamburger-menu" id="hamburger-menu">
<div class="line line1"></div>
<div class="line line2"></div>
<div class="line line3"></div>
</div>
<h1 class="site-title">サイトタイトル</h1>
</header>
<script src="script.js"></script>
</body>
</html>
body {
margin: 0;
font-family: Arial, sans-serif;
background-color: #f2f2f2;
}
header {
display: flex;
align-items: center;
padding: 15px;
background-color: #333;
}
.hamburger-menu {
display: flex;
flex-direction: column;
justify-content: space-between;
width: 30px;
height: 22px;
cursor: pointer;
margin-right: 15px;
}
.line {
background-color: #fff;
height: 4px;
border-radius: 2px;
transition: all 0.3s ease;
}
.line1,
.line3 {
width: 100%;
}
.line2 {
width: 60%;
align-self: center;
}
.site-title {
color: #fff;
font-size: 24px;
margin: 0;
}
/* Add animation styles */
.hamburger-menu.active .line1 {
transform: translateY(9px) rotate(45deg);
}
.hamburger-menu.active .line2 {
opacity: 0;
transform: translateX(-100%);
}
.hamburger-menu.active .line3 {
transform: translateY(-9px) rotate(-45deg);
}
document.addEventListener('DOMContentLoaded', function () {
var hamburgerMenu = document.getElementById('hamburger-menu');
hamburgerMenu.addEventListener('click', function () {
this.classList.toggle('active');
});
});
このコードをコピペすれば、当サイトで動作しているメーニューボタンが完成です。
効率よくプログラミングをさせるなら専門知識をつける
第２のコツは、「ある程度の専門知識をつける」です。
ChatGPTにハイレベルなプログラミングをさせるなら、質の高いプロンプトを作る必要があります。そのためには、ある程度専門性があると良いでしょう。
とはいえ、従来のように熟練度を上げる必要はあまりないように思われます。ChatGPTが卓越したプログラマーだからです。しかし彼は言われたことしかやらないので、技術の大枠は押さえておきましょう。
ChatGPT4にアップグレードする
第３のコツは、「より賢いGPT-4を使う」です。
毎月20米ドルを支払うことで、ChatGPT4を使うことができます。GPT-4はGPT-3.5と比べてかなり性能が良くなっており、特にプログラミングにおいてもより精度の高いコードを生成させることができます。
「GPT-3ではエラーを吐いてしまうが、GPT-4ではエラーを吐かないコードを作れた！」という話をよく聞きます。
また、GPT-4は文脈の理解力が圧倒的です。GPTにプログラミングをさせる時、文字制限（トークン制限）があるため何回もやり取りをします。
GPT-4文脈を読んでユーザーの意図を的確に汲み取ってくれます。この能力はGPT-3.5よりも圧倒的に高いです。
Related Articles
