ChatGPTで開発する

ChatGPTは、世界中の開発者が日常的にコード生成に使用している素晴らしいツールです。しかし（言語モデルであり、プログラミングエンジンではないため）、独自の癖や制限があります。このガイドでは、それらをどのように回避するか、そしてChatGPTがNoodlと素晴らしいペアリングである理由を見ていきます。

このガイドは、開発プロセスの一部としてhttp://chat.openai.comを使用する方法についてです。

ChatGPTを使うタイミング

ChatGPTのあまり知られていない制限の一つに、非常に小さいトークンメモリを持っていることがあります。詳細は技術的で、このガイドの文脈ではあまり興味深くありませんので、あまり詳しくは触れません。本当に知っておくべき唯一のことは、ChatGPTは金魚の記憶を持っており、あまりにも多くの情報を与えると、かなり早く物事を忘れ始める（自分の考えを含む）ということです。

これは、ChatGPTが多くの異なる動きのある大規模なアプリケーションコードを扱うのが苦手であることを意味します。ChatGPTを使ってゼロからアプリケーションをコーディングするには、AIが作るすべての間違いを補うために、ゼロからアプリケーションをプログラムする方法を知っている必要があります。

小さいメモリのもう一つの影響は、提供できる指示の量に制限があることです。ChatGPTは、達成したいことを非常に詳細に説明するときに最適な解決策を提供しますが、完全なアプリケーションには多くの説明が必要です。

ChatGPTから良いコードを得る最良の方法は、実際にはアプリケーションをより小さなモジュール式の部品に分割し、AIでそれらを生成し、自分でそれらを組み合わせることです。

ここでNoodlが輝きます。Noodlの基本概念の一つが、アプリケーションをより小さな再利用可能なコンポーネントに分割することであるため、私たちはChatGPTに全アプリを生成してもらう必要はありません。私たちは、単にそれに退屈で、面倒で、あるいはもっと複雑な機能を行ってもらうだけです。これには少しのプログラミングの知識が必要ですが、Noodlの視覚的およびテキストベースのプログラミングのシームレスな組み合わせのおかげで、大規模な複雑なアプリを書く方法を知る必要はなく、代わりに手元の機能を理解することに集中できます。

note

このガイドは一般的にChatGPTについてですが、Noodlの経験があるとより多くのことを得ることができます。基本ガイドをチェックするか、Noodlエディターでインタラクティブチュートリアルを最初に行うことをお勧めします。

TL;DR:

ChatGPTは、FunctionノードとScriptノード用のコードを生成するのに適しており、APIへの接続、外部ライブラリの使用、データの集約、アプリのチャンクの解決に役立ちます。

関数を別々のFunctionノードにモジュール化するか、コンポーネント内で複数のFunctionノードをシリーズで組み合わせることが良いアイデアです。これにより、ChatGPTはより小さい範囲で輝くことができ、Noodl内での再利用性が大きく向上します。

ChatGPTはまた、会話を持つことができる検索エンジンとしても素晴らしいです。ChatGPTモデルは2021年までのデータでトレーニングされているため、現在のイベントを調査するのには向いていませんが、Noodlグラフに簡単に翻訳できるより一般的な開発パターンには非常に強力です。

余談ですが、私たちは完全なNoodlノードグラフを生成する実験を行ってきましたが、限られたメモリのために現在のドキュメントを記憶するのはあまり得意ではありません。

コード生成のためのプライミング

ChatGPTをコード生成に使用したい場合、与えられた

コードを修正する準備が必要です。それが現在のAIの状態です。しかし、いくつかの指示を最初にチャットで送ることで、修正の必要性を最小限に抑えることができます。これにより、ChatGPTに少しの文脈を与えて、Noodl関数がどのように見えるか、できること/できないことのルール、およびノードへの入力と出力の作成方法を理解させることができます。これを_プライマー_と呼び、ここに私たちが実験しているものがあります：

こんにちはChatGPT。こちらがあなたの指示です。すべてに従ってください。

- Noodl関数を書いていきます。
- Noodl関数の入力は"Inputs.InputName"の形式に従います。
- Noodl関数の入力は読み取りのみで、書き込まれることはありません。
- Noodl関数の出力は"Outputs.OutputName = value"の形式に従います。
- Noodl関数の変数は出力を格納しません。
- Noodl関数からの信号送信は"Outputs.SignalName()"の形式に従います。
- 信号には値を渡すことができません。すべての出力値はNoodl関数の出力として設定されなければなりません。
- Noodl関数の入力と出力はグローバルです。
- Noodl関数はimport文を使用しません。
- Noodl関数はexport文を使用しません。
- Noodl関数はCDNからのリソースを使用できます。
- Noodl関数は"fetch"でAPIエンドポイントにアクセスできます。
- 定数をNoodl関数の入力として定義します。
- Noodl関数は以下の形式に従います：

```js
const inputName = Inputs.InputName;

// 入力に値があるかチェックし、そうでなければリターン
if (!inputName) return;

// 関数ロジックを実行
```

指示が明確であれば"Okidoki"と返信し、そうでなければ明確にしてください。

このプライマーはこれまでのところ素晴らしい結果をもたらしています - 多くの場合、スニペットはまったく修正せずに機能しました。しかし、それを修正したり、別のアプローチを試したりすることをためらわないでください。ChatGPTは複雑な技術であり、新しい技術や戦略が常に発見されています。何か興味深いことを見つけたら、是非Discordサーバーのコミュニティと共有してください。

コードのプロンプトに関するヒントとコツ

プライマーの利点

上記のプライマーを使用すると、非常に雑なプロンプトを使用しても、依然として有用な結果を得ることができます：

プライマーのおかげで、この結果はFunctionノードに修正せずにそのままコピーできます。ここでは、すべての入力と出力を持つノードグラフでの見た目です：

必要なのはAPIキーのみでした。素晴らしいです！

詳細の追加

上記の例は非常にシンプルです。求める機能が複雑になるほど、より具体的である必要があります。ChatGPTは想像力豊かであり、できるだけ解釈の余地を少なくすることが良いアイデアです。

これは私の3回目の試みです。最初の試みでは、それにユーザーにその位置を_prompt_するように頼みました。それから、Window.prompt()メソッドを使用するソリューションを私に与えました。これは、ユーザーが自分でlatitudeとlongitudeを入力できるテキスト入力を持つシステムダイアログを開きます。Window.prompt()が真剣にプロジェクトで使用された最後の時は、スマートフォンがまだ新しく革新的な発明でした。

2回目の試みでは、それに_ユーザーの位置を取得する_ように頼みました。それから、latitudeとlongitudeがuserオブジェクトの一部であると仮定しました。十分に具体的ではありませんでした。

3回目の試みは、少なくとも一見すると、完璧に見えます。ユーザーの位置は今自動的に取得されます。

位置だけが問題ではありませんでした。もう少し詳しくコードを見ると、ChatGPTがプロンプトに従わ

なかった場所がいくつかあります。user.firstNameやuser.lastNameが欠けている場合にOutputs.UserFailed()を送信するように頼みました。代わりに、正しいIDのユーザーを見つけることができない場合にUserFailed信号を送信します。また、MapboxDataとFullNameを別々に送信します。_ほとんど_私たちが言ったことを行います。このような不一致は、生成されたコードのどこにでも発生する可能性がありますので、得たコードを常に見直すことが良いアイデアです。

これらのオフプロンプトの瞬間は、必ずしも悪いことではありません。例として、UserFailed信号を送った後に関数からreturnを使って退出するようにChatGPTに頼まなかったにもかかわらず、関数を続けて実行したくないと仮定してくれたことが賢明でした。

部分的な書き直し

コードの一部が私たちに合わないと感じた場合は、いつでもChatGPTにそれを反復してもらうように頼むことができます。

これで、関数が適切なタイミングで終了し、データを適切に出力しています。fullNameを構築するときにfirstNameとlastNameの不必要なチェックがまだあります。これらはエラーを投げたり、他の方法で関数を台無しにしたりすることはありませんし、パフォーマンスへの影響も無視できるほど小さいですが、コードをきれいに保ちたい場合は、これら2行を手動で削除することができます。

反復的なプロンプト

さらに多くの制御を望む場合は、より小さなステップで関数をプロンプトすることができます。ビューポートの幅に基づいてデバイスの一般化を行う関数を生成しましょう。

私がwidthsを求めたのに、高さも与えられたことに注意してください！これをはっきりさせましょう。

ここで、私は2つの間違いを犯したことに気づきます。まず、ChatGPTが少し賢くなって、デスクトップ範囲内の値をチェックしようとすると仮定していました。代わりに、ブラウザがリサイズされた場合に失敗する特定の幅に一致しようとします。2つ目のエラーは、IsDesktopブール値を出力することでした。与えられたサイズで範囲をチェックする場合、デスクトップとモバイルの間にギャップがあります。怠惰な修正をしましょう。

これは、遠くから完璧な関数ではありません。良いことに、このプロンプトは、完璧な検出を提供する関数を持つまで延々と続けることができます。金魚のトークンメモリを覚えておいて、しばらくするとAIを再プライムする必要があるかもしれないということを忘れないでください。

ChatGPTのメモリをリフレッシュする

以前にChatGPTに伝えたことからあまりにも遠くに逸れる答えを得始めた場合、メモリをリフレッシュすることが良いアイデアです。これは、新しいチャットを開始してプライマーを再送することで簡単に行うことができます。その後、作業中の関数を貼り付け、関数をどのように変更したいかについての新しい指示と一緒に送ることができます。

研究アシスタント

コードを生成する以外の興味深い使用法として、研究に使用することがあります。関連する情報を見つけることは複雑になることがあり、特により抽象的な概念についてはそうです。ChatGPTは、キックスタートを与えるのに適しています：

同様に、簡単にフォローアップの質問をすることができます：

![]

(/docs/getting-started/ai-assisted-dev/chat-gpt/research-2.png)

（これは2021年以降に新しいAPIがある場合、またはそれらのいずれかが価格を更新した場合には最良の例ではないかもしれませんが、ほとんどの場合うまく機能します！）

探検の時代

ChatGPTについて多くが知られていますが、AIマップ上にはまだ多くの暗いスポットがあります。新しい戦略、プライマー、ヒント、コツは毎日発明され、発見されています。ここで触れていない何かを見つけ、共有したいと思うなら、是非Discordサーバーの#chat-gptチャンネルに参加してください。探検は一緒にする方が楽しいですし、この技術の新しい段階では、私たちは皆、お互いの肩の上に立っています。