はじめに
コロナの影響でリモートワークが増えてきた昨今、開発で困ったとき、どのように対処されていますか？
自分の力で解決できれば良いですが、時には誰かにコードを見てもらいながら、一緒に解決したい場合もあると思います。
そんなときに、このVSCode Live Share (無料) を使うと、簡単にペアプロができます！
今回はこのLive Shareの使い方について解説していこうと思います。
導入方法
導入は簡単で、VSCodeのExtensionsで『Live Share』と検索し、インストールするだけです！
インストールが完了すると、下のようなLive Shareのアイコンがでてきます (アイコンが多いと ・・・ で隠れているかもしれません)。
クリックすると、この画面になります。
コードシェアするために、GitHubかMicrosoftでログインする必要があります。
VSCodeの下部にある 『Live Share』 アイコンをクリックして認証します。
認証すると、このような画面に遷移します。
Visual Studio Codeを開くをクリックすると、準備完了です！
リンクの発行と共有できる項目
コードをシェアするためのリンクを発行します。
VSCodeの下部にあるユーザー名をクリックします。
すると、一番上にリンクを発行する項目がでてきます。
これをクリックすると、リンクをコピーできるので、ペアプロしたい人とリンクを共有しましょう！ (相手もLive Shareにログインしている必要があります)
共有できる項目
Live Shareで共有すると、このような画面になります。
それぞれの簡単な説明を表にまとめました。
また、画像にはありませんが、『Live Share Audio』を追加すると、音声チャットもできます。
| 項目 | 何ができるか |
|---|---|
| Participants | 今招待しているユーザーがわかります |
| Shared Servers | 共有しているポートがわかります |
| Shared Terminals | 共有しているターミナルの種類と権限がわかります |
| Chat Channels | ここでチャットできます |
コードシェア
コードシェア、実際にやるとこんな感じです。
今、相手がどの行をみているかがわかり、一緒にコードを書くことができます。
ポートシェア
ngrokのように、共有したいポートを指定して使うことができます。
ターミナルシェア
相手がexitするまで、ターミナルの操作ができます。
これは、Read-onlyにしないと、少し怖い。
チャット
このような感じでチャットもできます！
ボイスチャット
以下の『Live Share Audio』を追加すると、ボイチャもできるようになります！
ログアウト
SESSION DETAILSの赤いボタンをクリックするか、VSCode下部のユーザー名をクリックすると、共有の終了およびログアウトができます。
終わりに
今回、VSCodeのLive Shareを触れてみましたが、こんなに高機能なのに無料！なのは驚きました。
ペアプロツールとして優れているので、ぜひ試してみてください！！