Visual Studio Code はエンジニアのみなさんでしたら、とても馴染み深い印象をもたれているのではないでしょうか？現在、私はマイクロソフト社で Developer Advocate として VS Code 開発チームとも一緒に働いています。今回は Developer Experience の観点から、マイクロソフトの開発者たちと試みた取り組みに関してご紹介します。今回の試みでは、開発者の体験をより良いものにし、モチベーションを上げるために、開発者ならば誰もが好きな VS Code のエクステンションを使ったアイデアを実施しました。また、技術的な観点から VS Code の新機能や、これからの取り組みについてもお話ししたいと思っています。

1. Better Developer
Experience with VS Code
VS Code で試みる開発体験の向上
Tomomi Imura

2. Aloha!
I am Tomomi Imura
Principal Cloud Advocate at Microsoft
@girlie_mac on Twitter
@girliemac on GitHub
2

3. “
3
I love you but I hate you
- 匿名 Teams アプリ開発者

4. Microsoft Teams Platform
Teams の開発は簡単ではない
⩥ 複数のテクノロジースタ
ック(Azure, bot frameworks,
Graph API など)
⩥ 初期設定が面倒
⩥ 学習曲線が激しい
4
Proficiency
(Score)
Experience (hours)
Learning Curve (Example, not actual!)

5. Example: Teams Bot Dev Flow
⩥ M365 開発アカウント登録
⩥ Azure ユーザ登録
⩥ Azure AD でのアプリ登録
⩥ Bot Framework でのボット登録
⩥ App manifest (JSON) の作成と App ID を紐づけて
アプリを設定
⩥ コード & デバッグ
⩥ Teams クライアントでテスト
⩥ パブリッシュ
5

6. “
6
I just hate you 🖕
- 匿名 Teams アプリ開発者

7. “
7
だけど VS Code は好き
- 匿名 Teams アプリ開発者

8. Tools Developers Love
OMG, we are so lucky to have ‘em!

9. 9
Web Devs cannot
live without
いわゆるde-facto スタ
ンダードと呼ばれる開
発ツールを持っていて
ラッキー！
GitHub
Edge / DevTools
VS Code

10. Teams Toolkit for VS Code
開発者の苦悩を和らげるレスキュー！
10

11. Teams Toolkit for VS Code
11

12. Teams Toolkit for VS Code
12
アプリ雛形を
新規で作成
複数の dev env
コード
テンプレート

13. Teams Toolkit for VS Code
13
F5

14. Example: Teams Bot Dev Flow
⩥ M365 開発アカウント登録
⩥ Azure ユーザ登録
⩥ Azure AD でのアプリ登録
⩥ Bot Framework でのボット登録
⩥ App manifest (JSON) の作成と App ID を紐づけて
アプリを設定
⩥ コード & デバッグ
⩥ Teams クライアントでテスト
⩥ パブリッシュ
14

15. Dev Flow with Teams Toolkit
直感的な UI Tool / CLI
アカウント・ログインの簡素化
Bot Framework へのボット登録の自動化
App ID と App manifest の紐付けと設定の自動化
雛形コード自動作成と、サンプルの充実
F5 での コードデバッグ
F5 でアプリを Teams クライアントにインストール
デプロイアシスト
15

16. More
TeamsFx (共通機能を備えたライブラリ)
複数環境サポート
コラボマネージメント
ARM & Bicep を使った Azure プロビジョン
CI/CD
シナリオ・ベースの雛形アプリ
Teams Toolkit for Visual Studio for .NET devs!
16

17. More VS Code Extensions by Microsoft
拡張機能で開発者体験をもっと豊かに
⩥ Azure Tools
⩥ TypeScript intellisense
⩥ ES Lint for VS Code integration
⩥ Jupyter Notebook support
⩥ Japanese Language Pack
⩥ Edge DevTools for VS Code
⩥ 社内向けツール
17

18. More VS Code Extensions by Microsoft
18

19. More with VS Code & GItHub
I am bragging about cool stuff

20. VS Code & GitHub What’s New
⩥ Remote development
⩥ Codespaces
⩥ vscode.dev
⩥ VS Code Server
⩥ CoPilot
20

21. Release Timeline
21
Vscode.dev
2021
Vscode.dev
Remote Dev
2019
Remote
Development
Codespaces
2020
GitHub
Codespaces
Copilot
2021
GitHub Copilot
VS Code Server
2022
VS Code Server

22. Remote Development
⩥ コンテナ
⊳ Docker
■ devcontainer.json でのコンテナの設定
⩥ リモートマシン / VM
⊳ SSH
⩥ Windows Subsystem for Linux (WSL)
22
🔗 code.visualstudio.com/docs/remote/remote-overview

23. GitHub Codespaces
ブラウザ、または VS Code で動くクラウドベース環境
23
🔗 github.com
/features/codespaces

24. VSCode.dev – VS Code on Browser
24
🔗 vscode.dev

25. VS Code Server
自分の開発マシンを VS Code Server にして
どこからでも vscode.dev で接続しよう
25
🔗 https://code.visualstudio.com/docs/remote/vscode-server

26. VS Code Server
iPad 上でもコードができる!
26
vscode.dev/+ms-vscode.remote-server/
My-app:8000/home/tomomi/…

27. GitHub Copilot
27

28. TikTok @vscode
VS Code チームからの最新
ニュースや Tips & Tricks を
TikTok でお届け
28

29. VS Code Roadmap
github.com/microsoft/vscode/wiki/Roadmap
29

30. 30
Mahalo!
@girlie_mac