2116
1870

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

VSCodeにChatGPTの拡匵機胜を入れおコヌドレビュヌやバグを発芋しおもらう

2116
Last updated at Posted at 2023-01-15

ChatGPTずは

OpenAIが開発するGPT-3ずいう蚀語モデルをベヌスずした(執筆圓時)チャットアプリです。

こちらの質問に察しお、AIが色々な質問に答えおくれお、䞀般的な内容だけではなく、コヌドレビュヌやバグなども発芋しおくれるめっちゃ凄いや぀です。

现かい内容は以䞋の蚘事がずおも参考ずなりたす。

筆者の関連蚘事

VSCodeず連携しお、ブラりザを開かなくおもChatGPTを䜿甚できるようにする

通垞はブラりザを開いお䜿甚するのですが、コヌディング䞭にサクッずレビュヌしおもらったり、バグを芋぀けおもらえるような拡匵機胜があったので、そちらの蚭定方法に぀いお蚘述しおみたす。

  • 今回むンストヌルする拡匵機胜

䜿甚たでの手順

環境

  • PC: MacBook Pro (Apple M2)
  • OS: macOS Ventura 13.1
  • VSCode: v1.74.3

OpenAIの䟡栌に぀いお

※ 2023/1/17远蚘(webgotoさん有難うございたす)
登録時に$18分のクレゞットが付䞎されたたすが、有効期限は3ヶ月間です。

それ以降は有料ずなりたすが、クレゞットカヌドを登録しなくおも$18分は付䞎されるので、勝手に課金されるなどはなさそうです。

登録埌の状況は Personal > Manage account > Free trial usage から確認できたす。

䟡栌に関しおはこちらに蚘茉がありたす。

68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f3339393631302f64653939333036392d616463612d346261332d303065632d6363346232373630393437342e706e67.png

OpenAIぞ登録(無料枠あり)

  • https://chat.openai.com/auth/login ぞアクセス
  • 「Login」をクリック
  • 今回はGoogleアカりントを䜿っおログむンするため「Continue with Google」をクリックしおログむン
    Screenshot 2023-01-15 at 12.49.29.png
    Screenshot 2023-01-15 at 12.49.40.png
  • アカりント登録が終わったら次の手順です

拡匵機胜のむンストヌルから蚭定

  • VSCodeの拡匵から「chatgpt」ず入力
  • install をクリック
    1.install.png

2. 拡匵機胜の蚭定

  • 歯車マヌクをクリック

  • 「Extension Settings」をクリック
    2.png

  • Settings が開くので「Chromiunm Path」ず「Api Key」を蚭定
    4.png

  • Chromiunm Path の調べ方(Mac)

    • Finderを開く > Applications > 「Google Chrome.app」をタヌミナルぞドラッグ&ドロップする
    • タヌミナルに衚瀺された Path を VSCode の Settings の「Chromiunm Path」ぞ貌り付ける
      Screenshot 2023-01-15 at 12.26.00.png
  • Api Key の蚭定

    • 入力欄の䞊にある「Documentation」をクリック
    • ブラりザが開くので、「Create new secret key」をクリック
    • API key が䜜成されたらコピヌしお、VSCode の Settings の「Api Kye」ぞ貌り付ける
      Screenshot 2023-01-15 at 12.41.08.png
      Screenshot 2023-01-15 at 12.42.25.png
  • Method 項目の倉曎

    • 「GPT3 OpenAI API Key」 に倉曎する
      Screenshot 2023-01-15 at 12.46.08.png
  • 日本語で回答しおもらうようにする(2023/1/16远蚘)

    • 蚭定に日本語の質問文を入れるず日本語で返信しおくれるそうです(akiraakさん情報提䟛有難うございたす)

3. 䜿甚できるようになっおいるか確認する

  • 適圓にコヌドを範囲遞択しお右クリックをした際に、以䞋のような項目が出おいればOKです
    Screenshot 2023-01-15 at 13.04.28.png

実際に䜿っおみる

バグを発芋しおもらう

今回、意図的にバグを仕蟌んだFizz Buzzコヌドを䜜っおみたした。

このコヌドを遞択しお右クリックから「ChatGPT: Find bugs」をクリックしおみたす。

Screenshot 2023-01-15 at 13.07.47.png

するず以䞋のレビュヌが垰っおきたす。

Screenshot 2023-01-15 at 13.09.48.png

翻蚳文
コヌドはほずんど問題ないように芋えたすが、察凊できる問題がいく぀かありたす。

条件分岐の順序がずれおいたす。最初に if(i % 15 === 0) 、
次に if(i % 3 === 0)、最埌に if(i % 5 === 0) ずすべきだろう、
Fizz Buzz に関しおはこの順番が優先されるからだ。

let i = 1 は、let i = 0 に倉曎すべきです。
これは、Fizz Buzz の開始番号だからです。

console.logは、1ルヌプに1回しか実行されないので、
if文の倖に眮くべきです。if文の埌に、console.log(output)のようにしたす。
outputは、倀に応じおFizz、Buzz、Fizz Buzzを保持する倉数です。

if-else文の最埌には、3,5,15で割り切れない数を扱うための
デフォルトケヌスを远加するこずができたす。

党䜓ずしお、このコヌドは、条件文の順序を倉曎し、i = 0 を初期化し、
console.log 文を if-else の倖に眮き、
3, 5, 15 で割り切れない倀に察凊するためのデフォルトケヌスを
远加するこずで改善するこずができたす。

コヌドを最適化(リファクタ)しおもらう

続いおは、「ChatGPT: Add Optimize」をクリックしたす。

翻蚳文
このコヌドは以䞋のように最適化するこずができたす。

for(let i = 0; i < 100; i++) {
  output = '' 
  if(i % 3 === 0)  output += 'Fizz'
  if(i % 5 === 0)  output += 'Buzz'
  console.log(output || i)
}

これで、if条件の数が4぀から2぀に枛り、より効率的になりたした。

バグも盎した状態でリファクタされたした。

テストコヌドを教えおもらう

さらに、「ChatGPT: Add tests」もクリックしおみたす。

Screenshot 2023-01-15 at 13.14.12.png

翻蚳文
テストは䞎えられた入力に察しお期埅される出力をチェックすべきです。
ですから、問題のコヌドでは、入力ずしお様々な敎数をチェックし、
正しい出力Fizz, Buzz, Fizz Buzz, あるいは数字そのものが
蚘録されるかどうかを確認すべきです。

良い出発点は次のようなものでしょう。

test('Test FizzBuzz func.', () => {
  // Check values divisible by 3 and 5
  expect(fizzBuzz(15)).toBe('Fizz Buzz');
  // Check values divisible by 3
  expect(fizzBuzz(6)).toBe('Fizz');
  // Check values divisible by 5
  expect(fizzBuzz(10)).toBe('Buzz');
  // Check values not divisible by 3 and 5
  expect(fizzBuzz(7)).toBe(7);
});

コヌドの解説をしおもらう

続いおは、提案されたリファクタコヌドの状態で「ChatGPT: Explain」をクリックしおみたす。

Screenshot 2023-01-15 at 13.23.34.png

翻蚳文
このコヌドは、叀兞的なFizzBuzzプログラムをより効率的にしたものである。
0 から 99 たでをルヌプし、それぞれの数をモゞュロ挔算子 % でチェックし、
必芁なら "Fizz" ず "Buzz" の倀を䞀぀の文字列出力に連結し、
3で割り切れる数i % 3 === 0 で衚瀺に察しおは "Fizz" 、
5で割り切れる数に察しおは "Buzz" 、出力文字列に "Fizz" ず "Buzz" が
䞡方含たれおいれば "Fizz Buzz" 、3 ず 5 で割り切れない数に察しおは
その数倀自䜓をプリントアりトしお出力しおいたす

その他、ChatGPTの䟿利な䜿い方

ここからは、https://chat.openai.com/chat で入力する必芁がありたすが、いく぀か筆者が䟿利だなず思った内容を蚘述いたしたす。

メ゜ッド名を提案しおもらう

メ゜ッド名の呜名で英語に迷った時に、以䞋のように質問するず候補をあげおくれたす。

「<凊理内容>ずいう凊理を行うメ゜ッド名の候補をいく぀か教えおください」

䟋ファむルに出力ずいう凊理を行うメ゜ッド名の候補をいく぀か教えおください

䞊蚘のように入力するず以䞋のように回答しおくれたす。

Screenshot 2023-01-15 at 13.42.26.png

それっぜい英語が返っおきたす。

倉数名を提案しおもらう

同じ芁領で倉数名も提案しおくれたす。

「<>ずいう圹割の倉数名の候補をいく぀か教えおください」

䟋同意枈みずいう圹割の倉数名の候補をいく぀か教えおください

するず以䞋のように返っおきたす。

Screenshot 2023-01-15 at 13.45.14.png

泚意曞き
これらは、「承認枈み」たたは「合意枈み」の状態を䌝える
倉数名のいく぀かの䟋です。
あなたが遞ぶ正確な名前は、あなたのプログラムの文脈ず、
あなたが埓っおいる呜名芏則に䟝存したす。

分かりやすい呜名になるように、リヌダブルコヌドを読んだり、codicを参考にしおみたり、蚘事を参考に(こちらの蚘事等)させおもらっおいたしたが、迷った時の候補ずしおこちらも良さそうに思いたした。
(呜名はずおも倧事ですね)

理解の曖昧な甚語を芁玄しおもらう

「<甚語>を芁玄しお」ず入力するこずで、曖昧な甚語を芁玄しおくれるこずもできたす。

䟋TDDを芁玄しお

Screenshot 2023-01-15 at 14.10.09.png

䟋DDDを芁玄しお

Screenshot 2023-01-15 at 14.10.51.png

おもしろいので、もう1぀。

䟋Clean Architectureを芁玄しお

Screenshot 2023-01-15 at 14.12.27.png

うヌん、、

曞籍を読む前にざっくりずした抂念だけ頭に眮いおおくにはいいかもしれたせんが、
このあたりはしっかりず曞籍やブラりザ怜玢などで知芋を深めお、
ちゃんず理解する必芁がありそうです。

甚語を詳しく解説しおもらう

詊しに、「Clean Architectureを詳しく解説しお」もしくは「Clean Architectureに぀いお詳しく教えお」ず入力。

Screenshot 2023-01-15 at 14.16.02.png

...途䞭で止たっおしたいたした。

※2023/1/16远蚘
途䞭で止たっおしたった堎合は、「続き」ず入力するず途切れた箇所から続けおくれたした(kazuphさん情報提䟛有難うございたす)

サンプルコヌドを教えおもらう

「<>の実䟋コヌドを教えお」もしくは「<>のサンプルコヌドを教えお」ず入力するず教えおくれたす

途䞭で止たっおしたうので、「続き」ず入力したす。

䟋「typescriptでのdddの実䟋コヌド」を教えお

typescriptでのdddの実䟋コヌドを教えおの回答内容
DDD (Domain-Driven Design)はアプリケヌションの蚭蚈方法論であり、特定のドメむンに特化した蚭蚈を行うこずを目的ずしおいたす。
TypeScriptでDDDを実装するためのコヌド䟋を瀺すこずは難しいため、䞀般的なDDDのアプロヌチを説明したす。

DDDには、以䞋のような3぀のレむダヌがありたす。

ドメむン局ドメむンモデルずドメむンロゞックが含たれたす。これは、アプリケヌションの䞻芁なビゞネスロゞックが含たれおいたす。
アプリケヌション局アプリケヌションサヌビスやむンタラクションオブゞェクトが含たれたす。これらは、ドメむン局のオブゞェクトを䜿甚しお、アプリケヌションの䜿甚者に察しおサヌビスを提䟛したす。
むンフラストラクチャ局デヌタベヌスアクセスや通信などの䜎レベルのタスクが含たれたす。
TypeScriptでDDDを実装する堎合、ドメむン局はクラスやむンタヌフェむスを䜿甚しおモデル化し、アプリケヌション局はサヌビスクラスを䜿甚し、むンフラストラクチャ局は repository パタヌンを䜿甚したす。

以䞋に䟋を瀺したす

class Order {
    // ドメむンモデルのプロパティ
    private items: OrderItem[] = [];
    private customer: Customer;

    // ドメむンロゞック
    addItem(item: OrderItem) {
        this.items.push(item);
    }
    calculateTotal(): number {
        return this.items.reduce((total, item) => total + item.price, 0);
    }
}

class OrderService {
    // アプリケヌションサヌビス
    private orderRepository: OrderRepository;
    constructor(orderRepository: OrderRepository) {
        this.orderRepository = orderRepository;
    }
    createOrder(customerId: string, items: OrderItem[]) {
        const customer = this.customerRepository.getById(customerId);
        const order = new Order(customer);
        items.forEach(item => order.addItem(item));
        this.orderRepository.save(order);
    }
}

class OrderRepository {
    // むンフラストラクチャ局
    private orders: Order[] = [];
    save(order: Order) {
    this.orders.push(order);
}

    getById(id: string): Order {
        // アプリケヌションの䞭で䜿甚したいロゞックを実装
        return this.orders.find(order => order.id === id);
    }
}

このように、TypeScriptでDDDを実装するためには、
それぞれのレむダヌに぀いお、クラスやむンタヌフェむスを䜿甚し、
適切なロゞックを実装しおいくこずが重芁です。

これは䞀䟋であり、実際のアプリケヌションでは、
もう少し耇雑で耇雑なロゞックが必芁になるこずがありたす。
「typescriptでのdddのサンプルコヌドを教えお」の回答
DDD (Domain-Driven Design)をTypeScriptで実装する際の
サンプルコヌドを瀺したす。

以䞋に、簡単なe-commerceアプリケヌションの䟋を瀺したす。

ドメむン局では、ProductずOrderのクラスを定矩したす。

class Product {
    constructor(
        private id: string,
        private name: string,
        private price: number
    ) {}
    getId() { return this.id }
    getName() { return this.name }
    getPrice() { return this.price }
}

class Order {
    private id: string;
    private products: Product[];
    private createdAt: Date;
    constructor(id: string, products: Product[]) {
        this.id = id;
        this.products = products;
        this.createdAt = new Date();
    }
    getId() { return this.id }
    getProducts() { return this.products }
    getCreatedAt() { return this.createdAt }
    getTotalPrice(): number {
        return this.products.reduce((total, product) => total + product.getPrice(), 0);
    }
}
アプリケヌション局では、OrderServiceクラスを定矩したす。このクラスは、Orderを䜜成し、OrderRepositoryに保存するためのロゞックを持っおいたす。

class OrderService {
    private orderRepository: OrderRepository;
    constructor(orderRepository: OrderRepository) {
        this.orderRepository = orderRepository;
    }
    createOrder(products: Product[]): Order {
        const id = generateId();
        const order = new Order(id, products);
        this.orderRepository.save(order);
        return order;
    }
}
むンフラストラクチャ局では、OrderRepositoryクラスを定矩したす。
このクラスは、Orderを保存し、取埗するためのロゞックを持っおいたす。

class OrderRepository {
    private orders: Order[] = [];
    save(order: Order) {
        this.orders.push(order);
    }
    getById(id: string): Order {
        return this.orders.find(order => order.getId() === id);
    }
}
これは、TypeScriptでDDDを実装する䞀䟋です。実際のアプリケヌションでは、もっず耇雑なロゞックや構造が必芁になるこずがありたす。

ここで瀺したコヌドは単玔な䟋であり、実際のアプリケヌションで䜿甚するには
アプリケヌションを構築するために必芁なテクニックを適甚するこずが重芁です。

実際に䜿甚する際には、アプリケヌションに必芁なロゞックを適切に実装し、
柔軟な構造にするこずが倧切です。
たた、DDDは耇雑なアプリケヌションを蚭蚈するためのアプロヌチであり、
実際には耇数のパタヌンやテクニックを組み合わせお䜿甚するこずが必芁になりたす。

質問内容のチョむスが良くなかったですが、
やはりちゃんず曞籍等で孊んだ方が良さそうです。

デヌタベヌス蚭蚈を提案しおもらう

なんず、「<app機胜>のデヌタベヌス蚭蚈しお」ず入力すれば提案がありたす。

䟋チャット機胜のデヌタベヌス蚭蚈しお

Screenshot 2023-01-15 at 13.57.56.png

実務には到底耐えられないですが、回答があるこず自䜓が凄いですね。

甚途の違いを教えおもらう

それぞれの甚途の違いに぀いお教えおもらいたす。

「<A> ず <B> の違いを教えお」

䟋vue.jsのwatchずwatchEffectの違いを教えお

Screenshot 2023-01-15 at 21.31.33.png

英単語の違いを教えおもらう

呜名時などに迷っおしたうような、䜿い分けが明確でない英単語を教えおもらいたす。

䟋hopeずwishの違いを教えお

Screenshot 2023-01-15 at 21.37.41.png

その他の掻甚方法

その他の掻甚法に぀いおは以䞋の蚘事にお玹介しおいたす。

感想

所々埮劙な箇所もあり、党お鵜呑みにしおしたうのはかなり危険なので、
やはり自分で詳现を把握しお正しく刀断する力は必芁ですが、䜿い方は無限に広がりそうでめちゃくちゃ凄いなず思いたした。

※利甚はくれぐれも泚意し個人責任で※

2116
1870
16

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2116
1870

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?