$30 off During Our Annual Pro Sale. View Details »

VSCodeExtensionでChatGPT使ってみた/VS Code Meetup vol...

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/

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

More Decks by リンクアンドモチベーション

Transcript

  1. 2 © Link and Motivation Group 野田 将太 株式会社リンクアンドモチベーション フロントエンドエンジニア

    • やってること ◦ 個人の成長を支援する「ストレッチクラウド」の開発 • 趣味 ◦ 海外サッカー観戦 • 最近のトピックス ◦ 引越し準備で大忙し 自己紹介
  2. 4 © Link and Motivation Group アジェンダ 1. 自己紹介 2.

    作ったものの紹介 3. やり方紹介 4. まとめ
  3. 6 © Link and Motivation Group 作った理由 1. Vue3のコードへの置き換えが面倒臭いので楽したかった 2.

    拡張機能作ってみたかった(こっちが大きいかも) 3. ChatGPTを使った開発の知見がある程度あった
  4. 8 © Link and Motivation Group 2. コマンド追加 1. package.jsonにコマンドを追加する

    2. src/extension.ts内で設定したコマンドを登録する
  5. 9 © Link and Motivation Group 3. コマンド実行時の処理(処理の流れ) 1. 編集中のエディターを表すオブジェクトを取得する

    2. 1で取得したオブジェクトから選択中の文字列を取得する 3. OpenAI APIへリクエストする 4. 3のレスポンスで選択中の文字列を置換する
  6. 10 © Link and Motivation Group 3. コマンド実行時の処理 name 概要

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

    APIへリクエストする configurationから取得したAPIKeyを使ってOpenAIAPIリクエストする
  8. 13 © Link and Motivation Group 3. コマンド実行時の処理 4. 3のレスポンスで選択中の文字列を置換する

    edit(TextEditorEdit型のオブジェクト)のreplaceで文字の置換を行う (任意の箇所に文字を追加する場合はinsert)
  9. 14 © Link and Motivation Group 課題 • 公開できてない(間に合わなかった。。。) •

    変換するコード量が多いとAPIからのレスポンスが返却されるまでに時間がかかる ◦ せめてローディングとか入れたい。そういうUIありましたっけ? • いくつかの候補から選ぶようなUIも試してみたい ◦ 一発でAPIからなかなかいい感じのレスポンスは返ってくるけど、 そうじゃ無い時に候補欲しい • 金がかかる
  10. 15 © Link and Motivation Group お知らせ • エンジニアリングマネージャー •

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