freks blog

about

GitHub Copilotの使い方をおさらい

created: 2024-03-28
おすすめ記事: 出会ってよかったプログラマー本

GitHub Copilotの使い方をおさらいしてみます
手になじむませたいですね

事前準備

始めるのは GitHub Copilot · Your AI pair programmer から始めてください
VSCodeに GitHub Copilot - Visual Studio Marketplace を入れて試します

使い方

  • コードを書いていると、次のコードがサジェスチョンされる
  • Copilotのコードが欲しいときに Ctrl + Enter でサジェスチョンを表示
  • Ctrl + Shift + i でプロンプトを開いて質問
  • 左のサイドバーの Chat: Copilot をクリックして質問

コメントを書いて始める

/*
Create a basic markdown editor in Next.js with the following features:
- Use react hooks
- Create state for markdown with default text "type markdown here"
- A text area where users can write markdown
- Show a live preview of the markdown text as I type
- Support for basic markdown syntax like headers, bold, italics
- Use React markdown npm package
- The markdown text and resulting HTML should be saved in the component's state and updated in real time
*/

と、コメントを書くとその下でコードサジェスチョンが指示に従います

処理ごとにコメントを書く

function reverseSentences(sentences) {
  // first, let's split the sentences into words
  const words = sentences.split(' ')

  // second, let's reverse the words
}

コードサジェスチョンが指示に従っていきます

コードのサンプルを書く

// Map through an array of arrays of objects
// Example: Extract names from the data array
// Desired outcome: ['John', 'Jane', 'Bob']
const data = [
[{ name: 'John', age: 25 }, { name: 'Jane', age: 30 }],
[{ name: 'Bob', age: 40 }]
];

Copilotに例を示すと、よりいいコードサジェスチョンが返ってきます

より明確な指示を与える

あいまいな指示だとあいまいなコードがでがち

関連するファイルは開いておく

VSCodeでCopilotが見てほしいファイルは開いておきます

意味のある命名を付ける

変数名や関数名は何をするか分かる命名にすると、よりいいコードサジェスチョンが返ってきます

Copilotチャットインターフェースの技

特定フレーズ

/explain で解説してもらえます
#editor でVSCodeで開いているファイルについて質問できます
#selection で選択しているコードについて質問できます
@terminal でターミナルについて聞けます
他にもあるので #@/ を入力して候補をチェックしてみてください

Chat: Copilot で候補を表示

左のサイドバーの Chat: Copilot をクリックして開き、入力フォームで上キーを押すと候補が選べます

引用元:
How to use GitHub Copilot: Prompts, tips, and use cases - The GitHub Blog
Using GitHub Copilot in your IDE: Tips, tricks and best practices - The GitHub Blog

PR

読んでよかったAIの本です
読み物として面白かったです

生成AIで世界はこう変わる

生成AIで世界はこう変わる

このリンクは、アフィリエイトリンクです


Amazonのアソシエイトとして、blog.freks.jp は適格販売により収入を得ています。
This site is managed by freks