注目の記事

VS Code の画面を共有するときはキー入力が見える「スクリーンキャストモード」を有効にしてみよう

2021.05.29

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

VS Code の「スクリーンキャストモード」使ってますか?

スクリーンキャストモードとは

百聞は一見に如かず。

お分かりでしょうか。どのキーを入力したのかが一目瞭然です。マウスもクリック時には赤丸が表示されるのでどこをクリックしたかが分かりやすくなっています。(マウス押下時の黄色はスクリーンキャプチャソフトが付与したものです)

スクリーンキャストモードは VS Code 1.31 January 2019 で搭載された機能ですが、意外と知らない人も多く、私自身この機能の名前がパッと出てこないこともあったので今回改めて紹介してみました。

https://code.visualstudio.com/updates/v1_31#_screencast-mode

スクリーンキャストモードを有効にする

デフォルトではショートカットキーは割り当てられていません。コマンドパレットから Developer: Toggle Screencast Mode に引っかかるワードで絞り込みましょう。

トグルなので現在の設定が有効か無効かが分かりづらいと一瞬思うかもしれませんが、機能的にすぐ判断がつくので大丈夫ですね。

何が嬉しいのか

さてスクリーンキャストモード自体の説明と設定方法は上記で述べましたが、どういうメリットがあるのかまだピンと来ていない人がいるかもしれません。ですのでスクリーンキャストモードが活躍する場面をいくつか挙げてみました。

  • ペアプログラミング
  • モブプログラミング
  • ライブコーディング

そうです。他の人に VS Code の画面を見てもらう場面で活躍します。逆に自分ひとりでコーディングやメモ書きしている最中は邪魔になるでしょう。

ペアプロやモブプロは一つのコードを共同で作り上げる作業ですが、その中で知識の伝達を目的としてペアプロやモブプロが行われることもあります。スクリーンキャストモードでキー入力している人(ドライバー)がどんなショートカットキーを使ったのかが見えるので、見ている人(ナビゲーター)がショートカットキーの存在を「発見」できたり、逆にドライバーが余計な操作をしていないかをナビゲーターが観測しやすくなります。

ライブコーディングも同じように見ている人に対して自身の操作を見える化でき、見ている人に対して気づきを与えやすいでしょう。

Live Share との棲み分け

ペアプロやモブプロでは Live Share が用いられることがあります。Live Share では参加者全員がホストのコードを同時編集できます。ビデオチャットツールで VS Code の画面を共有せずに Live Share でコードを共有している方も多いのではないでしょうか。

Live Share ではスクリーンキャストモードを有効にしても自分自身の VS Code 内でしか有効になりません。ですので他の人の操作を見ようとするのは困難です。

見ている人にも何らかの編集をしてもらう必要があるなら Live Share、見ているだけなら画面共有といったように棲み分けてはいかがでしょうか。

まとめ

  • VS Code のスクリーンキャストモードを用いてキー入力やマウス操作の見える化ができる
  • 他人に VS Code の画面を見てもらう場面でスクリーンキャストモードは活躍する