はじめての VS Code and Codespaces

この記事は2020年11月21日に実施された[VS Code Conference Japan](https://vscode.connpass.com/event/184441/)で発表した[はじめての VS Code and Codespaces](https://speakerdeck.com/suzukin/hasimetefalse-vs-code-and-codespaces)の振り返りです。[アーカイブ動画](https://www.youtube.com/watch?v=GqC5wQV2bG8&t=4114s)もアップされているのであわせてご覧ください。

MicrosoftでCommunity Advocacy Program Managerを担当しているNori Suzuki ([@szkn27](https://twitter.com/szkn27))です、[VS Code Meetup](https://vscode.connpass.com/) をはじめいろんなコミュニティやイベントを立ち上げてきました、来年もいろいろやりたいけどそろそろ首が回らなくなってきたぞ。。

## VS Code 誕生の歴史

まずはアイスブレイクとしてここから振り返ってみましょう。Visual Studio Code（以降、VS Codeに省略）は2015年のConnect();で、Erich Gammaの手によってオープンソース化されました。壇上でGitHubのリポジトリがPrivateからPublicに切り替えられる[デモ](https://www.youtube.com/watch?v=x4-J1MpMGog)が話題になったので覚えている方もいるかもしれません。テクノロジー的にはMonacoと呼ばれるオンラインのエディターとGitHubがオープンソースで開発していたElectronというクロスプラットフォームのフレームワークを組み合わせて作られていました。

![Screen Shot 2020-12-01 at 23.12.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33718/c3acfaa1-d879-9939-fe45-1afe7ecb6cce.png)

## 最も人気のある開発ツール & 最も貢献者が多いOSSプロジェクト

VS Codeを語る上でよく出てくる数字をピックアップしています。まずは、Stack Overflowによる[Developer Survey 2019](https://insights.stackoverflow.com/survey/2019#development-environments-and-tools)、VS Codeは競合を抑えて最も人気のある開発環境として実に半数以上の回答を得ています。
![Screen Shot 2020-12-01 at 23.13.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33718/34643360-287a-4799-5b70-647e7be68ec2.png)

次にGitHubによる[The State of the Octoverse](https://octoverse.github.com/#top-and-trending-projects)の調査結果より。先ほどは利用者視点ですがコントリビューターの数もGitHub上の多くのオープンソースプロジェクトの中で最も多く、良いエコシステムができているプロジェクトだと言えるでしょう。
![Screen Shot 2020-12-01 at 23.13.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33718/a48a4c53-de11-8417-cbb6-7edc7880ef39.png)

## VS Code is なに？

ということでここから本題です。VS Codeを一言で説明すると「マイクロソフトがオープンソースとして開発しているコードエディター」と言えます。公式サイトは[こちら](https://code.visualstudio.com/)。

マイクロソフトってWindows/Officeの会社と思われがちですが、Visual Studioというブランドで長らく開発者向けのツール、サービスを展開してきました。そんなシリーズの中において、VS Codeはオープンソースとして[ソースがすべて公開](https://github.com/microsoft/vscode)されフリーで利用できるだけでなく、[ロードマップ](https://github.com/microsoft/vscode/wiki/Roadmap)などもすべて公開さた状態でオープンなコミュニティによって開発・運用されているのが特徴と言えます。また、よくあるエディターとIDEの違いでは、VS Codeはエディター側に属するとされていますがVS Codeができることは（後述する拡張機能などもあり）どんどん増えていて、IDEと遜色ないレベルで使用できるようになってきています。

### Visual Studio

もし開発を進めていく上で、何を使ったらよいか迷っているようであれば[Visual Studioの公式サイト](https://visualstudio.microsoft.com/ja/)からアプリの種類やテクノロジーなどからやりたいことを選択するとオススメのツールをアドバイスしてくれる便利な機能があるのでぜひ試して見てください。VS Codeの他に、Visual Studio IDEとあまり知られてないですがVisual Studio for Macもあります。
![Screen Shot 2020-12-01 at 23.20.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33718/675fd91c-0572-5717-c711-ae9885bbaa80.png)

そしてLinuxも含めてあらゆる環境で動作するのもVS Codeの大きな特徴の1つです。話題のM1 MacのARMベースにも対応すべく開発が進められています。
![Screen Shot 2020-12-01 at 23.23.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33718/beef47f6-6d10-858a-abcc-050287e57971.png)


### 拡張機能と言語サポート

そして最大の特徴とも言えるのが便利な拡張機能と、言語サポートです。2万を超える拡張機能によってVS Codeは協力なエコシステムを形成しており、多くの開発言語・フレームワークにとって使いやすいものになっています。
![Screen Shot 2020-12-01 at 23.24.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33718/deb3e622-4863-dec3-2a86-e1f0f2fe9807.png)


## Remote Development

さてここから少し話題が変わり、開発環境の変化とトレンドについて見ていくことにしたいと思います。近年の開発スタイルとして、ローカルの環境を汚すことなく開発環境をリモート側に用意する[Remote Development](https://code.visualstudio.com/docs/remote/remote-overview)と呼ばれる手法が登場しています。例えばFacebookの事例として、開発チームの環境をAtomからVS Codeに移行し[マイクロソフトと一緒にリモート開発を推奨していくアナウンス](https://developers.facebook.com/blog/post/2019/11/19/facebook-microsoft-partnering-remote-development/)がありました。
![Screen Shot 2020-12-01 at 23.30.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33718/b0f28ce8-5244-ef7a-be88-17c715ab5b21.png)

一概にリモート開発と言っても様々なパターンがあります、チュートリアルでは大きく以下の4つを紹介しています。VMにSSHで接続するパターン、WSLと呼ばれるLinuxのSubsystemや、Dockerコンテナを利用するパターン、そしてこのあと説明するSaaS環境であるCodespacesです。

- Remote via SSH
- Work in WSL
- Develop in Containers
- GitHub Codespaces

### Visual Studio Codespaces Consolidation
 
Codespacesですが、1つ注意点として、これまでVisual Studio Codespacesとして提供されていましたが、今後はGitHub Codespacesへ統合されることが決まっています。以下のロードマップで順次移行していきますのでご注意ください。また現状はプレビュー版で、アクセスリクエストを受付中です（使えるようになるには時間がかかります）。
![Screen Shot 2020-12-01 at 23.52.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33718/d66e56bb-db7d-2458-532f-bfcb3296c48b.png)


- 2020/9/4 アナウンス
- 2020/12/16 新規作成停止
- 2021/2/17 VS Codespacesサービス停止

### Microsoft developer cloud

最後にこのVS Codeでマイクロソフトが目指している世界観として、VS CodeだけではなないですがVisual Studio Familyから開発者の皆さんが自分たちが好きなツールを選んでもらって、それをGitHubにホストします。デプロイ先としてはマイクロソフトだったらAzureというクラウドサービスがあります。このように開発環境からデプロイ先までがシームレスに繋がることでチーム開発をより加速させていくことを目指しているわけです。
![Screen Shot 2020-12-01 at 23.41.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33718/7236612d-aebc-b61d-1ef9-651810a97031.png)


---
いかがでしたか？ VS Codeはもはやただのエディターではなく様々な開発シーンにとって必要不可欠なプラットフォームになっていることがお分かりいただけたのではないでしょうか。皆さんが使いやすいようにカスタマイズしたり、拡張機能を作ったり、本体にパッチをおくることだってできちゃいます。ぜひこのオープンなコミュニティ参加してみてください！

[VS Codeアドベントカレンダー](https://qiita.com/advent-calendar/2020/vscode)、続いては @74th さんです、よろしくお願いします！