C-3TO

3年でCTO。的な

(おそらく)日本初のVSCode MeetUpに参加してきた!

12/18に株式会社オプティムで開催されたVS Code Meetup #1に参加してきました

f:id:poul8et6:20191219131228j:plain
最後に撮った全体写真、すごい人数だ

今までありそうでなかったVS CodeのMeetup

VSCodeの変遷や基本機能を教えてもらえるSessionや、各々の使いこなし方を紹介するLTまで盛りだくさんのMeetupでした

当日の盛り上がり具合は以下のtwitterのリンクか、#vscodejpで検索してみてください

#vscodejp - Twitter Search

個人的に気になったものをまとめておきます

Session1 VS Codeの変遷と今後の展望

戸倉彩さん @ayatokura が発表してくれました

エディタをどう選ぶかという話からスタートしました

エディタ自体はエンジニアじゃなくても使えるもの (マークダウンで記事を書きたいときなど)

またエンジニアとしてプロダクトに関わるときはIDE (統合開発環境)が欲しくなってくる

エディタに求められる軽量さ、高速さに対しIDEにはソースコード解析、デバッグといった機能が求められる

戸倉さんの意見としてはVSCodeはエディタとIDEの中間に位置し、各々に合わせた使い方が可能とのことです

f:id:poul8et6:20191219132814j:plain
エディタ、IDE、そしてVS Codeの位置関係と特徴

ただ個人的にはVSCodeはもうちょっとIDEよりかなーと思ってます

ちなみにエディタの選び方は試してみて相性のいいものを選ぶのがいいそうです

そして下の写真がこのセッションで一番衝撃的だったスライド

f:id:poul8et6:20191219133150j:plain
しらんw

知らない色のVS Codeのアイコンあるし一番右に関してはもうおれの知ってるアイコンですらない!

なんとVSCodeには青、緑、オレンジ、アイコン違いの4種類があるそうです

青いのがVS Code stable、一番メジャーな安定板です

緑はVS Code Insiders、まだ安定板になっていない最新版、いわゆるベータ版です

下のリンクからインストールできます

code.visualstudio.com

オレンジ色のはVS Code Exploration、きちんと理解できてないんですがVS CodeはElectronで動いているらしくて、Electronのアップデートのみ取り込んでいるのがVS Code Exploration (なのかな?)

どこからインストールするかわからなかったのですが issueにインストーラーをあげてる人を発見しました

Explore update to Electron 3 · Issue #52629 · microsoft/vscode · GitHub

Explore update to Electron 4 · Issue #61787 · microsoft/vscode · GitHub

最後のアイコンすら違うやつはVS Code oss、生 (?)のVS Codeです

以下のGithubリポジトリをクローンしてbuildするとあのアイコンのVS Codeがあらわれるそうです

GitHub - microsoft/vscode: Visual Studio Code

これを使えばオレオレVS Codeなるものが作れるらし、、

あとは意見を言っていこうという話でした

twitterで@codeとつけて英語で呟けば結構キャッチしてくれるらしいです

ほしいなあーと思う機能はたくさんあると思うのでその場でつぶやいてみましょう

Session2 基本機能と拡張機能

さっくるさん @sakkuru

VS Codeのアクティビティバー (横にあるアイコンが縦に並んでるやつ)の初期からある5つのアイコンについてざっと説明してくれました

僕は普段nodeとか使わないのでdebugは触ったことないですがあとはよく使いますよね

あとはいろんな設定ファイルについての説明

設定のjsonファイルが.vscode/にあります

例えばextension.jsonにはオススメのextensionを書いておけます

それをgithubに置いておくと、cloneしてきた人の手元のVS Codeリポジトリを開いた時にextension.jsに書いてある拡張をレコメンドしてくれます

プロジェクトにあった拡張を使えて便利だし、強制的にインストールしないのもありがたい

よく使うコード (console.logとか)を登録しておくと登録名ですぐに書けますし、さらにカーソルの位置も設定できるのですぐに括弧の中にカーソルを合わせることもできます

その次はLive Shareの紹介!

Live Shareでリンクを送ると自分のローカルのファイルを複数人で編集可能 => ペアプロに便利です

会場では実際にVS Codeをslack連携して (地味に驚いた)slackにリンクを送り、会場の参加者と実際に同時編集をしていました

f:id:poul8et6:20191219203127j:plain
イタズラされてるw

その他ローカルのサーバーや、ローカルのshellまで共有可能だそうです (kowasugi、、)

LT 個人的に気になったもの抜粋

LTは9人の方が発表してくれました!

どれも面白かったんですが盛りだくさんだったので個人的に気になったものを抜粋します

extension編

Github Pull Request

github.com

VS Code上PRのコメント、レビュー、draftPRの作成も可能な拡張

先輩に話したら「VS Code使う人って全部VS Code上で完結させたがるよね」って言われました。確かに、、w

Github Lense

github.com

コードの変更履歴とコミットメッセージが見れる

誰がいつどういう意図でこのコードを書いたのかがわかります、メッセージがちゃんとしてれば、、

Github History

marketplace.visualstudio.com

Gihub likeなリッチな見た目のhistoryが見れる

個人的にVS Codeのgitの機能にgit logないよなあと思ってたので早速入れました!

今までGit系の機能はdefaultしか使って無くて拡張入れてなかったけどめっちゃ便利そう

もっと色々ありそうなんで調べてみようと思いました

機能編

Remote Development

VSCodeからsshしたサーバーやdockerコンテナの中のコードを編集可能な機能

いちいちdocker execして慣れないvimで編集とかやってたことを考えると結構良さそう

うちの会社でもメモリ不足の対応としてEC2に開発環境作るの流行ってるけどその人たちがやってたやつだ!っと思って見てました

VSCode上でport forwardとかもできるの知らなかったので驚きでした

LTしてくれた方の資料は以下のリンクから見れます

他にも面白い話がたくさんあったのでぜひ見てみてください

speakerdeck.com

speakerdeck.com

speakerdeck.com

まとめ

毎日VS Code使っているのにまだまだ知らないことがたくさんあるんだなあと思いました

次回は1/23、東京と大阪の同時開催だそうです

ぜひ参加してみてください

vscode.connpass.com