© Link and Motivation Group VSCodeExtensionでChatGPT使ってみた リンクアンドモチベーション フロントエンドエンジニア 野田 将太

2 © Link and Motivation Group 野田 将太 株式会社リンクアンドモチベーション フロントエンドエンジニア ● やってること ○ 個人の成長を支援する「ストレッチクラウド」の開発 ● 趣味 ○ 海外サッカー観戦 ● 最近のトピックス ○ 引越し準備で大忙し 自己紹介

3 © Link and Motivation Group リンクアンドモチベーションについて 327億円（2022年12月時点） （2022年12月時点） 11社

4 © Link and Motivation Group アジェンダ 1. 自己紹介 2. 作ったものの紹介 3. やり方紹介 4. まとめ

5 © Link and Motivation Group 作ったもの ChatGPTでVue2のコードをVue3（CompositionAPI）に置き換える拡張機能を作りました🎉🎉

6 © Link and Motivation Group 作った理由 1. Vue3のコードへの置き換えが面倒臭いので楽したかった 2. 拡張機能作ってみたかった（こっちが大きいかも） 3. ChatGPTを使った開発の知見がある程度あった

7 © Link and Motivation Group 1.環境準備 VSCode Extension GeneratorとYeomanを使います（定番ですね）

8 © Link and Motivation Group 2. コマンド追加 1. package.jsonにコマンドを追加する 2. src/extension.ts内で設定したコマンドを登録する

9 © Link and Motivation Group 3. コマンド実行時の処理（処理の流れ） 1. 編集中のエディターを表すオブジェクトを取得する 2. 1で取得したオブジェクトから選択中の文字列を取得する 3. OpenAI APIへリクエストする 4. 3のレスポンスで選択中の文字列を置換する

10 © Link and Motivation Group 3. コマンド実行時の処理 name 概要 selection 選択位置を表すSelection型のオブジェクトを返す document.getText Selection型のオブジェクトを引数にとり、選択位置の 文字列を取得する edit エディター内の編集を行う 1.編集中のエディターを表すオブジェクトを取得する vscode.window.activeTextEditorからTextEditor型のオブジェクトを取得する TextEditorクラスで実装されている変数・関数

11 © Link and Motivation Group 3. コマンド実行時の処理 2. 1で取得したオブジェクトから選択中の文字列を取得する ※選択されてない場合はselectionがundefinedになる

12 © Link and Motivation Group 3. コマンド実行時の処理 3. OpenAI APIへリクエストする configurationから取得したAPIKeyを使ってOpenAIAPIリクエストする

13 © Link and Motivation Group 3. コマンド実行時の処理 4. 3のレスポンスで選択中の文字列を置換する edit（TextEditorEdit型のオブジェクト）のreplaceで文字の置換を行う （任意の箇所に文字を追加する場合はinsert）

14 © Link and Motivation Group 課題 ● 公開できてない（間に合わなかった。。。） ● 変換するコード量が多いとAPIからのレスポンスが返却されるまでに時間がかかる ○ せめてローディングとか入れたい。そういうUIありましたっけ？ ● いくつかの候補から選ぶようなUIも試してみたい ○ 一発でAPIからなかなかいい感じのレスポンスは返ってくるけど、 そうじゃ無い時に候補欲しい ● 金がかかる

15 © Link and Motivation Group お知らせ ● エンジニアリングマネージャー ● プロダクトマネージャー ● テックリード ● サーバーサイドエンジニア ● フロントエンドエンジニア ● SRE ● データエンジニア ● CRM ● UXデザイナー 週１でテックブログ更新しています！ まずはカジュアルにお話しましょう！ ご連絡お待ちしております！ 全職種、積極採用中です！