リモートでもペアプロできる！ VSCode Live Shareの使い方を紹介

# はじめに
コロナの影響でリモートワークが増えてきた昨今、開発で困ったとき、どのように対処されていますか？
自分の力で解決できれば良いですが、時には誰かにコードを見てもらいながら、一緒に解決したい場合もあると思います。

そんなときに、このVSCode Live Share (無料) を使うと、簡単にペアプロができます！
今回はこのLive Shareの使い方について解説していこうと思います。
<img src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/751408/4e8433db-4511-1cec-751d-c52fe0cbd1da.png' width='800'>

# 導入方法
導入は簡単で、VSCodeのExtensionsで『Live Share』と検索し、インストールするだけです！
<img src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/751408/eaf82ef1-08e0-3665-86c6-3a3af5ba5d6a.png' width='350'>

インストールが完了すると、下のようなLive Shareのアイコンがでてきます (アイコンが多いと ・・・ で隠れているかもしれません)。
![スクリーンショット 2020-12-09 21.33.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/751408/fed0f39d-17b9-a295-4707-ab4de2bddbe0.png)

クリックすると、この画面になります。
<img src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/751408/0494f364-a74f-cace-24f3-9c4f6981fd28.png' width='800'>

コードシェアするために、GitHubかMicrosoftでログインする必要があります。
VSCodeの下部にある 『Live Share』 アイコンをクリックして認証します。
![スクリーンショット 2020-12-10 18.56.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/751408/705f2507-3e01-7422-bcd4-432863f99b29.png)

![_2020-12-09_19.58.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/751408/0a34da22-d0ea-347b-5127-a515fb90a472.png)

<img src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/751408/39806c99-cb52-4265-f2d6-c40626c1ff0b.png' width='550'>

認証すると、このような画面に遷移します。
Visual Studio Codeを開くをクリックすると、準備完了です！
<img src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/751408/42c49bc4-6007-2b52-2f7a-9446642bfee0.png' width='550'>

# リンクの発行と共有できる項目
コードをシェアするためのリンクを発行します。
VSCodeの下部にあるユーザー名をクリックします。
![スクリーンショット 2020-12-10 19.06.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/751408/83d44c8e-c13c-0c7a-9d5a-ad0d389c062d.png)

すると、一番上にリンクを発行する項目がでてきます。
これをクリックすると、リンクをコピーできるので、ペアプロしたい人とリンクを共有しましょう！ (相手もLive Shareにログインしている必要があります)
![スクリーンショット 2020-12-10 19.06.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/751408/3732ca35-b100-5e0d-7fdd-5076d6e07bf6.png)

## 共有できる項目
Live Shareで共有すると、このような画面になります。
![_2020-12-09_20.34.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/751408/7797b8b8-95e5-cafe-a0ab-6e221f362a6c.png)

それぞれの簡単な説明を表にまとめました。
また、画像にはありませんが、『Live Share Audio』を追加すると、音声チャットもできます。

| 項目 | 何ができるか |
|:------------:|:------------:|
| Participants | 今招待しているユーザーがわかります |
| Shared Servers | 共有しているポートがわかります |
| Shared Terminals | 共有しているターミナルの種類と権限がわかります |
| Chat Channels | ここでチャットできます |

# コードシェア
コードシェア、実際にやるとこんな感じです。
今、相手がどの行をみているかがわかり、一緒にコードを書くことができます。
![Kapture_2020-12-09_at_21.04.21.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/751408/518b9200-4e94-fa87-312b-133e6ea752c7.gif)

# ポートシェア
ngrokのように、共有したいポートを指定して使うことができます。
![スクリーンショット 2020-12-10 19.21.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/751408/8bbf0504-2845-2d21-43e7-953b74caffec.png)


# ターミナルシェア
相手がexitするまで、ターミナルの操作ができます。
これは、Read-onlyにしないと、少し怖い。

# チャット
このような感じでチャットもできます！
![_2020-12-09_20.27.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/751408/c071ef56-2651-3690-eb79-abb653b9813f.png)

# ボイスチャット
以下の『Live Share Audio』を追加すると、ボイチャもできるようになります！
<img src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/751408/bd319ab8-2706-d478-0fcf-7013feb18d63.png' width='750'>

![_2020-12-09_20.37.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/751408/0471a4f3-3af6-6bae-6b7a-e6b46a459509.png)

# ログアウト
SESSION DETAILSの赤いボタンをクリックするか、VSCode下部のユーザー名をクリックすると、共有の終了およびログアウトができます。
![スクリーンショット 2020-12-10 19.32.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/751408/56686467-6c1b-6bc0-8613-ed15371f5d66.png)

![スクリーンショット 2020-12-10 19.33.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/751408/de835d50-ad85-bca5-c323-97f60b8e8467.png)


# 終わりに
今回、VSCodeのLive Shareを触れてみましたが、こんなに高機能なのに無料！なのは驚きました。
ペアプロツールとして優れているので、ぜひ試してみてください！！