🙌

【便利すぎ...】ChatGPT – Work with VS Code 使ってみた

2024/11/26に公開

はじめに

2024年11月14日のアップデートにより、Macのデスクトップ版ChatGPTが、Visual Studio CodeやXcode、ターミナルなどと連携することができるようになりました!
本記事は、Visual Studio Codeとの連携を実際に試してる様子を書かせていただきました。
是非参考にしてみてください!

セットアップ方法

以下のOpenAIの記事にセットアップ方法が記載されています。
https://help.openai.com/en/articles/10128592-how-to-install-the-work-with-apps-visual-studio-code-extension

使ってみた

ChatGPTでVScodeと連携


ChatGPTのチャットにあるこちらのロゴをクリックし、VScodeを選択しましょう。

ファイルを開いた状態で、ChatGPTに指示してみた

このように、VScodeで開いているファイルについて直接問うような質問を投げても適切な回答をしてくれます。

※こちらのgifファイルが見づらいと思うので以下に開いているファイルのコードとChatGPTの回答を記載しておきます。

  • 開いているファイルのコード
Typescript
// interfaceでは複数のinterfaceを継承することができる
// クラスでは一つのクラスしか継承することができない

interface Person {
    readonly name: string;
    readonly age: number;

    greet(phrase: string): void;
}

let user1: Person;

user1 = {
    name: 'Max',
    age: 30,
    greet(phrase: string) {
        console.log(phrase + ' ' + this.name);
    }
}

user1.greet('Hello, ');

class Javar implements Person {
    name: string;
    age: number;
    constructor(name: string, age: number) {}

    greet(phrase: string): void {
        console.log(phrase + this.name);
    }
}

  • ChatGPTの回答
    以下のように、Javarクラスに性別を表す属性を追加しました。性別はgenderプロパティとしてstring型で定義しています。コンストラクタにgenderパラメータを追加し、初期化しています。
class Javar implements Person {
    name: string;
    age: number;
    gender: string; // 性別を表す属性を追加

    constructor(name: string, age: number, gender: string) {
        this.name = name;
        this.age = age;
        this.gender = gender;
    }

    greet(phrase: string): void {
        console.log(phrase + this.name);
    }
}

また、このクラスを使用してオブジェクトを作成する際には、以下のように性別を指定します:

const javarUser = new Javar('Alice', 25, 'female');
javarUser.greet('Hi, ');

このようにChatGPTはファイルに記載されているJavarクラスをしっかりと認識しています。

Discussion