SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

開発用エディタのド定番「VSCode」を使いこなそう

GitHub CopilotでAIコーディングをはじめよう

開発用エディタのド定番「VSCode」を使いこなそう 第13回

  • X ポスト
  • このエントリーをはてなブックマークに追加

Copilot Next Edit Suggestions(NES)

 VS Code 1.99で、Copilot Next Edit Suggestions(以降、NES)が正式サポートされました。NESは、簡単に言うとコード補完機能です。

 ただし、言語サーバで提供されていたような、メソッドやプロパティの候補を一覧表示して選択させる単純なものではなく、開発者の意図を予測してまとまったコードを提案してくれます。NESは既定で有効になっていますが、ステータスバーの[Copilot]アイコンから[次の編集提案]をオフにすることで無効にできます。

NESの基本操作

 NESの利用に、特段の準備は不要です。いきなりコードを打ち込んでみて構いません。

 例えば、JavaScriptの関数を定義するとして、図16のように「function calc」まで入力してみます。提示されたコードは、薄い斜体の文字で表示されます。ここで採れる手段は、[Tab]キーで確定させるか、[Esc]キーで取り消すかです。

図16:NESによる入力コードの提示
図16:NESによる入力コードの提示

 図17は確定させたところです。

図17:NESによる入力コードの確定
図17:NESによる入力コードの確定

 calculateSum関数が確定し、「calculateDifferenceも必要なんじゃないの?」と新たな提示が行われているのが分かります。同じく採用であれば[Tab]キー、不要なら[Esc]キーで、作業を進められます。

 未確定の状態でマウスポインタを乗せると、ツールバーが表示されます(図18)。ツールバーにより、上記のキー以外の操作も可能です(表6)。

図18:NESのツールバー
図18:NESのツールバー
表6:NESのツールバーによる操作
項目 キー 操作
[Option]+[[]/[Alt]+[[] 修正方法を後方向に切り替え
[Option]+[]]/[Alt]+[]] 修正方法を前方向に切り替え
単語を採用する [Command]+[→]/[Ctrl]+[→] 単語だけ確定させる

 ツールバーの右にある[…]をクリックすると、サブメニューが表示されます。メニューから、表7の操作が可能です。

表7:NESツールバーのサブメニュー
項目 操作
行を承諾する カーソル行だけ確定させる
常にツールバーを表示する このツールバーが常に表示されるようにする
Send Copilot Completion Feedback フィードバックを送信する

コメントから補完

 NESによるコード補完は、コメントからでも可能です。同じく、JavaScriptで四則演算の関数を作成することを想定します。「四則演算の関数を作る。引数は」まで入力すると、「2つの数値と演算子」が候補として現れ、意図したものなら確定すると、関数本体が提示されます(図19)。

図19:コメントからのコード候補の提示
図19:コメントからのコード候補の提示

NESの設定

 NESアイコンから表示されるメニューで[設定]を選択すると、表8の設定を呼び出すことができます(「NES関連」に○があるものはNES独自の項目)。

表8:NES関連の設定項目
NES関連 項目 概要
github.copilot.nextEditSuggestions.enabled NESを有効にするか(既定値:True)
github.copilot.nextEditSuggestions.fixes NESによるコードの誤り訂正を有効にするか(既定値:True)
editor.inlineSuggest.edits.allowCodeShifting コードシフト(コード変更の内容をインラインで表示)を許可するか(既定値:always)
editor.inlineSuggest.edits.renderSideBySide コード変更の内容が大きくなるときにスペースがあれば横並びにできるようにするか(既定値:auto)
editor.inlineSuggest.edits.showCollapsed コード変更の内容を折り畳み表示するか(既定値:false)

今回登場のショートカットキー

表9:今回登場のショートカットキー
機能 macOS Windows
チャットビューのオープン [Ctrl]+[Command]+[I] [Ctrl]+[Alt]+[I]
インラインチャット [Command]+[I] [Ctrl]+[I]
クイックチャット [Option]+[Shift]+[Command]+[L] [Ctrl]+[Shift]+[Alt]+[L]
NESによる提案の確定 [Tab] [Tab]
NESによる提案のキャンセル [Esc] [Esc]

まとめ

 今回は、GitHub Copilotの概要と導入について紹介しました。基本機能であるチャットを中心に、新機能であるNext Edit Suggestionも絡めて、AIのサポートでコーディングがどのように便利に変わるか説明しました。

 次回はこの続きとして、Visionによるコンテキスト画像の利用、Agentモードによる開発プロセスの自動化、そしてローカルLLMの導入などを紹介します。

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
開発用エディタのド定番「VSCode」を使いこなそう連載記事一覧

もっと読む

この記事の著者

WINGSプロジェクト 山内 直(WINGSプロジェクト ヤマウチ ナオ)

WINGSプロジェクトについて>有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂きたい。著書記事多数。 RSS X: @WingsPro_info(公式)、@WingsPro_info/wings(メンバーリスト) Facebook <個人紹介>WINGSプロジェクト所属のテクニカルライター。出版社を経てフリーランスとして独立。ライター、エディター、デベロッパー、講師業に従事。屋号は「たまデジ。」。

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

山田 祥寛(ヤマダ ヨシヒロ)

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ(Java・C#・Python・PHP・Ruby・JSP&サーブレットなど)」「速習シリーズ(ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど)」「改訂3版JavaScript本格入門」「これからはじめるReact実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/22053 2025/08/19 11:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング