プログラミングをしていると、チームメンバーやメンターさんにコードの書き方を教わりたい場面がありますよね。
直接横に居て教えて貰えればいいのですが、オンラインスクールの場合や、在宅勤務を採用している場合リモートでしか対応できないことも多いと思います。
その時に画面共有をして
もうちょっと上写してくださーい
ここのforeachが……
$consumerってなにが入ってますか？
ぺらぺら
あたふた
こんな経験ありませんかね？
逆に教える立場になった時、
「直接操作できれば、もっと早く教えられるのに」
と思うことも多いと思います。
そんな両者の願いを叶えてくれるのが、Live Shareです。
Live ShareはVScodeの拡張機能で、相手のコードを直接操作することができます。
今回はLive Shareの使い方を解説させていただきます。
このように、2人のプログラマーが1台のコンピュータを使って協力してコードを書くことをペアプロ（ペアプログラミング）と言います。
知識の共有や、経験の浅いメンバーのスキル向上を目的として行われることが多いです。
Live Shareの使い方
①インストール
まずはLive Shareをインストールします。
コードを共有する人、教える人両方がインストールする必要があります。
拡張機能アイコンでLive Shareを検索
インストールします
インストールが完了しましたら、一度VScodeを再起動します。
(✕でVScodeを閉じて、再び開くだけで大丈夫です)
②ログイン(初回のみ)
初めてLive Shareを使用する場合は、ログインが必要となります。
GitHubまたはMicrosoftアカウントでログインしましょう。
画像なくてすいません….
③共同編集の開始(コードを共有する人)
コードを共有する人は、Live Shareのアイコンから
Share(Read/Write)をクリックして共同編集を開始します。
④参加リンクをコピー(コードを共有する人)
コードを共有する人は、③共同編集の開始が完了したら
「Participants/Invite participants…」
をクリックして招待リンクをコピーします。
以下のメッセージが右下に表示されたらコピーできています。
ちなみに
Invite participants.は、参加者を招待するという意味で
「インヴァイト パーティシパンツ」と発音します。
また、Invite link copied to clipboard! Send it to anyone you trust.は
招待リンクがクリップボードにコピーされました！信頼できる人に送信してください。
という意味です！
⑤招待リンクを参加者に送ります
SlackなりLineなりで参加者に招待リンクを送ります。
コピーはできているので、Ctrl + v でペーストできます。
⑥共同編集に参加(参加者側)
Live ShareのアイコンからJoinをクリックします。
Slackなどで受け取った、招待リンクの貼り付けます。
これで参加できるはずです。
あとはあーだこーだ言いながら、共有されたコードを編集してみてください。
きっと快適なはずです！
⑥-1参加者の注意点1
参加者は共同編集を開始した状態だと参加できません。
Live Shareのアイコンをクリックした際、以下のような画面表示となった場合は自身で共同編集を開始してしまっているので、先に下記の➇共同編集の終了を行ってください。
⑥-2参加者の注意点2
Joinすると、 現在開いているVScodeのタブがすべてLive Shareに置き換わります。
自分の作業ディレクトリを開き直すのが面倒なので、必ずLive shareする用の新しいVScodeを開いてからJoinした方がいいです。
【例】Join前は自身の作業でpwshや設定などを開いています。
Joinした途端、開いているVScodeはLive shareに置き換わり、開いていたpwshや設定が閉じられてしまいます。
⑦共同編集者を追従する方法。
Participantsタブの追いかけたい人の名前をクリックすると、その人が見ているファイルや、行を追従することができます。
これで「今どこ見てますか？」のやり取りを省略できます。
➇共同編集の終了
無事にペアプロが完了し、共同編集を終了する際は
Live Shareのアイコンをクリックして、画像のマークをクリックしてください。
まとめ
以上でペアプロの開始から終了までの流れを紹介させていただきました。
Live Shareは教える側も教わる側もドギマギしないでペアプロができるツールです。
私も業務で実際に使って良さを感じているので、機会があれば皆様も是非使ってみてください。
今回は以上です
ありがとうございました！
