2021/03/05 Open Source Conference 2021 Online/Spring Video: https://www.youtube.com/watch?v=ltfffeN4WzQ Conf URL: https://event.ospn.jp/osc2021-online-spring/ VS Code がいかにオープンソースと一緒に成長してきたが、いろいろとヒントになればうれしいです。

1. Visual Studio Code のこれまでとこれから
平岡 一成 @hoisjp 2021/03/05 12:00-12:45
OSC2021 Online/Spring

2. Speaker: Issei Hiraoka | @hoisjp, hashtag: #osc21on, アンケート: https://bit.ly/OSC2021Spring_Form
参加アンケートにご協力を！
https://bit.ly/OSC2021Spring_Form
（・・・アンダースコア・・・）
書籍プレゼントがございます
平岡 一成（ひらおか いっせい）
Twitter / GitHub / LinkedIn :
@hoisjp
昨年、VS Code の書籍を執筆
プログラマーのための
Visual Studio Codeの教科書
日本マイクロソフトで
クラウドの仕事をしています
de:code 2019 “どっちの VS ショー”

3. Speaker: Issei Hiraoka | @hoisjp, hashtag: #osc21on, アンケート: https://bit.ly/OSC2021Spring_Form
内容は以下イベントから和訳＆加筆したもの
10年間のまとめセッション
Microsoft Build 2020
The History of Visual Studio Code
by Erich Gamma
https://channel9.msdn.com/Events/Build/2020/BDL134
VS Code Day; Keynote (2021/01/27)
VS Code an Overnight Success…
10 years in the making by Erich Gamma
https://code.visualstudio.com/vscode-day
https://channel9.msdn.com/Events/Visual-Studio-Code/VS-Code-Day-2021/Keynote

4. Speaker: Issei Hiraoka | @hoisjp, hashtag: #osc21on, アンケート: https://bit.ly/OSC2021Spring_Form
Erich Gamma?
日本語表記では、”エリック ガンマ”
2011年にマイクロソフトにジョイン、VS Code の開発
それ以前は、Eclipse (Plugin)、JUnit (w/ Kent Beck)、・・・
Design Patterns
Elements of Reusable Object-Oriented Software
オブジェクト指向における再利用のためのデザインパターン
1995年
GoF (Gang of Four)

5. Speaker: Issei Hiraoka | @hoisjp, hashtag: #osc21on, アンケート: https://bit.ly/OSC2021Spring_Form
実はこの登壇の話をいただいてから・・・
そうだ、メールを送ってみよう
私 「Hi, Erich, … 」
私 「3月にオープンソースカンファレンスという、日本で最大のオープンソース関
連カンファレンスがあって・・・」
私 「あなたのスライドの画像などを使ってもいいですか？？」
・・・その当日に・・・
Erich
「Hi, this is OK for me, good luck with your talk! --erich」

6. Visual Studio Code のこれまで
History

7. Speaker: Issei Hiraoka | @hoisjp, hashtag: #osc21on, アンケート: https://bit.ly/OSC2021Spring_Form
2011 The Mission
振り返ってみると、大事な始まり
ブラウザでコーディングができるように、つまり Web IDE
Erich Gamma はこのためにマイクロソフトに入社
チューリッヒ（スイス）の小さなチームでスタート
資金を得るためにまずは成果物を

8. Speaker: Issei Hiraoka | @hoisjp, hashtag: #osc21on, アンケート: https://bit.ly/OSC2021Spring_Form
2011 “Monaco”
最初の成果物
• パフォーマンス優先
• 当時最新の HTML5 技術で
• Intellisense
• 当時から、UI フレームワークを
使わないことを意思決定

9. Speaker: Issei Hiraoka | @hoisjp, hashtag: #osc21on, アンケート: https://bit.ly/OSC2021Spring_Form
2011 “Monaco” Workbench
ドッグフード版
• インターナル
• 自動保存
// 実は、いまだにデフォルトONにする勇気がない

10. Speaker: Issei Hiraoka | @hoisjp, hashtag: #osc21on, アンケート: https://bit.ly/OSC2021Spring_Form
TypeScript へ
2年間で徐々に
2011 ほぼ JavaScript
2012 半分を TS へ
2013 すべて TS へ
“TypeScript なしでは
10年間コードを柔軟に保つことは
無理だった”

11. Speaker: Issei Hiraoka | @hoisjp, hashtag: #osc21on, アンケート: https://bit.ly/OSC2021Spring_Form
2013 Visual Studio Online “Monaco”
順風満帆ではなかった
Azure Web Sites のエディタとして
Explorer, Git, 検索, プログラム実行
など、原型となる機能が実装される
開発チームとしては満足していたが、
多くても 3000 users / month 増
これはまさにスタートアップの課題
会社に求められたのはこの10倍以上の成果
余談：モナコ王国から製品名への指摘が

12. Speaker: Issei Hiraoka | @hoisjp, hashtag: #osc21on, アンケート: https://bit.ly/OSC2021Spring_Form
2013 Visual Studio Online “Monaco”
決断と転機
さあ、このまま続けるか、ピボットするか
そこで会社、マイクロソフトとしても転機が訪れる
• Windows から クロスプラットフォームへ
• オープンソースやオープンスタンダードを取り入れていく
• （サティアナデラがCEO就任したのは2014年2月）

13. Speaker: Issei Hiraoka | @hoisjp, hashtag: #osc21on, アンケート: https://bit.ly/OSC2021Spring_Form
2014 VS Code へピボット
クロスプラットフォームとウェブデベロッパーにターゲット
彼らが使うのは、多くの開発言語、多くのツール、それぞれ異なるランタイム
チャレンジは、2015年までに完了したいと宣言したこと
何とか Microsoft BUILD 2015 のイベントまでに

14. Speaker: Issei Hiraoka | @hoisjp, hashtag: #osc21on, アンケート: https://bit.ly/OSC2021Spring_Form
2014 どんなピボットだったのか
エディターとIDE
VS Code が狙ったのは、その2つの中間
ブラウザからデスクトップへ
幸運にも当時、Electron が登場 (Node WebKit, Atom Shell, etc)
Electron によって、クロスプラットフォームでのつらさ、特にテストの問題を解消

15. Speaker: Issei Hiraoka | @hoisjp, hashtag: #osc21on, アンケート: https://bit.ly/OSC2021Spring_Form
2015 //build (May) VS Code Preview
ついに登場
当日のデモ
• .NETをLinuxマシン上でデバッグ
同時に多くの素晴らしいフィードバックを得る
• クロスプラットフォーム＋＋
• オープンソースへ要望（実際は多言語を実装するうえでもともと必須だった）
そしてカンファレンスドリブンで次のタイミングは6か月後の Connect()

16. Speaker: Issei Hiraoka | @hoisjp, hashtag: #osc21on, アンケート: https://bit.ly/OSC2021Spring_Form
2015 Connect() (Nov) VS Code to OSS
その場で Microsoft/vscode のプライベートリポジトリをパブリックリポジトリへ
Visual Studio Code, now open source, with extensibility | Connect(); // 2015 | Channel 9 (msdn.com)

17. Speaker: Issei Hiraoka | @hoisjp, hashtag: #osc21on, アンケート: https://bit.ly/OSC2021Spring_Form
2015 Connect() (Nov) Extension API
いまやなくてはならない機能その１⇒拡張機能が初めてデモでお披露目
拡張機能の課題
ここでもパフォーマンスを重視
別プロセスで拡張機能を実行
コアへの影響を最小限に
根本から拡張APIの設計

18. Speaker: Issei Hiraoka | @hoisjp, hashtag: #osc21on, アンケート: https://bit.ly/OSC2021Spring_Form
2016 LSP – Language Server Protocol
次のチャレンジは、どうやってマルチ言語をサポートするか

19. Speaker: Issei Hiraoka | @hoisjp, hashtag: #osc21on, アンケート: https://bit.ly/OSC2021Spring_Form
2016 レドモンドチームが結成
チューリッヒの小さなチームから拡大することを決定
Eclipse チームからもメンバーがジョイン
Integrated Terminal 統合ターミナルの実装
xterm.js をベースに
xterm.js 側へのコントリビューションも
活発に行われた

20. Speaker: Issei Hiraoka | @hoisjp, hashtag: #osc21on, アンケート: https://bit.ly/OSC2021Spring_Form
2016 “Open in VS Code” へ
さて次に何をしようか
Git リポジトリ上で作業できたら便利じゃない？
• その場でファイルを開いて、F5で実行して、その場でプルリクエストしたら
• でも難しさもわかっていた。ブラウザ上で拡張も動かさなくてはいけない。
• しかしここでもタイミングに恵まれる。マイクロソフトが WSL (Windows
Subsystem for Linux) の提供を始める

21. Speaker: Issei Hiraoka | @hoisjp, hashtag: #osc21on, アンケート: https://bit.ly/OSC2021Spring_Form
2017-2019 VS Code Remote
リモート環境で VS Code を実行する
拡張機能がリモートで動いたらば、いろんな環境で VS Code が使える！

22. Speaker: Issei Hiraoka | @hoisjp, hashtag: #osc21on, アンケート: https://bit.ly/OSC2021Spring_Form
2019 現在の VS Code Remote
決定打となる機能
３つの環境をサポート
• WSL
ローカルの Linux
• Container
ローカルの コンテナ
• SSH
SSH接続した外部マシン

23. Speaker: Issei Hiraoka | @hoisjp, hashtag: #osc21on, アンケート: https://bit.ly/OSC2021Spring_Form
デモ – VS Code Remote; Container
なにが起きるか
GitHub リポジトリからクローンしてくる
この時点で、ローカル環境には、必要なものが何もインストールされていない
VS Code からコンテナ環境を起動して接続する
コンテナや拡張は、リポジトリ上の設定ファイルにしたがって自動的に構築される
そのリポジトリで必要な環境は、すべてコードで定義されている

24. Speaker: Issei Hiraoka | @hoisjp, hashtag: #osc21on, アンケート: https://bit.ly/OSC2021Spring_Form

25. Speaker: Issei Hiraoka | @hoisjp, hashtag: #osc21on, アンケート: https://bit.ly/OSC2021Spring_Form
2020 ブラウザへ回帰 VS Code Web
ついにオンラインエディターの原点回帰！

26. Speaker: Issei Hiraoka | @hoisjp, hashtag: #osc21on, アンケート: https://bit.ly/OSC2021Spring_Form
2020 そして GitHub へ
VS Code in GitHub, GitHub in VS Code
GitHub Extension
GitHub Codespaces

27. Speaker: Issei Hiraoka | @hoisjp, hashtag: #osc21on, アンケート: https://bit.ly/OSC2021Spring_Form
たどりついた現在

28. Speaker: Issei Hiraoka | @hoisjp, hashtag: #osc21on, アンケート: https://bit.ly/OSC2021Spring_Form
2011-2021 ずっと継続してきたこと
継続は・・・なんとやら
毎月リリース
継続的に 負債を減らす
イテレーションの中で1週間は時間をとる
継続的に 意見を聞く
投票された機能、ペインポイント
継続的に パフォーマンスにフォーカスする
ツール、ボットをつかって常に計測

29. Visual Studio Code のこれから
Next

30. Speaker: Issei Hiraoka | @hoisjp, hashtag: #osc21on, アンケート: https://bit.ly/OSC2021Spring_Form
Next; ロードマップ
GitHub でも公開されている https://github.com/microsoft/vscode/wiki/Roadmap
Testing
編集する、デバッグする、は すでに揃ってきた
このエリアはコミュニティドリブン開発に大きく任せている
Notebooks
Jupyter Notebook https://jupyter.org/ が VS Code 上で動作
Codespaces

31. Speaker: Issei Hiraoka | @hoisjp, hashtag: #osc21on, アンケート: https://bit.ly/OSC2021Spring_Form
Testing (Work in Progress)

32. まとめ
Closing

33. Speaker: Issei Hiraoka | @hoisjp, hashtag: #osc21on, アンケート: https://bit.ly/OSC2021Spring_Form
VS Code が成功のためにしてきたこと
10年間の軌跡
Be patient 辛抱強く
Be persistent 頑固に
Be fit 準備万端にしておく
Be willing to pivot ためらわずにピボットする
... Be lucky そして運

34. Thank you.
#HappyCoding!
ありがとうございました