ChatGPTのプログラミングにおいての使い方は？【GPT-3.5, GPT-4】

647, 2023-04-16

ChatGPTのプログラミングにおいての使い方

筆者がChatGPT4を使い始めてそれなりに日数が経ちました。
ここまで得られたChatGPT4のプログラミングにおいての使い方をまとめたいと思います。

この記事はこれからChatGPTをプログラミングで使ってみたいという人の時間短縮に使えるはずです。
筆者のChatGPTのノウハウをまとめていますのでぜひ読んでみてください。

【この記事でわかること】
ChatGPTの基礎的な使い方
ChatGPTのプログラミングでの応用の仕方

まずはChatGPTの基本的な使い方について

ChatGPTは会話型のAIです。
話題を最初に投じてその話題に沿ってAIと会話を深めて、期待する出力を得る、というのが基本的な流れになります。

そのため「命令文一発で出力を貰う」という使い方にはあまり向いていません。
もちろん命令一発で期待する出力を得られることが大半ですが、得られない場合もあります。
期待する出力を得られない場合は会話によってAIを誘導、修正して出力を加工していきます。

つまりChatGPTは基本的には

会話のテーマとなる質問を投げる
期待する出力を得られるように会話によって修正していく

というのがベーシックな流れになります。

「＋」ボタンで新しい会話を始める

ChatGPTと新しい会話を始めるには左上の「＋　New chat」ボタンを押します。
これを押すとまっさらな画面とプロンプトが立ち上がります。

「Model」の選択

画面右側の上部に「Model」というセレクトダウンメニューがあります。
ここから使用したいモデルを選択します。
2023年現在では無料版では

Default(GPT-3.5)
Legacy(GPT-3.5)

の2つが使えます。
デフォルト版とレガシー版になりますがデフォルト版で問題ないでしょう。

またChatGPT PLUSとしてOpenAIのサブスクリプション（月額性プラン）に加入している場合はここのメニューから「GPT-4」を選択できます。

現在はGPT-3.5は高速に動作しますがGPT-4は若干動作がもっさりしています。
これは改善が期待されます。

GPT-3.5とGPT-4の性能の違い

GPT-3.5とGPT-4ですが、性能の違いはどれほどのものでしょうか？
これは使ってみるとわかりますが、両者では同じ命令でも出力結果がかなり違ってきます。

質的にはもちろんGPT-4の方が良いことが多いです。
またGPT-4はGPT-3.5に比べて誤情報などの間違いも少なくなっているということで、GPT-4を使えるのであればGPT-4を使うようにすれば問題ないでしょう。

簡単な命令であればGPT-3.5でも問題ない場合があります。

ChatGPTをプログラミングで使うコツ

ChatGPT4ですが、現在ではプログラミングのサポートにおいてかなり特筆すべき威力を発揮していると思われます。
これは実際に筆者が使ってみた感想です。

筆者が使ってみた範囲では

簡単なライブラリの作成
Vueコンポーネントの作成
関数の作成
HTML/CSSによるUIの作成

など色々なシーンでGPT-4が使えます。
特に4行ぐらいの命令文（プロンプト）で簡単なライブラリが一本作成できたのは感動しました。

またGPT-4は数学にも強いので数学的な知識が必要なコードを書かせるのにも威力を発揮することがあります。
たとえば「増加する整数の変数の値に応じて16進数のカラーコードを数学的に生成する関数を作る」という命令では数学的なコードを生成してくれます。
このため数学が苦手なプログラマーでも「数学的な処理を使ったコード」を書けるようになります。
これは個人開発などでは特筆に値します。かなり便利と言えます。

今までは数学的な処理を使ったコードは数学的な素養のあるプログラマーにしか書けませんでした。
しかしGPT-4によってそれが変わり、数学的な素養が無い人にもコードを生成できるようになったわけです。
例えるなら計算が出来ない人が電卓を手に入れたみたいなものです。

もしあなたが数学的な素養が無く、しかし数学的にエレガントなコードが欲しいと思っているならGPT-4を使うことをおすすめします。

GPT-4を使ったプログラミングのコツですが、これはまとめると以下になります。

命令は明確に具体的にする
欲張らずに分割的に命令する
演じさせる役柄を設定する

命令は明確に具体的にする

GPT-4が生成するコードは命令を入力にして行われます。
つまり命令文の質が低いと出力結果の質や精度も低くなるということです。

ですので命令文は意味を明確にしておきましょう。
必要とされるのは専門的なプログラミングの知識と国語の知識になります。

たとえばゲーム開発で「time」というフレーム数をカウントする変数を使って先述の例のようにカラーコードを生成したい場合です。
こういう場合の命令文は

timeに応じてカラーコードを生成してください。

という命令文ではなく、より具体的に

ゲームアプリを開発しています。
ゲーム内のフレーム数をカウントする変数timeの値に応じて、
数学的に16進数のカラーコードを生成する関数をJavaScriptで書いてください。

というような命令にします。
そのコードが必要とされる背景（ここではゲームアプリの開発）やtimeの役割と意味、そしてどのように（数学的に）なにを（16進数のカラーコードを生成する関数）なにで（JavaScriptで）生成するか指定します。

ここまで具体的に命令することでGPT-4の出力の精度は上がっていきます。
具体的と言っても行数にすれば1～2行です。
100行のコードを1から書くことを考えれば大変少ない労力でコードを生成可能です。

ちなみにこの命令でGPT-4にコードを生成させると以下のような結果になります。

以下のJavaScript関数は、ゲーム内のフレーム数をカウントする変数timeの値に基づいて、数学的に16進数のカラーコードを生成します。この関数は、timeを入力として受け取り、6桁の16進数カラーコードを返します。

function generateColorCode(time) {  
  // timeを0〜255の範囲に制限します。  
  const red = time % 256;  
  const green = (time * 2) % 256;  
  const blue = (time * 3) % 256;  

  // 各色の値を16進数に変換します。  
  const redHex = red.toString(16).padStart(2, '0');  
  const greenHex = green.toString(16).padStart(2, '0');  
  const blueHex = blue.toString(16).padStart(2, '0');  

  // 16進数のカラーコードを組み立てます。  
  const colorCode = `#${redHex}${greenHex}${blueHex}`;  

  return colorCode;  
}  

この関数を使用すると、異なるtime値に対して異なるカラーコードが生成されます。timeが増加するにつれて、カラーコードは数学的に連続して変化します。

この命令を変形して例えば以下のような命令にします。

引数time（ゲーム内のフレームのカウント数）を取り、そのtimeから動的に
16進数のカラーコードを数学的に生成し、色がゆっくり変化するように生成する関数を
JavaScriptで作りたいです。
変化する色は赤→オレンジ→黄→黄緑→緑→水色→青→紫→赤という感じでループします。

先ほどと比べて条件が加わってよりコードが複雑になりそうです。
これをGPT-4に命令すると以下のようなコードの生成を始めます。

function getColorFromTime(time) {  
  const colors = [  
    [255, 0, 0],     // 赤  
    [255, 165, 0],   // オレンジ  
    [255, 255, 0],   // 黄  
    [173, 255, 47],  // 黄緑  
    // 中略  
  ]  
  // 中略  
}

colorsのようなカラーマップを使うことは想定していないので生成をストップし、以下の命令を会話的に新しくGPT-4に投げます。

数学的に生成してください。

そうするとGPT-4は以下の生成を行ってくれました。

数学的に生成するために、以下のJavaScript関数を作成しました。この関数は、引数 time に基づいて、動的に16進数のカラーコードを生成し、指定された色の順序でゆっくり変化します。Math.sin 関数を使用して、周期的に変化する値を計算し、それらの値をRGBカラーコードに変換しています。

function getColorFromTime(time) {  
  const frequency = 0.01; // 周波数を調整して、変化速度を制御します  

  // 各色の成分（R、G、B）を周期的に変化させます  
  const red = Math.sin(frequency * time + 0) * 127 + 128;  
  const green = Math.sin(frequency * time + 2 * Math.PI / 3) * 127 + 128;  
  const blue = Math.sin(frequency * time + 4 * Math.PI / 3) * 127 + 128;  

  // RGB値を16進数に変換し、カラーコードを生成します  
  const color = (Math.round(red) << 16) + (Math.round(green) << 8) + Math.round(blue);  
  const colorCode = '#' + ('00000' + color.toString(16)).slice(-6);  

  return colorCode;  
}  

この関数を使用して、ゲーム内のフレームのカウント数に基づいて色をゆっくり変化させることができます。frequency の値を調整することで、色の変化速度を制御できます。

カラーコードの生成が数学的にスムーズになるように行われているのがわかります。
このようにGPT-4は単発の命令では期待する出力を得られない場合があるので、それを会話によって修正していきます。

欲張らずに分割的に命令する

GPT-4は現在の性能では例えばアプリを一本作らせる、という使い方はまだ一考の余地がある状態です。
簡単なスクリプト程度であればプロンプト数行で作ってくれますが、それなりの中規模以上のアプリになるとまだそこまでの生成はできないのが現状のようです。

ですので中規模以上のアプリの開発では、命令を分割し、局所的にコードを生成させた方が良いと思われます。
局所的なコードとは

簡単なライブラリの生成
基本となるコンポーネントの生成
関数の生成
部分的なコードの生成

などです。
またGPT-4ではバグの検出とフィックスも行えます。

バグの検出
バグのフィックス

バグを検出させる場合はGPT-4にコードを食わせる必要がありますのでこの辺は会社と相談してください。
（機密コードの漏洩などの問題にある場合があります）

GPT-4はバグのフィックスをしてくれるのが非常に助かります。
コードを食わせるとそのコードを修正して出力してくれます。
その場合は

コード

上記のコードのバグを見つけて修正してください。

と命令します。
これだけでバグを見つけてくれる場合もありますし、より精度を上げたい場合は情報を加えることでより出力の質が向上します。

コード

上記のコードには〇〇のバグがあります。
おそらく〇〇が原因と思われますが、バグを見つけて修正してください。

演じさせる役柄を設定する

GPT-4の出力ですが、GPT-4に何のキャラクターを演じさせるかでも変わってきます。
たとえばHTML/CSSでUIを作る場合ですが、単純な命令とキャラクターを設定した命令とでは出力の結果が変わってくることがあります。

HTML/CSSのUIを作らせるのでこの場合の適当な役柄は「プロのデザイナー兼コーダー」になると思います。
つまり

あなたはプロのデザイナー兼コーダーです。
HTML/CSSでお洒落でかっこいいブレッドクラムを書いてください。

というような命令にします。
こうするとGPT-4がHTML/CSSでブレッドクラム（パンくずリスト）を書いてくれます。

余談ですがGPT-4にUIを作らせることができるので、デザインが苦手なプログラマーでもそれなりの画面を作ることが可能になっています。
これは素晴らしいことだと思います。
多くのプログラマーが持っているであろうデザインについてのコンプレックスをAIが解消してくれるわけですね。

おわりに

今回は簡単にですがChatGPTのプログラミングにおいての使い方を解説しました。
AIの時代はワクワクしますよね。
なにか参考になれば幸いです。

ChatGPTのプログラミングにおいての使い方は？【GPT-3.5, GPT-4】

目次

関連記事