Vue Language Server から生まれた Volar.js と、それが秘める可能性

Vue Fes Japan 2023 で発表したスライドです。

発表概要:
.vue でエディタの補完機能などを効かせるために、Vue Language Server というツールがあります。実はこのコアは Volar.js という OSS に切り出されています。Volar.js は "あらゆる組み込み言語" のためのフレームワークであり、Vue.js 以外にも利用できる汎用性を備えています。このセッションでは Volar.js が一体どういうものなのか、そしてその汎用性がどのような可能性を秘めているのかについてお話します。

Transcript

1. Vue Language Server から
   生まれた Volar.js と、
   それが秘める可能性
   id:mizdra
   2023/10/28 Vue Fes Japan 2023
   1
   

   View Slide

2. 自己紹介
   ● mizdra (みずどら)
   ● 株式会社はてな
   ○ Webアプリケーションエンジニア
   ○ フロントエンドエキスパート (肩書)
   ● Vue.js の経験
   ○ 趣味で1年くらい
   2
   

   View Slide

3. 自己紹介
   ● mizdra (みずどら)
   ● 株式会社はてな
   ○ Webアプリケーションエンジニア
   ○ フロントエンドエキスパート (肩書)
   ● Vue.js の経験
   ○ 趣味で1年くらい (5年前の話)
   3
   

   View Slide

4. 4
   今日する話
   

   View Slide

5. 5
   エディタの言語機能と
   Language Server Protocol
   

   View Slide

6. エディタにおける「言語機能」とは
   ● コーディングを補助するエディタの機能のこと
   ○ コード補完 (Completion)
   ○ 定義元への移動 (Go to Definition)
   ○ コンパイルエラーの表示 (Diagnostics)
   6
   

   View Slide

7. 言語機能は色々ある
   最近流行りの言語なら、どれもあるはず
   7
   Hover Info
   Rename Code Action
   Symbols Find References
   

   View Slide

8. 言語機能ってどうやって実装してるの?
   ● いくつか実装方法はあるが...
   ○ Language Server Protocol に則った方法が主流
   ● Language Server Protocol (LSP)
   ○ 2016 年に Microsoft が発表
   ○ エディタに言語機能を実装するための標準仕様
   8
   

   View Slide

9. LSP の基本コンセプト
   ● 『Language Server Protocol の仕様 及び実装方法 (*2)』より
   ○
   ● エディタとは別に Language Server (LS) がある
   ○ これが言語機能を実装してる
   ● エディタは LS を介し、ユーザに言語機能を提供
   9
   LSPの基礎コンセプトは、IDEがサポートしていた各機能(言語サービスと
   呼ばれます)を標準化し、エディタ本体から分離するというものです。
   *2: https://zenn.dev/mtshiba/books/language_server_protocol/viewer/02_introduction より引用
   

   View Slide

10. LSP による通信の様子 (ざっくり)
    10
    

    View Slide

11. LSP に従ってさえいれば動く
    11
    JavaScript の LS は
    どの LSP 対応エディタでも動く
    LSP 対応エディタは
    どの LS 搭載言語も扱える
    

    View Slide

12. 12
    Vue.js における
    Language Server
    

    View Slide

13. Vue.js における Language Server
    ● Vue.js には .vue (Single File Component) がある
    ○ 独自のファイルフォーマット
    ● .vue 向けの言語機能を提供するために...
    ○ Vue.js は独自の Language Server を持ってる
    13
    

    View Slide

14. Vue.js における Language Server
    ● Vue Language Features
    ○ a.k.a. Volar
    ○ 公式推奨
    ● 昔の公式推奨は Vetur
    ○ お世話になってた人も多いはず
    ● (アンケートタイム)
    14
    

    View Slide

15. .vue の LS の実装はちょっと特殊
    ● / / <style><br/>○ HTMLタグ、JavaScript、CSS が書ける<br/>■ 当然、HTML や JavaScript の言語機能を使いたい<br/>○ 3言語ぶんの言語機能の提供が必要<br/>15<br/>

    View Slide

16. 似たようなファイルは他にも
    ● 例: .html / .astro / .svelte
    ● あるファイルの中に組み込まれている言語
    ○ 「Embedded (Programming) Language 」と呼ぶ
    ○ 日本語で「組み込み言語」
    16
    

    View Slide

17. 組み込み言語向けの LS
    ● VS Code 公式サイトで LS の作り方が解説されてる
    ○ https://code.visualstudio.com/api/language-extensi
    ons/embedded-languages
    ○ 2つの実装アプローチを紹介
    ■ Language Services
    ■ Request Forwarding
    17
    

    View Slide

18. 組み込み言語向けの LS
    ● VS Code 公式サイトで LS の作り方が解説されてる
    ○ https://code.visualstudio.com/api/language-extensi
    ons/embedded-languages
    ○ 2つの実装アプローチを紹介
    ■ Language Services
    ■ Request Forwarding
    18
    Vue Language Server は
    こっち
    

    View Slide

19. Language Services アプローチとは
    ● ファイルを組み込み言語ごとのブロックに分ける
    ○ ブロックごとに、仮想的なファイルがあると見なす
    19
    foo.vue.html
    foo.vue.ts
    

    View Slide

20. Language Services アプローチとは
    ● 仮想ファイルを各言語向けの「Service」で処理
    ○ Service: LS のコアを抽出したライブラリの俗称
    ■ 言語機能のロジックだけを提供するやつ。LSP は喋らない。
    ■ 例: vscode-html-languageservice, etc.
    20
    foo.vue.html
    -> HTML の Service で処理
    foo.vue.ts
    -> TypeScript の Service で処理
    

    View Slide

21. 21
    これで皆さんも
    Vue Language Features
    作れるはず
    

    View Slide

22. 22
    これで皆さんも
    Vue Language Server
    作れるはず
    そんな訳ない
    

    View Slide

23. 23
    いざ .vue の深淵へ
    

    View Slide

24. .vue の深淵 その1
    24
    

    View Slide

25. .vue の深淵 その1
    25
    

    View Slide

26. .vue の深淵 その1
    26
    JavaScript の式が書ける
    -> foo.vue.1.ts として
    TypeScript の Service で処理
    の中にも、
    TypeScript の仮想ファイルが隠れてる
    

    View Slide

27. .vue の深淵 その2
    27
    

    View Slide

28. .vue の深淵 その2
    28
    props やメソッドを参照可能
    -> props などもコード補完したい
    

    View Slide

29. .vue の深淵 その2
    29
    props やメソッドを参照可能
    -> props などもコード補完したい
    仮想ファイル間のデータ共有が必要
    ただし、実装の難易度は高い
    ただし定義元は、
    下側の仮想ファイル
    

    View Slide

30. .vue の深淵 その他
    30
    

    View Slide

31. .vue の深淵 その他
    31
    props 補完したいのだけど...
    

    View Slide

32. .vue の深淵 その他
    32
    props 補完したいのだけど...
    Command+Click で .vue 開きたいのだけど....
    

    View Slide

33. .vue の深淵 その他
    33
    props 補完したいのだけど...
    Command+Click で .vue 開きたいのだけど....
    lang=”scss” にしたいのだけど...
    

    View Slide

34. 34
    色々あるじゃん 😇
    

    View Slide

35. Vue.js コミュニティの努力
    ● 2016/11: Vetur 0.1 (initial release)
    ● 2017/01: Scss/Less 対応
    ● 2017/03: v-* 属性の補完に対応
    ● 2018/01: import Foo from './Foo.vue' の自動挿入
    ● 2019/02: {{ … }} 内で props/methods の補完に対応
    ● 2019/04: {{ … }} 内の型チェック
    35
    

    View Slide

36. さらなる高みへ
    ● 2020: Vue Language Features (initial release)
    ○ Vetur とは別実装の LS
    ■ 型チェックのパフォーマンス改善
    ■ より多くの言語機能の対応
    ● 2023/02: Vue Language Features 1.0
    ○ Vue.js 公式の推奨に
    ○ コアが Volar.js という OSS に切り出される
    36
    

    View Slide

37. Volar.js
    ● 組み込み言語のツールを作るためのフレームワーク
    ● 少ないコードで、高機能・高品質の LS が作れる
    ● コアチーム
    ○ Johnson Chu 氏 (Volar.js 作者)
    ○ Erika 氏 (Astro コアチームメンバー)
    37
    

    View Slide

38. Volar.js の生まれた背景
    ● Vetur で直面した課題は...
    ○ 「組み込み言語」に共通するもの
    ○ Astro や Svelte でも困ってる
    ● Vue.js は多大な努力で解決しつつあるが...
    ○ 誰もがそれをできる訳ではない
    38
    

    View Slide

39. Volar.js の生まれた背景
    ● Volar.js はその解決を手助けする
    ● 面倒な作業を肩代わりしてくれる
    ○ フレームワーク固有の、最小限のコードを書くだけ
    ○ あとは Volar.js がやってくれる
    ● そのおかげで...
    ○ フレームワーク開発者: 重要なことだけに集中できる
    ○ ユーザ: 豊富な言語機能が使える
    39
    

    View Slide

40. 40
    Demo
    

    View Slide

41. Demo
    ● 実際に Volar.js で LS を作ってみよう！
    ○ https://github.com/mizdra/volar-demo
    ● いくつか見せ場があるので、👏 お願いします
    41
    

    View Slide

42. Volar.js のconfig を書いて...
    42
    

    View Slide

43. .html1 の Language/VirtualFile を書いて...
    43
    

    View Slide

44. .html1 のService を実装すると...
    44
    

    View Slide

45. warning が出るように！
    45
    

    View Slide

46. CSS の言語機能も使える！
    46
    

    View Slide

47. Emmet の Service を登録すると...
    47
    

    View Slide

48. Emmetが 使える！
    48
    

    View Slide

49. Volar.js (再掲)
    ● 組み込み言語のツールを作るためのフレームワーク
    ● 少ないコードで、高機能・高品質の LS が作れる
    49
    

    View Slide

50. Volar.js (再掲)
    ● 組み込み言語のツールを作るためのフレームワーク
    ● 少ないコードで、高機能・高品質の LS が作れる
    50
    

    View Slide

51. Volar.js (再掲)
    ● 組み込み言語のツールを作るためのフレームワーク
    ● 少ないコードで、高機能・高品質の LS が作れる
    51
    Language Server
    だけとは言ってない
    

    View Slide

52. 改めて Volar.js とは
    ● 組み込み言語のツールを作るためのフレームワーク
    ○ Language Server
    ○ Checker
    ○ Formatter
    ○ …
    ● 様々なツールを作れる
    52
    

    View Slide

53. さっき作った Language や Service を
    @volar/kit に渡すと...
    53
    

    View Slide

54. CLI Checker が完成！
    54
    

    View Slide

55. 55
    Volar.js 活用事例
    

    View Slide

56. Volar.js 活用事例: Astro
    ● Astro
    ○
    ○ コード量の削減、だけじゃない
    ■ いくつものバグが直り、新機能も付いてきた
    56
    

    View Slide

57. Volar.js 活用事例: 社内フレームワーク
    ● 社内フレームワーク (ByteDance) (*3)
    ○ フレームワークで使う言語のツールを、Volar.js で実装
    ○ 1 人の開発者が 2 週間で！
    57
    *3: https://blog.vuejs.org/posts/volar-a-new-beginning より
    

    View Slide

58. Volar.js 活用事例: typescript-plugin-asset
    ● @mizdra/typescript-plugin-asset
    ○ .ts からアセット (画像など) を import するのを補助
    58
    ② Enter で補完
    & import文も自動挿入
    ① コード補完で
    suggest されて...
    

    View Slide

59. Volar.js 活用事例: typescript-plugin-asset
    ● TypeScript Language Service Plugin として実装
    ○ TypeScript の LS の挙動をカスタマイズする仕組み
    ■ コード補完の候補を書き換えたり
    59
    

    View Slide

60. Volar.js 活用事例: typescript-plugin-asset
    ● .png に .ts が埋め込まれてると誤認させる
    ○
    ● TypeScript の LS が、.png を .ts かのように扱うように
    ○ コード補完に出してくれる
    60
    

    View Slide

61. Volar.js 活用事例: typescript-plugin-asset
    ● .png に .ts が埋め込まれてると誤認させる仕組み
    ○ Volar.js を使ってる
    ● こういう面白グッズも、Volar.js で作れる！
    61
    

    View Slide

62. 62
    まとめ
    

    View Slide

63. まとめ
    ● Volar.js は、Vue.js だけじゃない
    ○ あらゆる組み込み言語のためのもの
    ● 様々な言語ツールを作れる
    ○ Language Server / Checker / Formatter / …
    ● Astro などで導入が始まってる
    ○ 組み込み言語全体の開発体験を変えつつある
    63
    

    View Slide

64. まとめ
    ● Vue.js 公式ブログ(*3)より (翻訳)
    ○
    Vue.js コミュニティ発の OSS が、
    コミュニティを超えて影響していく
    64
    *3: https://blog.vuejs.org/posts/volar-a-new-beginning より
    Viteが Vue エコシステムから生まれ、最終的に Web 開発エコシステム全
    体のユーザーを結びつける独自のコミュニティに成長したのと同様に、
    Volar.js も同じ道をたどることを望んでいます。
    

    View Slide