2024.10.10
将来は卵1パックの価格が2倍に? 多くの日本人が知らない世界の新潮流、「動物福祉」とは
使い倒そうVisual Studio Code!(全1記事)
リンクをコピー
記事をブックマーク
yoshikawa_t氏:みなさん、こんばんは。今日の登壇はsakkuruがやることになってたんですけど、急遽リモートでやることになりました(笑)。
事前の打ち合わせを30分前にしたくらいなので、いろいろとグダグダするかもしれないですけど(笑)。そのへんご了承ください。じゃあsakkuru、よろしくお願いします。
sakkuru氏:はい。今日はyoshikawaさんと協力して「Visual Studio Live Share」のご紹介をしたいと思います。
まず始めに簡単な自己紹介なんですが、私、sakkuruと申します。
Microsoftでソフトウェアエンジニアをしていて、今はIoTの開発とかの技術支援をメインでやっています。
今日は「Visual Studio Live Share」という機能がVisual Studio CodeとVisual Studioに乗りましたので、もしかしたら使っている方もいるかもしれないんですが、その紹介をリモートでさせていただきたいと思います。
では、さっそくデモに入っていきたいと思います。今、ターミナル映ってますかね。非常にシンプルな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の画面が触れるようになります。
時間がないのでこちらのほうは割愛しますが、こうすることでターミナルを乗っ取らせることができます。
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:ありがとうございました。
(会場拍手)
関連タグ:
2024.10.29
5〜10万円の低単価案件の受注をやめたら労働生産性が劇的に向上 相見積もり案件には提案書を出さないことで見えた“意外な効果”
2024.10.24
パワポ資料の「手戻り」が多すぎる問題の解消法 資料作成のプロが語る、修正の無限ループから抜け出す4つのコツ
2024.10.28
スキル重視の採用を続けた結果、早期離職が増え社員が1人に… 下半期の退職者ゼロを達成した「関係の質」向上の取り組み
2024.10.22
気づかぬうちに評価を下げる「ダメな口癖」3選 デキる人はやっている、上司の指摘に対する上手な返し方
2024.10.24
リスクを取らない人が多い日本は、むしろ稼ぐチャンス? 日本のGDP4位転落の今、個人に必要なマインドとは
2024.10.23
「初任給40万円時代」が、比較的早いうちにやってくる? これから淘汰される会社・生き残る会社の分かれ目
2024.10.23
「どうしてもあなたから買いたい」と言われる営業になるには 『無敗営業』著者が教える、納得感を高める商談の進め方
2024.10.28
“力を抜くこと”がリーダーにとって重要な理由 「人間の達人」タモリさんから学んだ自然体の大切さ
2024.10.29
「テスラの何がすごいのか」がわからない学生たち 起業率2年連続日本一の大学で「Appleのフレームワーク」を教えるわけ
2024.10.30
職場にいる「困った部下」への対処法 上司・部下間で生まれる“常識のズレ”を解消するには
2024.10.29
5〜10万円の低単価案件の受注をやめたら労働生産性が劇的に向上 相見積もり案件には提案書を出さないことで見えた“意外な効果”
2024.10.24
パワポ資料の「手戻り」が多すぎる問題の解消法 資料作成のプロが語る、修正の無限ループから抜け出す4つのコツ
2024.10.28
スキル重視の採用を続けた結果、早期離職が増え社員が1人に… 下半期の退職者ゼロを達成した「関係の質」向上の取り組み
2024.10.22
気づかぬうちに評価を下げる「ダメな口癖」3選 デキる人はやっている、上司の指摘に対する上手な返し方
2024.10.24
リスクを取らない人が多い日本は、むしろ稼ぐチャンス? 日本のGDP4位転落の今、個人に必要なマインドとは
2024.10.23
「初任給40万円時代」が、比較的早いうちにやってくる? これから淘汰される会社・生き残る会社の分かれ目
2024.10.23
「どうしてもあなたから買いたい」と言われる営業になるには 『無敗営業』著者が教える、納得感を高める商談の進め方
2024.10.28
“力を抜くこと”がリーダーにとって重要な理由 「人間の達人」タモリさんから学んだ自然体の大切さ
2024.10.29
「テスラの何がすごいのか」がわからない学生たち 起業率2年連続日本一の大学で「Appleのフレームワーク」を教えるわけ
2024.10.30
職場にいる「困った部下」への対処法 上司・部下間で生まれる“常識のズレ”を解消するには