Visual Studio Live Shareは、Googleドキュメントのファイル上で共同で執筆するかのようにVSCodeで複数人でコードの編集・デバッグが行える拡張機能です。こんなことができます。
- 複数人で同時にファイルを編集できる。ファイルの移動、プロジェクト内検索も可能
- ホストマシンのローカルサーバーをシェアし、ゲストマシンからブラウザでアクセスすることができる
- ホストマシンのターミナルをシェアし、ゲストがコマンドを実行することができる
VSLiveShareはペアプロをしたい相手に招待リンクを送るだけでサクッと始められる点も素晴らしく、弊社ではペアプロだけでなく様々な用途で使用しています。
今回は、明日からすぐ始められるVSLiveShareの導入方法、弊社での活用方法を紹介しようと思います！
VSLiveShareの導入方法
早速導入していきましょう！VSLiveShareは以下の3ステップだけで簡単に始めることができます。
- VSLiveShareの拡張をインストール
- MicrosoftアカウントかGitHubアカウントでサインイン
- セッションを開始し、招待リンクをペアプロをするメンバーにシェア
VSLiveShareの拡張をインストール
VSLiveShareは拡張として提供されているので、インストールをして再起動しましょう。拡張のインストールはホスト（セッションを始めるオーナー）とゲスト（セッションに参加するメンバー）のどちらも必要です。
再起動をするとサイドバーにVSLiveShareタブが追加されます。
MicrosoftアカウントかGitHubアカウントでサインイン
ホストとしてセッションを始めるためには、サインインをする必要があります。再起動をすると最下部にSign inと表示されるので、クリックするとサインイン画面がブラウザで開かれます。MicrosoftアカウントかGitHubアカウントでログインしましょう。
サインインが完了したら、ブラウザを閉じてVSCodeを開くとWelcomeページが表示されているかと思います。
セッションを開始し、招待リンクをペアプロをするメンバーにシェア
Welcomeページの Copy Invite Link をクリックすると招待リンクがクリップボードにコピーされるので、リンクをメンバーにシェアしてセッションに参加してもらいましょう。
初回はセッションが自動的に開始されますが、2回目以降はVSLiveShareタブの Start collaboration session... からセッションを始めることができます。
ゲスト側は招待リンクをクリックすればVSCodeが開くので、すぐさまセッションに参加することができます。
ゲストがコードを編集するためにはサインインが必要ですが、12/5のリリースからread-onlyでならサインインなしでも参加することができるようになりました！
ホスト側の基本操作
ホスト側の操作は、左上のアイコンの操作を覚えれば万事オーケーです。
| 操作 | 説明 |
|---|---|
| Copy Invite Link | 招待リンクの再度コピー |
| Focus Participants | 他のメンバーを自身がいるファイルに強制的に招集する |
| Share Server | ホストマシンで立ち上げているローカルサーバーのポートを指定し、シェアする |
| Share Terminal | シェアターミナルを追加する |
| Stop Collaboration Session | セッションを終了する |
シェアターミナルは便利な反面、ゲストが普通に rm -rf / することも可能なので気をつけましょう。
アクセスレベルをread-onlyに設定することもできます。
VSLiveShareの便利なシチュエーション
ここからはVSLiveShareがあってよかった！という例を紹介していきます。
ペアプロがどこでもできる
一番シチュエーションを想像しやすく、かつ力を発揮するのがこの点でしょう。
弊社はリモートの作業が基本的に認められているのですが、リモートでの開発中チームメンバーとコミュニケーションを取りたい時があったりします。そんなときも「ちょっと聞きたいことがあるのでLiveShareしてもいいですか」というようなチャットとセッションの招待リンクを送り、ボイスチャットで話す、ということがサクッとできます。
エラーの解消などは、口頭や文字での説明よりも実際にコードをいじって動かしてみる方が早いですし、コードレビューをしながらその場で改修する、ということもできます。
LiveShareとボイスチャットで、いつでもどこでもコードを見ながらコミュニケーションをとることができるのは素晴らしく、この用途で使うことが多いです。
ハンズオンが楽
弊社では毎週木曜日の業後に、社内のエンジニアが集まり勉強会を行なっています。
サーバーサイドやiOSなど別言語のエンジニアも含めて行うため、勉強会の内容によってはまず環境構築をしなければならない、ということがありますよね。
そこでVSLiveShareを使えば、ホスト側マシンの環境にゲストがアクセスする形になるのでゲスト側の環境構築が不要、という利点があります。勉強会用の環境をあらかじめローカルで準備しておき、始まったら招待リンクを送るだけでサクッとハンズオンを始めることができるため、とても楽です。
VSCodeで新規ファイルを作り、エンジニアMTGの議事録を取る
ミーティングの議事録をGoogleドキュメントなどで共同で編集しながら取る、ということはよくあるかと思いますが、エンジニアのみのMTGで実際にコードを参照しながら話すような話題なら、VSCodeで新規ファイルを作ってVSLiveShareでやってしまうのが楽です。
共同で議事録を取ることはもちろん可能、Focus機能でファイルを横断しながら処理を説明することも容易です。（本題とは逸れますがmarkdownやVimで議事録を書けるのも良いです）
おわりに
VSLiveShareがかなりカジュアルに、様々な場面で活用できるツールだということが伝われば幸いです。明日からぜひ活用していただければと思います！
個人的にはGitHubのプルリクをVSLiveShareで表示し、リアルタイムでコードレビューができたら最高だな、と思います… Microsoftさん、お願いします！
ここまで読んでいただきありがとうございました！