2024.10.21
お互い疑心暗鬼になりがちな、経営企画と事業部の壁 組織に「分断」が生まれる要因と打開策
使い倒そう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.11.13
週3日働いて年収2,000万稼ぐ元印刷屋のおじさん 好きなことだけして楽に稼ぐ3つのパターン
2024.11.21
40代〜50代の管理職が「部下を承認する」のに苦戦するわけ 職場での「傷つき」をこじらせた世代に必要なこと
2024.11.20
成果が目立つ「攻めのタイプ」ばかり採用しがちな職場 「優秀な人材」を求める人がスルーしているもの
2024.11.20
「元エースの管理職」が若手営業を育てる時に陥りがちな罠 順調なチーム・苦戦するチームの違いから見る、育成のポイント
2024.11.11
自分の「本質的な才能」が見つかる一番簡単な質問 他者から「すごい」と思われても意外と気づかないのが才能
2023.03.21
民間宇宙開発で高まる「飛行機とロケットの衝突」の危機...どうやって回避する?
2024.11.18
20名の会社でGoogleの採用を真似するのはもったいない 人手不足の時代における「脱能力主義」のヒント
2024.11.19
がんばっているのに伸び悩む営業・成果を出す営業の違い 『無敗営業』著者が教える、つい陥りがちな「思い込み」の罠
2024.11.13
“退職者が出た時の会社の対応”を従業員は見ている 離職防止策の前に見つめ直したい、部下との向き合い方
2024.11.15
好きなことで起業、赤字を膨らませても引くに引けない理由 倒産リスクが一気に高まる、起業でありがちな失敗
2024.11.13
週3日働いて年収2,000万稼ぐ元印刷屋のおじさん 好きなことだけして楽に稼ぐ3つのパターン
2024.11.21
40代〜50代の管理職が「部下を承認する」のに苦戦するわけ 職場での「傷つき」をこじらせた世代に必要なこと
2024.11.20
成果が目立つ「攻めのタイプ」ばかり採用しがちな職場 「優秀な人材」を求める人がスルーしているもの
2024.11.20
「元エースの管理職」が若手営業を育てる時に陥りがちな罠 順調なチーム・苦戦するチームの違いから見る、育成のポイント
2024.11.11
自分の「本質的な才能」が見つかる一番簡単な質問 他者から「すごい」と思われても意外と気づかないのが才能
2023.03.21
民間宇宙開発で高まる「飛行機とロケットの衝突」の危機...どうやって回避する?
2024.11.18
20名の会社でGoogleの採用を真似するのはもったいない 人手不足の時代における「脱能力主義」のヒント
2024.11.19
がんばっているのに伸び悩む営業・成果を出す営業の違い 『無敗営業』著者が教える、つい陥りがちな「思い込み」の罠
2024.11.13
“退職者が出た時の会社の対応”を従業員は見ている 離職防止策の前に見つめ直したい、部下との向き合い方
2024.11.15
好きなことで起業、赤字を膨らませても引くに引けない理由 倒産リスクが一気に高まる、起業でありがちな失敗