Github copilot + VSCodeをスクリーンリーダー（NVDA）で使ってみた！

これはno plan inc.の Advent Calendar 2023の24日目の記事です。

普段から、NVDA + VSCode の環境でプログラミングをしている私が GitHub copilot を使ってみたのでレビューしていきます！

環境設定

GitHub Copilot
普通に VSCode から ctrl+shift+x でアドン画面に入って"copilot"で検索して出てくる奴を入れます。GitHub copilot chat というのもありましたが今回はこちらは入れませんでした
githubのアカウント登録や支払い設定などは割愛します

copilot の主要なショートカットのうち、下記の二つが VSCode のデフォルトと競合しています。

• copilot によるサジェスション一覧の表示 (ctrl + enter)、デフォルトでは下に一行追加
• copilot のサジェスションを承認 (ctrl + /)、デフォルトでは選択行をコメントアウト

筆者はサジェスション一覧の表示を ctrl+alt+s、サジェスションを承認を ctrl+alt+slash に変更してこれを回避しました。具体的に keybindings.json に追加したものは下記です。

  {
    "key": "ctrl+alt+oem_2",
    "command": "github.copilot.acceptCursorPanelSolution"
  },
  {
    "key": "ctrl+alt+s",
    "command": "github.copilot.generate",
    "when": "editorTextFocus && github.copilot.activated && !inInteractiveInput && !interactiveEditorFocused"
  },
  {
    "key": "ctrl+enter",
    "command": "-github.copilot.generate",
    "when": "editorTextFocus && github.copilot.activated && !inInteractiveInput && !interactiveEditorFocused"
  }

以下はショートカットをこのように変えている前提で書きますが、できる限りデフォの設定も併記します。

使ってみた！

とりあえず超簡単なプログラムを書かせてみます。test.ts を作って下記のコメントだけを入力します。

// 1から10までの整数の和を計算する

これを入力してからenterを押して次の行にいくと、ビュインみたいな音がしてその後にcopilotが書いてくれたコードが読み上げられます。
書いてくれたコードが良さそうだったらTabキーを押すと承認したことになって実際に入力されます。
コードが読み上げられたけど速すぎてよく分らなかったよ～となった場合はalt+F2を押せばコードを一行ごとにブラウズできるポップアップ画面が出ます。
実際に作ってくれたコードがこちら

let sum = 0;
for (let i = 1; i <= 10; i++) {
  sum += i;
}
console.log(sum);

良い感じです！

余談ですが、このAlt+F2で出力された文字列をポップアップでブラウズさせてくれる機能、他の場面でも使えます。
エラーが出ている行のエラー内容を見たいときに、ctrl + k、 ctrl + iを押すとエラー内容が読み上げられるのですが、
この時にalt+F2を押すとエラー内容を一行ずつブラウズできます。
確か1年位前はこの機能がなくて通常マウスホバーで出る情報を読むのに苦労してたのですが、いつの間にかこんなのが追加されてました！
（筆者もcopilot関係を調べるまで知らなかった）

サジェストを一覧表示

さっきのやり方だと候補が一種類しかありませんでしたが、複数から選ぶこともできます。
copilotにコードを追加してほしい部分にカーソルを合わせてAlt+shift+sをを押します（デフォではctrl+enter）。
そうすると候補が複数表示されたテキストが開くので、読んで良さげな奴を見つけたらそこにカーソルがある状態で、ctrl+alt+slashで確定させます。（デフォではctrl+slash)
今回の例だと簡単すぎて選ぶまでもないですが、もうちょっとややこしくなると使えそうな機能です。

コメントを書かずにコードを生成させる

ctrl+iを押すとcopilotに直接命令できます。
任意の命令を与えて少し待つとcopilotが書いてくれたブラウズ可能な差分が表示されるので、良さげだったらtabキーを押して
承認ボタンにフォーカスが当たったらそれを押せば確定します。

copilotとお話する

ctrl+shift+iもしくは、ctrl+alt+iを押すとcopilotとのチャット画面が開きます。
この二つの違いはよく分りません。
どちらもそのショートカットを押したタイミングでエディタで開いている内容を文脈として回答してくれます。
copilotの考え中はポロロンみたいな音がし続けて、回答が生成されたらそのまま読み上げられます。
ctrl+upArrowを押してから上下キーで会話をスクロールできます。回答を一行ずつ読みたければ任意の回答にフォーカスが当たっている状態でalt+f2を押すとブラウズ可能なポップアップが開きます。
チャット入力にも戻りたければctrl+downArrowです。
copilotが出力したコードブロックを読みたければctrl+alt+pageDownを押せばコードブロックにフォーカスが当たります。
この辺のコマンドはalt+F1を押せば一覧で見れます。
あと"/workspace"のようなprefixをつけることもできますが、この辺はよく分ってません。別につけなくても自然言語で良い感じに解釈してくれてる気がする。

まとめ

ちゃんとcopilotの操作用にもオーディオキューを作っていてくれて、さすがVSCodeという感じがしました！
今回初めて知ったんですがAlt+F2で開けるAccessibility viewっていう画面が最高でした
恐らくスクリーンリーダーで最も使われているIDEのVSCode、これからも頑張ってほしいです！
@suzuki←質問とかもしあればこちらにどうぞ。
答えられるものであれば答えますｗ

no plan株式会社について

• no plan株式会社は、ブロックチェーン技術、Webサイト開発、ネイティブアプリ開発、チーム育成、などWebサービス全般の開発から運用や教育、支援などを行っています。よくわからない、ふわふわしたノープラン状態でも大丈夫！ご一緒にプランを立てていきましょう！
• no plan株式会社について
• no plan株式会社 | ブロックチェーン実績
• no plan株式会社 | ブログ一覧