TSKaigi サイドイベント - Deno で VSCode 拡張機能を作る際の4つの壁 - 2025.05.29

696 Views

May 29, 25

スライド概要

koukibuu3

@koukibuu3

スライド一覧

Webエンジニアをやってます。

またはPlayer版

埋め込む »CMSなどでJSが使えない場合

（ダウンロード不可）

関連スライド

猫でも分かるUnreal Engineの学び方 - 超初心者向け編 - 2023 v1.0

ue4 ue5 ue-beginner

エピックゲームズジャパン 1.5M

Unreal Engine5 Lumenの仕組みと肝心なところ

ue5 ue-rendering ue-lumen

エピックゲームズジャパン 1.3M

Meta XR SDK(V66-74)でQuestアプリを開発

spatial anchor unity quest pro shaperecognizeractivatestate oculus integration transformfeaturestateprovider building blocks transformrecognizeractivestate ovrsemanticclassification jointdeltaprovider ovrscenemanager jointvelocityactivestate オクルージョン sequenceactivestate scene manager ambisonic depth api metaxraudiosource playerlocomotor meta xr sdk quest3 ovrplayercontroller マルチモーダル meta haptics studio direct touch ui meta xr haptics sdk ovrspatialanchor ovrtrackedkeyboard hapticclipplayer fingerfeaturestateprovider hapticclip ワイドモーションモード wmm mruk mr utility kit voice sdk jointrotationactivestate meta horizon os ui set asw application spacewarp ovr metrics tool unityscene manager colocation discovery コロケーション mx ink passthrough camera api hand tracking microgestures webcamtexturemanager passthroughcamerautils cameraviewermanager hand pose selector recorder

あうぜん 0.9M

猫でも分かる UE5.0, 5.1 におけるアニメーションの新機能について【CEDEC+KYUSHU 2022】

ue5 cedec+kyushu ue-animation ue-optimize ue-bp ue-physics ue-sequencer

エピックゲームズジャパン 0.9M

SQL滅ぶべし

株式会社ホクソエム 879.5K

各ページのテキスト

TSKaigi サイドイベント Deno で VSCode 拡張機能を作る際の4つの壁 2025.05.29, Thu. Akasaka Kouki | koukibuu3

⾃⼰紹介経歴 SES企業でWebエンジニアとして7年勤務。前職では、ほぼPHPを書いていた元PHPer 2025年5⽉に any に⼊社しました 🙌 TSKaigi にも CfP 送っていましたが、今⽇は違うテーマで話します。 Akasaka Kouki @ koukibuu3 / こうきぶー出⾝墨⽥区趣味コーヒー、DIY、ゲーム実況 ©any, inc. All rights reserved. 2

VSCode 拡張機能について最低限必要なもの ● package.json ○ 実⾏ファイルのパスや提供するコマンドや機能の⼀覧など ● extension.js （ファイル名はなんでも可） ○ 実⾏ファイルの本体 Visual Studio Code | Your First Extension https://code.visualstudio.com/api/get-started/your-first-extension ©any, inc. All rights reserved. 6

https://code.visualstudio.com/api/get-started/your-first-extension

10.

11.

12.

13.

14.

15.

16.

17.

18.

19.

20.

21.

22.

23.

24.

https://code.visualstudio.com/api/extension-guides/overview

25.

26.

27.

28.

29.

30.

31.

32.

33.

壁③ ts-morph を使⽤したコードをビルドして動かす TypeScript ファイルの内容を⾒て、解析を⾏いたい。⽅法1: ts-morph を使ってコード解析を⾏う。抽象構⽂⽊（AST）操作が直感的に⾏える。⽅法2: TypeScript Compiler API を使う。抽象構⽂⽊（AST）に対する深ぼった知識が必要。柔軟性は⾼いが利⽤する上でのハードルも⾼い。 ©any, inc. All rights reserved. 33

34.

35.

36.

37.

38.

39.

40.

41.

42.

壁④ Deno API を使⽤したコードをビルドして動かす Deno API とは Deno.readTextFile("./example.txt") Deno.mkdir とかとか、Deno グローバルで⽣えているAPI であり、 Denoランタイム限定で動く。 VSCode 拡張機能は Node.js 実⾏環境で実⾏されるのでムリ ©any, inc. All rights reserved. 42

43.

44.

45.

[beta]

壁④

Deno API を使⽤したコードをビルドして動かす

Deno の URL import
import { Project } from "https://deno.land/x/[email protected]/mod.ts";
のように URL import で取得する Deno ⽤の ts-morph は別物のため、

esbuild を⽤いたビルド時にパス解決を⾏うことができない

©any, inc. All rights reserved.

45

46.

47.

48.

まとめ ● Deno で拡張機能の処理を書く場合、CJS にビルドする必要がある ※対応モジュールを選ばず、限定的なサポートであればESMでも可 ● URL import や JSR のモジュール、Deno API 等、Deno "らしい" 機能は特に使えない。 ● ESM/CJS のモジュールシステム間のしっかりとした理解が必要。 Deno で VSCode 拡張を書くメリットはほとんど無い ※ 2025/5 現在の状況です。 ©any, inc. All rights reserved. 48

49.

まとめ ● VSCode の拡張機能⾃体は、⾮常に簡単に作成できることが分かった。 ○ ○ 公式ドキュメントが⾮常にしっかりしている。 https://code.visualstudio.com/api/get-started/your-ﬁrst-extension ● ts-morph は AST に深い造詣がなくても利⽤できてとても良い。 ● Deno で TypeScript を書き始めるための設定が何も要らないのが良い。 ● ESM only / CJS ベースのモジュールなど、理解が深まった。 ● TSDoc を解析する拡張機能⾃体の可能性は感じた。 ©any, inc. All rights reserved. 49

https://code.visualstudio.com/api/get-started/your-first-extension

50.

51.