Help us understand the problem. What is going on with this article?

Visual Studio Live Shareで始める快適なエンジニア間コミュニケーション

Visual Studio Live Shareは、Googleドキュメントのファイル上で共同で執筆するかのようにVSCodeで複数人でコードの編集・デバッグが行える拡張機能です。こんなことができます。

  • 複数人で同時にファイルを編集できる。ファイルの移動、プロジェクト内検索も可能
  • ホストマシンのローカルサーバーをシェアし、ゲストマシンからブラウザでアクセスすることができる
  • ホストマシンのターミナルをシェアし、ゲストがコマンドを実行することができる

VSLiveShareはペアプロをしたい相手に招待リンクを送るだけでサクッと始められる点も素晴らしく、弊社ではペアプロだけでなく様々な用途で使用しています。
今回は、明日からすぐ始められるVSLiveShareの導入方法、弊社での活用方法を紹介しようと思います!

VSLiveShareの導入方法

早速導入していきましょう!VSLiveShareは以下の3ステップだけで簡単に始めることができます。

  • VSLiveShareの拡張をインストール
  • MicrosoftアカウントかGitHubアカウントでサインイン
  • セッションを開始し、招待リンクをペアプロをするメンバーにシェア

VSLiveShareの拡張をインストール

スクリーンショット 2018-12-10 23.05.06.png
VSLiveShareは拡張として提供されているので、インストールをして再起動しましょう。拡張のインストールはホスト(セッションを始めるオーナー)とゲスト(セッションに参加するメンバー)のどちらも必要です。

vsliveshare-welcome-page_—_taimee-rails-api.png
再起動をするとサイドバーにVSLiveShareタブが追加されます。

MicrosoftアカウントかGitHubアカウントでサインイン

ホストとしてセッションを始めるためには、サインインをする必要があります。再起動をすると最下部にSign inと表示されるので、クリックするとサインイン画面がブラウザで開かれます。MicrosoftアカウントかGitHubアカウントでログインしましょう。
offers_spec_rb_—_taimee-rails-api.png
Visual_Studio_Live_Share__Sign_In.png

サインインが完了したら、ブラウザを閉じてVSCodeを開くとWelcomeページが表示されているかと思います。
vsliveshare-welcome-page_—_taimee-rails-api.png

セッションを開始し、招待リンクをペアプロをするメンバーにシェア

Welcomeページの Copy Invite Link をクリックすると招待リンクがクリップボードにコピーされるので、リンクをメンバーにシェアしてセッションに参加してもらいましょう。
初回はセッションが自動的に開始されますが、2回目以降はVSLiveShareタブの Start collaboration session... からセッションを始めることができます。
vsliveshare-welcome-page_—_taimee-rails-api.png

ゲスト側は招待リンクをクリックすればVSCodeが開くので、すぐさまセッションに参加することができます。
ゲストがコードを編集するためにはサインインが必要ですが、12/5のリリースからread-onlyでならサインインなしでも参加することができるようになりました!

ホスト側の基本操作

ホスト側の操作は、左上のアイコンの操作を覚えれば万事オーケーです。
vscode.png

操作 説明
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さん、お願いします!
ここまで読んでいただきありがとうございました!

公式ドキュメント
How-to: Collaborate using Visual Studio Code

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away