ITソリューション事業部門リーダー 山﨑です。

みなさんは普段どんなエディタを使用していますか？
一口にエディタと言ってもたくさんありますよね。
もちろん、おすすめされるエディタを使い続けるのも良いですが、
人によって使いやすさはやはり違うので、初めのうちは色々試してみるのも良いと思います！

そして最近、E2(の一部)で秘かに盛り上がっているのがVSCode Live Shareです。
そうです！VSCodeのプラグイン(拡張機能)なんです！
今日はこれについて語りたいと思います。

VSCode Live Shareとは？

VSCode Live Share(以降 Live Share)を使うと、誰かが開いているエディタを他の人と共有することができ、共有したエディタ上で複数人で作業できるものになります。

物凄く簡単に感情的に説明すると、

みんなで一緒に作業できる！すごい！なんか楽しい！

という素晴らしいものです。

何がすごいのか？

例えばある日の会話から……

Aさん「ちょっともうダメだ助けて。」
Bさん「ふむ？えーと、まずどう書いてる？」
Aさん「えっとね、ここにこう書いてるよ。」
Bさん「ふむふむ、ここは問題なさそうだね。次は、えーとこのファイルの中見せてもらっていい？」
Aさん「はい、これだね」
Bさん「あ、それじゃなくて、これこれ。ここの、これ。」
Aさん「あ、こっちか、ごめんごめん、はい。」
Bさん「うーん、ごめん、さっきのもう一度見せてもらっていい？」
Aさん「さっきの？えっと、これかな？」
と同じようなやり取りが何度も続き、時間がどんどん過ぎても解決せず。結局ファイルを全部渡してもらった。

本来かけるべきではないやり取りに時間を取られてしまい、本質にたどり着くまでに随分と時間がかかってしまいました。
なんだか勿体ないですね。

それでは、お互いにLive Shareを入れている場合は……

Aさん「ちょっともうダメだ助けて。」
Bさん「よし、れっつLive Share！」 Aさん「いえーい」
～シェア後～
Aさん「問題の箇所はここなんだけど……」
Bさん「ふむ。ちょっと他のファイルも見てみるね。」
Aさん「うん、こっちも他に怪しそうなところあるからそっち見てる。」
Bさん「ここも大丈夫そうだな、ここも違うなぁ……あ！わかった！」
Aさん「え？！わかった？！」
一気に解決へ。

コミュニケーションを取りながらサクサクと互いに気になる箇所を確認していって、不具合があっという間に解消されました。
2人掛かりで1時間位費やしてしまったのが、ものの数分で解決することもあります。

画面を共有しているわけではないので、ちょっと別件でSlackを確認なんてことも気兼ねなく出来ます。
もし、少し目を離してしまっても相手をフォロー(※1)する機能があるので、
今どこでどのファイルを開いていて、どの行を触っているのかもすぐわかります。
フォローは説明をするときにも大変便利です。

※1 自動的にファイルが開かれたり、タブを移動したり、相手の動きに追従します。

なんかすごいのは分かった。他に何ができるの？

相手の作業環境を簡単に共有できることは上の例でお伝えしたとおりです。

他には、以下のことが出来ます。

• 相手の現在位置、選択している行が色付けされます
  「ここがー」って言いながら選択するので、相手にも伝わりやすいです。
• VSCode上でターミナルを共有できる
  見るだけではなく、操作も可能なのでコマンド実行もできます。
• 相手の環境で動いているサイト表示も共有できる
  ポートフォワーディング機能を使って簡単に相手の環境で動いているサイトを見れるので、動作確認も簡単です。
• 他のプラグインも合わせるとチャットやホワイトボードまでも使える
  もうVSCodeから動かないまま色んなことが出来てしまいます。

どうやって使うの？

調べるとたくさんLive Shareについての記事があるので詳細は割愛します。
とにかくまずはシェアして楽しんで欲しいということで、シェアできるところまでご紹介！

1. まずはVSCodeをダウンロードしてインストール
2. 続いてこちらからLive Shareをインストール
3. ここまで準備ができたらおもむろに左下の「Live Share」をクリック
4. なにやらサイトを開くかどうかを問われるので怖がらずに「リンクを開く」をクリック(問われない場合もあります)
    
5. ブラウザでページが開いて、どのアカウントを使うかを問われるので、
   お好きな方を選択してください(今回はGithubで進めます)。
    
6. Githubのアカウントでログイン
    
7. Githubのアカウントとの連携を許可
    
8. 準備が整いました！
   最初の「Live Share」の部分が下記のようになっていると思います。

さあShareしよう！

実は、実践準備の8番を終えた時点でクリップボードにはシェア用のURLが保存されています。
どこか適当にペーストしてみてください。
以下のような感じで、URLが表示されたでしょうか？

これをシェアしたい相手に知らせるだけです。簡単ですね！
※相手もLive Shareをインストールしている必要があります。

誰かと一緒に作業をするという楽しさを感じて頂ければと思います！