2018/08/04 OSC京都のセッション資料です。

1. 使い倒そう VISUAL STUDIO CODE！
～クラウド連携や遠隔ペアプロ、
もちろん GIT も便利に～
さっくる (本間咲来)
日本マイクロソフト株式会社
SOFTWARE ENGINEER
#osckyoto

2. 仕事では IoT、Bot、Azure の開発支援がメイン
♥ Visual Studio Code ♥
さっくる @sakkuru
本間咲来 / Saki Homma
Software Engineer@Microsoft

4. VISUAL STUDIO CODE
• オープンソースの無料のエディタ
• マイクロソフトが開発
• マルチプラットフォーム(Win/Mac/Linux)
• さまざまな言語、プラットフォーム向け開発が可能
• とにかく拡張機能がたくさん！！

5. https://marketplace.visualstudio.com/
拡張機能の Marketplace

6. 2018/08/04 現在
8930個
2018/07/07 時点
8551個

7. Microsoft が出している拡張

8. Azure を便利に使える拡張たち

9. 本体もどんどん
アップデート

10. https://code.visualstudio.com/updates

11. Activity Bar にメニューが
増えるように！
ごちゃごちゃしなくなった

12. 全部デモ！
VISUAL STUDIO CODE で
WEB アプリを作って公開

13. デモでやること
1. ビデオチャットアプリを作る
2. Azure の App Service にデプロイする
3. Docker コンテナを作成する
4. Docker イメージ → コンテナレジストリ
→ App Service にデプロイ

14. ここからはデモで！

15. デモアプリ

16. 1. ビデオチャットアプリを作る
2. Azure の App Service にデプロイする
3. Docker コンテナを作成する
4. Docker イメージ → コンテナレジストリ
→ App Service にデプロイ
ここまで

17. 1. ビデオチャットアプリを作る
2. Azure の App Service にデプロイする
3. Docker コンテナを作成する
4. Docker イメージ → コンテナレジストリ
→ App Service にデプロイ
ここから

18. 便利なところいろいろ

20. 定義が開ける

21. AZURE の PAAS 連携

22. VSCode から直接デプロイ
AZURE の APP SERVICE にデプロイ

23. DOCKER 連携

25. Docker のコマンドを VSCode のメニューから実行可能
DOCKER 連携

26. コンテナやクラウド上のイメージの状態確認
• Docker Hub や Azure上のイメージやコンテナの情報を確認できる
• Attach や Restart 等も
• ここから App Service へのデプロイもできる！

27. • スニペット・デバッガ・Git連携等
• たくさんの拡張機能を使えば快適な開発が可能
• アプリの Azure へのデプロイはとても簡単！
• Docker イメージやコンテナの管理も楽
• VSCode → コンテナレジストリ → Azure へのデプロイも
ここまで

28. GIT 連携機能

29. GIT DIFF 表示

30. GIT LOG 表示

31. GIT BLAME 表示 1

32. GIT BLAME 表示 2

33. リビジョンの比較

34. GITHUB ISSUES の確認

35. VISUAL STUDIO CODE で
遠隔ペアプログラミング

36. • Visual Studio と Visual Studio Code 間でリアルタイム
に共同作業ができる機能
VISUAL STUDIO LIVE SHARE
https://code.visualstudio.com/visual-studio-live-share

37. まずは拡張機能を
インストール

38. この Share メニューから
すべてがはじまる

39. ターミナルも
ローカルサーバもシェアできる！

40. VS LIVE SHAREでできること
• コードのシェア
• カーソル位置、選択位置のシェア
• デバッグセッションのシェア
• ターミナルのシェア
• ローカルサーバのシェア
• Visual Studio と Visual Studio Code で問題ない
• OS 違っても問題ない

41. IOT 開発も VSCODE で

42. IoT Hub に接続している
デバイスの状態監視や
メッセージ送受信が可能

43. まとめ

44. まとめ
• コーディングに関する機能・拡張はとても充実
• コンテナ開発やクラウド連携も簡単
• Git 連携や、GitHub も便利に
• 遠隔ペアプロも！
• コードのシェアだけじゃない！
• ターミナルやローカルサーバもシェアできる

45. Let’s code!

46. その他参考資料
Visual Studio Code で快適開発生活 -拡張を作って公開しよう-
https://www.slideshare.net/sakkuru/visual-studio-code-77025428