VS Code Conference Japan 2024 に参加した & LT した

に参加 & LT してきました。非常に面白いイベントだったので感想をまとめます。

(※ 各セッションのスライドや録画は https://vscode.connpass.com/event/308890/ から見れます。当日の反応とかは https://togetter.com/li/2353434 から見れます。)

各セッションの感想

基調講演: Marp for VS Code 拡張機能開発の舞台裏

• スライド: https://yhatt.github.io/vscode-conf-jp-2024/
• 録画: https://www.youtube.com/live/nWD0EBSMah8?si=l4ewBACLSmvff1Rd&t=1372

基調講演は Marp の作者の Yuki Hattori さん (https://twitter.com/y_hatt) によるもので、 Marp をどう開発したか、どう設計したかを話してくださいました。個人的に Marp はめちゃくちゃお世話になっている (Markdown でスライドを作れる Marp はいいぞ #Marp - Qiita) ので、非常に気になっていた発表でした。

実際の発表も、初期の Marp は独自のエディタを含めて開発していたが、既存のエディタに組み込めるようにモジュラーな設計として再設計したことなど、 Marp の歴史や設計として工夫した点が聞けてとても興味深かったです。

また、VSCode の拡張を作ったことで、 VSCode の進化 (Live Share, vscode.dev, Copilot) による恩恵を受けられ、さらなる価値を提供できるようになった、というのもプラットフォームの恩恵をうまく受けられた例として面白かったです。

セッション

VS Code の色々な機能の解説、カスタマイズ方法、拡張機能の紹介や、拡張機能を作った話や Language Server などの言語補助ツールなどなど、かなり幅広いトピックについてのセッションがありました。それらも紹介します。

(スポンサーセッションなどについては割愛しますが、そちらも色々実用的な話が多く面白かったです )

• スライド: https://yuheifujita.github.io/slide-20240420-vscode/1
• 録画: https://www.youtube.com/live/nWD0EBSMah8?si=ti_7YLsVIRoRB22M&t=5858

GitHub Codespaces の概要と、チーム開発における実例の紹介でした。

Codespaces、従量課金なのと設定方法がわからず敬遠していたのですが、料金体系の解説があったり、個人だと無料枠で結構使えたり、 dotfiles リポジトリを参照して環境構築してくれるという話を聞いて実際に試してみようかな、と思いました。
また、Codespaces が GitHub 上から簡単に立ち上げられて、コードレビューでそれ用の環境を作れるというのは結構便利そうでした (ローカルだと、開発中のコードを退避させるのとかで面倒な部分もあるので)。

• スライド: https://ftnext.github.io/2024-slides/vscodeconjp/transform-text-commands.html#/
• 録画: https://www.youtube.com/live/nWD0EBSMah8?si=o-7s8iBIbqwrLZ4O&t=8360
• ブログ: https://nikkie-ftnext.hatenablog.com/entry/vscode-conference-jp-2024-talk

VSCode に Transform to ... というコマンドがたくさんある (CamelCase, snake_case などの変換ができたりする) のですが、それの内部実装を追いかけてみる発表でした。

これらのコマンドを知らなかったので、単純に便利そう…！って思ったのと、これらの実装に共通のパターンが用意されていているのはなるほどだったり、変換には正規表現を駆使していたりなど、一緒にコードリーディングして、中身を追っていく感じが面白かったです。

VS Code 本体は結構コード読むのにコツがいる印象で、慣れている人がナビゲートしながら見ていくのは学びとして良さそう。

• スライド: https://speakerdeck.com/onomax/vs-code-wopurodakutonidouqu-riip-muka
• 録画: https://www.youtube.com/live/nWD0EBSMah8?si=DmrZ04vQ71261-E7&t=9444

Launchable の方が、入社時に Launchable の VSCode 拡張を作ったが、実際にユーザーにあまり使ってもらえてなかった反省を元に、(他の VS Code 拡張から学んで) ユーザーにとって便利な機能を開発につなげた、という話でした。

作った機能や仕組みが使われない、というのはエンジニアやっててめちゃくちゃ耳の痛い話ですごく共感できるのと、既存のうまく行っている拡張から体験や設計を学ぶというのも、発想として面白く、今後参考にしていきたいなと思いました。

• スライド: https://speakerdeck.com/ikumatadokoro/jian-tamu-karashi-merusheng-chan-xing-xiang-shang
• 録画: https://www.youtube.com/live/nWD0EBSMah8?si=DmrZ04vQ71261-E7&t=9444

VS Code を使いやすいようにカスタマイズしていく話です。

カスタマイズのときに何を考えているのか、どういうアプローチで使いやすくしているのか、実際に便利だったカスタマイズ方法、こんなところまでカスタマイズできるなどのポイントなど、発表から得られるアイデアがたくさんあって面白かったです。
実際にスライド見るだけでも得られる情報たくさんあるのでおすすめです。

• スライド: https://speakerdeck.com/smt7174/vs-codedeawswocao-zuo-siyou
• 録画: https://www.youtube.com/live/nWD0EBSMah8?si=pbajcHc-CDnnCl3q&t=12851

AWS の VS Code 拡張についての紹介でした。

Marp でも感じるのですが、エディタから離れずに作業できるのはそれだけで体験がめちゃくちゃ良さそうで興味深いです。Step Function, Application Composer など、GUI で編集する系のツールは、 VS Code と相性が良さそうに感じました。S3 などのバケット操作をエクスプローラ風に出来るのも刺さるシーンがありそうです。

• スライド: https://speakerdeck.com/unvalley/typescript-linnting-and-formatting
• 録画: https://www.youtube.com/live/nWD0EBSMah8?si=IyBFyX1I1K9Ga6iR&t=15291

biome の core contributor の方による、言語ツールの VS Code 拡張の仕組みの話でした。

言語ツールのエディタ拡張ってめちゃくちゃ王道で、多分全員作りたいなと思った事あると思うのですが、(チュートリアルあるとはいえ) 実際やってみると結構調べないといけないこと多かったりするのですが(実体験)、この発表はそういった情報がすごくまとまっていて、非常に良さそうでした。

発表で紹介されていた Editor Tooling (Linting, Formatting and others) saves Our Time という考えもすごく分かると感じました…。自分もみんなの時間を save する何かを作っていきたいです。

• スライド: https://www.docswell.com/s/shosuz/K24DDE-2024-04-20-180008
• 録画: https://www.youtube.com/live/nWD0EBSMah8?si=1lNpJKybZxpNGW_Q&t=16636

様々な AI ツールの VS Code 拡張を使って、モバイルアプリのフロントエンドとバックエンドを作成する話でした。

これは VS Code の話というか AI ツールをうまくプロトタイピングのフェーズに落とし込む例として面白く、画面とその遷移フローを AI (Uizard) に作成させ、それを元に別の AI ツール (Figma, Locofy.ai) で CSS, React を生成し、細かい修正やコードの説明を Copilot に任せるなど、AI ツールをパイプラインの如く組み合わせて、開発フローの殆どを AI が行っていて、これは AI に仕事が奪われるのがすぐそこに来ているのでは…？と感じてしまうレベルでした。

パネルディスカッション

• 録画: https://www.youtube.com/live/nWD0EBSMah8?si=Gw0FZxyKKrI-TiIS&t=18883

何社から、 GitHub Copilot の業務への導入の事例が公開されていますが、これらの記事を書いた方々を含む、実際の GitHub Copilot の利用がどんな感じかをディスカッションしていました。

実際にどう活用しているか、どう分析したか、どこに課題があるかだったり、意外なユースケースの紹介や、GitHub の方が紹介してくれている Tips (↓) だったり、色々興味深いセッションでした。録画があるので詳しくはそちらをどうぞ

どんな LT をしてきたか

今回自分は、 Draw.io などの拡張から Live Share の仕組みを学んで、そこから対戦ゲームを作ってみる話を、セッション後の懇親会で LT しました。

実際に、Live Share を使って、カーソル位置をプレイヤー間でリアルタイムに共有するホッケーゲーム、というデモを行いました。

Draw.io などの Live Share の仕組みに興味があり、発表駆動調査してみた感じなのですが、この辺深掘ってみると結構面白かったです 詳しくはスライドや発表録画 (https://www.youtube.com/live/A-ssicr44xU?si=y9JrFwSml5dE9Qqi&t=1466) をどうぞ。

あと、ちょっとだけ qiita-cli の紹介もしました。 (qiita-cli は VS Code 拡張自体はまだないので、今回のセッションとかを参考をしていきたいです…！)

参加してみて

エディタ系の勉強会には今回初めて参加したのですが、非常に面白かったです 今後も色々参加してみようと思います

セッションの内容が本当に多種多様で、エディタ (VS Code) 一つとってもこんなに色んな切り口があるんだ、という感じで、色々刺激になって聞いてて楽しかったのと、VS Code の風呂敷の広さと奥深さを感じました。初心者から上級者まで、色々な人が楽しめる内容だったのも良かったです。

あと、単純に聞くだけでなく、質問や懇親会でのスピーカーや参加者との交流も楽しかったです エディタって普段触れているので、思ったよりも共通の話題として話せること多いなと感じましたし、エディタをどうカスタマイズしてるか、エディタに関連して良かった体験、好きなところ、エディア愛…など、エンジニアやってて普段黙々と考えてたり感じることを、共有したり知れたりするのがとても楽しく、他の人の考え方に触れられて色々参考になりました。 (「あの設定いいよね…」「いい…」って会話が出来るのはエディタのカンファレンスの特権感があって楽しかったです)

今回の Conference 以外にも、月1 で Meetup もやっているらしいので、興味ある人は是非是非！