Visual Studio Codeを使い倒す––リモートデバッグからローカルサーバーのシェアまで　

Visual Studio Codeを使い倒そう

yoshikawa_t氏：みなさん、こんばんは。今日の登壇はsakkuruがやることになってたんですけど、急遽リモートでやることになりました（笑）。

事前の打ち合わせを30分前にしたくらいなので、いろいろとグダグダするかもしれないですけど（笑）。そのへんご了承ください。じゃあsakkuru、よろしくお願いします。

sakkuru氏：はい。今日はyoshikawaさんと協力して「Visual Studio Live Share」のご紹介をしたいと思います。

まず始めに簡単な自己紹介なんですが、私、sakkuruと申します。

Microsoftでソフトウェアエンジニアをしていて、今はIoTの開発とかの技術支援をメインでやっています。

今日は「Visual Studio Live Share」という機能がVisual Studio CodeとVisual Studioに乗りましたので、もしかしたら使っている方もいるかもしれないんですが、その紹介をリモートでさせていただきたいと思います。

Visual Studio Codeの実演

では、さっそくデモに入っていきたいと思います。今、ターミナル映ってますかね。非常にシンプルなExpressのプロジェクトを作ったので、さっそくVisual Studio Codeを起動します。

今、Visual Studio Codeが起動しました。ここからyoshikawaさんといろいろ協力してやっていくんですけれども、まずサーバーを起動してみましょう。下にある統合ターミナルから「npm start」と打つと、私のローカルマシンでサーバーが起動するので、ローカルホストの3000番にアクセスすると、Expressのプロジェクトのトップ画面が見えるようになっています。

ではここから、yoshikawaさんにリモートでデバッグをお願いしたいと思います。今私のVisual Studio Codeの下のほうに「Share」というボタンがあるんですけど、こちらをクリックするとリモートでデバッグするためのリンクが生成されますので。こちらをyoshikawaさんに送りたいと思います。今はappear.inを使っているので、こちらのチャットで送ります。

じゃあyoshikawaさん、お願いします。

yoshikawa_t：はーい。これをダブルクリックして、「Chromeで開く」して、そうすると上に「Live Share for VS Code.appを開きますか？」。で、これで開くと。

そうするとVisual Studio Codeが立ち上がりまして、さっきsakkuruが見てたプロジェクトのフォルダがそのまま見えて、という感じになります。

sakkuru：はい。では、なにかファイルをyoshikawaさんのほうで更新していただきたいと思います。

yoshikawa_t：はい。じゃあrootsの下の、indexでいいです。

sakkuru：はい。

yoshikawa_t：このtitleを変更します。……はい、変更して保存しました。

sakkuru：今私のほうでも、rootsのindex.jsのほうを見ていて。yoshikawaさんのキーカーソルの位置とかも見えていて、「HTML5とか勉強会」というtitleに変わっているところも見えています。yoshikawaさんのほうでもう保存をしてもらってるので、私のほうでもう1回サーバーを再起動すると……。

このExpressのページをリロードします。そうすると、yoshikawaさんのほうで変更したものが、私のほうでも反映されているということがわかります。このように、リモートで入った人全員がファイルを更新することができます。

リモートでデバッグも可能

また、デバッグなどもリモートからいろいろできるようになっていまして、例えばapp.jsというのがあるんですけれども、こちらyoshikawaさんのほうでブレイクポイントを張ってもらってもいいですか？

yoshikawa_t：はーい。app.jsの中身を見て、適当にポチポチと。ブレイクポイントを貼ります。で、今ブレイクポイントを張り終わりました。

sakkuru：はい。ありがとうございます。私のほうでもyoshikawaさんが押したブレイクポイントが見えるようになっています。では私のほうで、デバッガーを起動しますね。デバッガーのメニューに行って、デバッガーを起動します。

今回Nodeのプログラムなので、Nodeを選択します。そうすると、yoshikawaさんのほう、どうなってますかね。yoshikawaさんのほうでも、変数の中身とかが見えるようになっているかと思います。

yoshikawa_t：はい。今ここで、app.useで止まってるのが見えると思います。ここらへんですね。ここで下のほうにデバッガーのメッセージとかブレイクポイントの変数だとか、見えてるっていう感じですね。

ここでステップ実行とかを押すと、こっちでブレイクポイントを進めることもできるという感じみたいです。

sakkuru：はい。私のほうでも進めたステップの情報が、全部見えるようになっています。こんな感じで、2人でリモートでデバッグなどを行うこともできます。では1回このデバッグ、止めますね。

ほかにもできることがあって。先ほど私のほうで「npm start」とかターミナルを触ったかと思うんですけれども、これ私のほうだけじゃなくて、yoshikawaさんのほうでもいろいろ触らせたい、yoshikawaさんのほうでもいろいろコマンド打ちたい、という場合は……このLive Shareのメニューの中に「Share Terminal」という機能がありますので。こちらをクリックすると、yoshikawaさんのほうで私のこのbashの画面が触れるようになります。

時間がないのでこちらのほうは割愛しますが、こうすることでターミナルを乗っ取らせることができます。

「Share Server」でローカルサーバーをシェア

sakkuru：では最後に、今私のローカルで動いているこのExpressのサーバー、yoshikawaさんのほうではアクセスできないですよね。ローカルホストの3000番、ちょっとyoshikawaさんのほうでアクセスしていただいてもいいですか？

yoshikawa_t：はーい。今ローカルホスト3000番、アクセスしても、「このサイトにアクセスできません」と出ます。

sakkuru：このExpressのサーバーというのは、私のこのマシンで、ローカルで動いているので、もちろんyoshikawaさんはアクセスできないんですけれども。リモートの人にも、この結果とかサーバーのアプリとか見えるようにしたいですよね。

そういう場合は、このLive Shareの機能の中に「Share Server」という機能がありますので、こちらをクリックします。そして今回、3000番をexposeしたいので、「3000」と入れて……そうするとですね、今もうyoshikawaさんのほうで、私のローカルで動いている3000番のサーバーにアクセスできるようになっています。では、yoshikawaさんお願いします。

yoshikawa_t：はい。ではここで改めてアクセスすると、こんな感じに見えてるという感じですね。

sakkuru：はい。という感じで、いろいろデバッグですとか、ターミナルのシェアですとか、ローカルサーバーのシェアですとか、そういったこともできるようになっていまして。Live Shareってコードのシェアだけかと思われるかもしれないんですけど、けっこういろんなことがリモートでできるようになっています。

まずLive Shareを使うためには、Live Shareの拡張を両方にインストールする必要があります。

そうすると下のほうに「Share」というメニューが出てきますので、ここからシェア用のリンクを生成して、例えば今みたいなチャットですとか、Slackみたいなものでリンクを共有します。

そうするとデバッグセッションもターミナルもローカルサーバーも、すべてシェアできるようになっています。

このようにこのVisual Studio Live Shareは、なんでもシェアできるようになっていますので。みなさんが家で仕事をする、会社で仕事をする、海外で仕事をする。そんなときにも開発ができるようになっています。ですのでぜひ、みなさんこちらのほうをご利用いただければと思います。

ということで私のセッションは終わりたいと思います。ありがとうございました。yoshikawaさんもありがとうございました。

yoshikawa_t：ありがとうございました。

（会場拍手）