[POST.Dev Japan] VS Code で試みる開発体験の向上
•
1 j'aime•155 vues
Visual Studio Code はエンジニアのみなさんでしたら、とても馴染み深い印象をもたれているのではないでしょうか？現在、私はマイクロソフト社で Developer Advocate として VS Code 開発チームとも一緒に働いています。今回は Developer Experience の観点から、マイクロソフトの開発者たちと試みた取り組みに関してご紹介します。今回の試みでは、開発者の体験をより良いものにし、モチベーションを上げるために、開発者ならば誰もが好きな VS Code のエクステンションを使ったアイデアを実施しました。また、技術的な観点から VS Code の新機能や、これからの取り組みについてもお話ししたいと思っています。
Recommandé
Recommandé
Contenu connexe
Similaire à [POST.Dev Japan] VS Code で試みる開発体験の向上
Similaire à [POST.Dev Japan] VS Code で試みる開発体験の向上 (20)
Plus de Tomomi Imura
Plus de Tomomi Imura (20)
[POST.Dev Japan] 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/…
- 28. TikTok @vscode VS Code チームからの最新 ニュースや Tips & Tricks を TikTok でお届け 28