VSCodeExtensionでChatGPT使ってみた/VS Code Meetup vol25_Link and Motivation

【VS Code Meetup #25】
リンクアンドモチベーション登壇資料（2023/06/26）

『VSCodeExtensionでChatGPT使ってみた』

##vscodejp #リンクアンドモチベーション #リンモチ
=============================================
【イベント情報】
■イベントページ
　https://vscode.connpass.com/event/282553/

【株式会社リンクアンドモチベーション】
■お問い合わせ
　engineer_pr@lmi.ne.jp
■Entrancebook
　https://note.com/lmi/n/n179505e048f4
■テックブログ
　https://link-and-motivation.hatenablog.com/
=============================================

Transcript

1. © Link and Motivation Group VSCodeExtensionでChatGPT使ってみた リンクアンドモチベーション フロントエンドエンジニア 野田 将太
2. 2 © Link and Motivation Group 野田 将太 株式会社リンクアンドモチベーション フロントエンドエンジニア • やってること ◦ 個人の成長を支援する「ストレッチクラウド」の開発 • 趣味 ◦ 海外サッカー観戦 • 最近のトピックス ◦ 引越し準備で大忙し 自己紹介
3. 3 © Link and Motivation Group リンクアンドモチベーションについて 327億円（2022年12月時点） （2022年12月時点） 11社
4. 4 © Link and Motivation Group アジェンダ 1. 自己紹介 2. 作ったものの紹介 3. やり方紹介 4. まとめ
5. 5 © Link and Motivation Group 作ったもの ChatGPTでVue2のコードをVue3（CompositionAPI）に置き換える拡張機能を作りました🎉🎉
6. 6 © Link and Motivation Group 作った理由 1. Vue3のコードへの置き換えが面倒臭いので楽したかった 2. 拡張機能作ってみたかった（こっちが大きいかも） 3. ChatGPTを使った開発の知見がある程度あった
7. 7 © Link and Motivation Group 1.環境準備 VSCode Extension GeneratorとYeomanを使います（定番ですね）
8. 8 © Link and Motivation Group 2. コマンド追加 1. package.jsonにコマンドを追加する 2. src/extension.ts内で設定したコマンドを登録する
9. 9 © Link and Motivation Group 3. コマンド実行時の処理（処理の流れ） 1. 編集中のエディターを表すオブジェクトを取得する 2. 1で取得したオブジェクトから選択中の文字列を取得する 3. OpenAI APIへリクエストする 4. 3のレスポンスで選択中の文字列を置換する
10. 10 © Link and Motivation Group 3. コマンド実行時の処理 name 概要 selection 選択位置を表すSelection型のオブジェクトを返す document.getText Selection型のオブジェクトを引数にとり、選択位置の 文字列を取得する edit エディター内の編集を行う 1.編集中のエディターを表すオブジェクトを取得する vscode.window.activeTextEditorからTextEditor型のオブジェクトを取得する TextEditorクラスで実装されている変数・関数
11. 11 © Link and Motivation Group 3. コマンド実行時の処理 2. 1で取得したオブジェクトから選択中の文字列を取得する ※選択されてない場合はselectionがundefinedになる
12. 12 © Link and Motivation Group 3. コマンド実行時の処理 3. OpenAI APIへリクエストする configurationから取得したAPIKeyを使ってOpenAIAPIリクエストする
13. 13 © Link and Motivation Group 3. コマンド実行時の処理 4. 3のレスポンスで選択中の文字列を置換する edit（TextEditorEdit型のオブジェクト）のreplaceで文字の置換を行う （任意の箇所に文字を追加する場合はinsert）
14. 14 © Link and Motivation Group 課題 • 公開できてない（間に合わなかった。。。） • 変換するコード量が多いとAPIからのレスポンスが返却されるまでに時間がかかる ◦ せめてローディングとか入れたい。そういうUIありましたっけ？ • いくつかの候補から選ぶようなUIも試してみたい ◦ 一発でAPIからなかなかいい感じのレスポンスは返ってくるけど、 そうじゃ無い時に候補欲しい • 金がかかる
15. 15 © Link and Motivation Group お知らせ • エンジニアリングマネージャー • プロダクトマネージャー • テックリード • サーバーサイドエンジニア • フロントエンドエンジニア • SRE • データエンジニア • CRM • UXデザイナー 週１でテックブログ更新しています！ まずはカジュアルにお話しましょう！ ご連絡お待ちしております！ 全職種、積極採用中です！