こんにちは！
KTgraphのKEISUKEです。
本日は開発効率の向上を目的とした、Visual Studio Code(VSCode)とChatGPTの連携のお話をしようと思います。
多くの開発者の方がVSCodeを使用していることと思います。ChatGPTのプラグイン「GenieAI」を導入することでコーディング（実装）がかなり楽になりますので、ぜひ参考にしていただければと思います！
Genie AIについて
GenieAIはMicrosoft社が公開しているVisual studio code（VSCode）の拡張機能として利用でき、VSCode内でChatGPTにアクセスすることでコード生成など様々な開発補助を行ってくれるVSCodeの拡張機能です。
利用には、OpenAIのAPIキーが必要となります。現在は無料枠がありますが、使用にはすこし注意が必要ですね。
事前準備
事前準備として、APIキーが必要になるので、OpenAIの登録からAPIキーの発行まで進めていきます。
私が登録した時点（2023年4月）では無料枠が「$5.00」分付与されるので、この枠内での利用なら完全無料です！(有効期限は2023年8月1日)
余談ですが、実際に使った感じのトークン使用料ですが、ChatGPTで1000文字程度のやりとり毎に「0.01ドル」を消費しているようでした。
無料枠にはいろいろと制限があるので、とりあえず無料枠で使ってみて、良さそうなら今後も有料で使っていくくらいのスタンスでよいかと思います。
また、APIリファレンスには導入からのサンプルコードも記載されているので、Pythonなどで試しにAPIを使ったサンプルアプリを作ってみるのもよいですね。
OpenAIの登録
まずは、OpenAIのAPIキーが必要なので、OpenAIのAPIリファレンスページより登録(Sign UP)を行いましょう！
登録にはGoogleアカウントと電話番号が必要です！
APIキーの取得
登録後は「overview」ページの右上にあるプロフィール画像をクリックします。
ドロップダウン メニュー内の「View API keys」をクリックてAPIキー画面を表示します。
ページ内で「Create new secret key」ボタンがあるので、これをクリックします。
すると、ポップアップが表示され、APIキーが表示されるの、これを大切に保管しておきましょう！
APIキーはこのあとのVSCodeで使用します。
※APIキーが外部に漏れたりすると不正利用や、悪用に繋がりますので、絶対に安全な場所へ保管しておきましょう！
VSCodeに追加
続いてVSCodeでChatGPTを使うためにGenie AI（拡張機能）をインストールします。
VScodeの左サイドバーのマーケットプレイスをクリックして、検索枠に「GenieAI」と入力して検索しましょう。
検索結果に ↓ のように「Genie AI」が表示されると思うので、これをクリックして「インストール」しましょう。
正常にインストールできていたら、このようにサイドバーにGenie AI（ランプアイコン）が表示されています。
※もし表示されていなければVSCodeを終了して再起動してみましょう。
Genie AI活用方法
GenieAIの使い方を説明します。
サイドバーのGenie AI（ランプアイコン）をクリックしましょう。
すると左にプロンプトを入力できるエリアが表示されます。
「Temperature」はGPTの正確さを指定できます。
「Precise（正確）」、「Balanced（バランス）」、「Creative（創造的）」
コード生成する場面がほとんどだと思うので、ここでは「Precise（正確）」を指定しとくのが吉かと思います。
あとは入力エリアにChatGPTで出力させたい命令を書いて、「Ask」をクリックします。
すると自動でGPTがコーディングしてくれるので、簡単にコード生成できます。
例として、Vueでお問い合わせフォームを実装してもらったサンプルを記載します！
項目は最低限ですが、項目を追加する命令を加えて実行すると新たにコーディングしてくれるので、便利ですね！
Vue以外でもお好みの言語で自動コーディングしてくれるので、言語の学習にもおすすめの拡張機能になります。
<template>
<div>
<form @submit.prevent="onSubmit">
<label for="name">名前</label>
<input type="text" v-model="name" id="name" />
<label for="email">メールアドレス</label>
<input type="email" v-model="email" id="email" />
<label for="message">問い合わせ内容</label>
<textarea v-model="message" id="message"></textarea>
<button type="submit">送信</button>
</form>
</div>
</template>
<script>
export default {
data() {
return {
name: '',
email: '',
message: ''
}
},
methods: {
onSubmit() {
// 問い合わせフォームをサーバーに送信する処理を記述
}
}
}
</script>
さいごに
さて、いかがだったでしょうか。
今回は巷で話題のChatGPTをVSCode上で動作させる内容をお伝えしました。
GPTを生かすには、どのようなプロンプト（命令）を与えてやるかや、どの程度の情報を与えてやるかが肝になります。
いろいろと試して自分にあった使い方を見つけてもらえればと思います。
開発補助以外にもAPIを使えば、GPTを使ったオリジナルアプリも作れるので、ぜひ自分の開発に生かしてみてください！
それでは良きフォトライフを！
出張撮影については下記を御覧ください！！
KT-GraphのInstagramをチェック！！
KT-GraphのTwitterをチェック！！
LINEへのお友達追加もお願いします！！