Slide 1
Slide 1 text
Vue Language Server から
生まれた Volar.js と、
それが秘める可能性
id:mizdra
2023/10/28 Vue Fes Japan 2023
1
Slide 2
Slide 2 text
自己紹介
● mizdra (みずどら)
● 株式会社はてな
○ Webアプリケーションエンジニア
○ フロントエンドエキスパート (肩書)
● Vue.js の経験
○ 趣味で1年くらい
2
Slide 3
Slide 3 text
自己紹介
● mizdra (みずどら)
● 株式会社はてな
○ Webアプリケーションエンジニア
○ フロントエンドエキスパート (肩書)
● Vue.js の経験
○ 趣味で1年くらい (5年前の話)
3
Slide 4
Slide 4 text
4
今日する話
Slide 5
Slide 5 text
5
エディタの言語機能と
Language Server Protocol
Slide 6
Slide 6 text
エディタにおける「言語機能」とは
● コーディングを補助するエディタの機能のこと
○ コード補完 (Completion)
○ 定義元への移動 (Go to Definition)
○ コンパイルエラーの表示 (Diagnostics)
6
Slide 7
Slide 7 text
言語機能は色々ある
最近流行りの言語なら、どれもあるはず
7
Hover Info
Rename Code Action
Symbols Find References
Slide 8
Slide 8 text
言語機能ってどうやって実装してるの?
● いくつか実装方法はあるが...
○ Language Server Protocol に則った方法が主流
● Language Server Protocol (LSP)
○ 2016 年に Microsoft が発表
○ エディタに言語機能を実装するための標準仕様
8
Slide 9
Slide 9 text
LSP の基本コンセプト
● 『Language Server Protocol の仕様 及び実装方法 (*2)』より
○
● エディタとは別に Language Server (LS) がある
○ これが言語機能を実装してる
● エディタは LS を介し、ユーザに言語機能を提供
9
LSPの基礎コンセプトは、IDEがサポートしていた各機能(言語サービスと
呼ばれます)を標準化し、エディタ本体から分離するというものです。
*2: https://zenn.dev/mtshiba/books/language_server_protocol/viewer/02_introduction より引用
Slide 10
Slide 10 text
LSP による通信の様子 (ざっくり)
10
Slide 11
Slide 11 text
LSP に従ってさえいれば動く
11
JavaScript の LS は
どの LSP 対応エディタでも動く
LSP 対応エディタは
どの LS 搭載言語も扱える
Slide 12
Slide 12 text
12
Vue.js における
Language Server
Slide 13
Slide 13 text
Vue.js における Language Server
● Vue.js には .vue (Single File Component) がある
○ 独自のファイルフォーマット
● .vue 向けの言語機能を提供するために...
○ Vue.js は独自の Language Server を持ってる
13
Slide 14
Slide 14 text
Vue.js における Language Server
● Vue Language Features
○ a.k.a. Volar
○ 公式推奨
● 昔の公式推奨は Vetur
○ お世話になってた人も多いはず
● (アンケートタイム)
14
Slide 15
Slide 15 text
.vue の LS の実装はちょっと特殊
● / / <style>
○ HTMLタグ、JavaScript、CSS が書ける
■ 当然、HTML や JavaScript の言語機能を使いたい
○ 3言語ぶんの言語機能の提供が必要
15
Slide 16
Slide 16 text
似たようなファイルは他にも
● 例: .html / .astro / .svelte
● あるファイルの中に組み込まれている言語
○ 「Embedded (Programming) Language 」と呼ぶ
○ 日本語で「組み込み言語」
16
Slide 17
Slide 17 text
組み込み言語向けの LS
● VS Code 公式サイトで LS の作り方が解説されてる
○ https://code.visualstudio.com/api/language-extensi
ons/embedded-languages
○ 2つの実装アプローチを紹介
■ Language Services
■ Request Forwarding
17
Slide 18
Slide 18 text
組み込み言語向けの LS
● VS Code 公式サイトで LS の作り方が解説されてる
○ https://code.visualstudio.com/api/language-extensi
ons/embedded-languages
○ 2つの実装アプローチを紹介
■ Language Services
■ Request Forwarding
18
Vue Language Server は
こっち
Slide 19
Slide 19 text
Language Services アプローチとは
● ファイルを組み込み言語ごとのブロックに分ける
○ ブロックごとに、仮想的なファイルがあると見なす
19
foo.vue.html
foo.vue.ts
Slide 20
Slide 20 text
Language Services アプローチとは
● 仮想ファイルを各言語向けの「Service」で処理
○ Service: LS のコアを抽出したライブラリの俗称
■ 言語機能のロジックだけを提供するやつ。LSP は喋らない。
■ 例: vscode-html-languageservice, etc.
20
foo.vue.html
-> HTML の Service で処理
foo.vue.ts
-> TypeScript の Service で処理
Slide 21
Slide 21 text
21
これで皆さんも
Vue Language Features
作れるはず
Slide 22
Slide 22 text
22
これで皆さんも
Vue Language Server
作れるはず
そんな訳ない
Slide 23
Slide 23 text
23
いざ .vue の深淵へ
Slide 24
Slide 24 text
.vue の深淵 その1
24
Slide 25
Slide 25 text
.vue の深淵 その1
25
Slide 26
Slide 26 text
.vue の深淵 その1
26
JavaScript の式が書ける
-> foo.vue.1.ts として
TypeScript の Service で処理
の中にも、
TypeScript の仮想ファイルが隠れてる
Slide 27
Slide 27 text
.vue の深淵 その2
27
Slide 28
Slide 28 text
.vue の深淵 その2
28
props やメソッドを参照可能
-> props などもコード補完したい
Slide 29
Slide 29 text
.vue の深淵 その2
29
props やメソッドを参照可能
-> props などもコード補完したい
仮想ファイル間のデータ共有が必要
ただし、実装の難易度は高い
ただし定義元は、
下側の仮想ファイル
Slide 30
Slide 30 text
.vue の深淵 その他
30
Slide 31
Slide 31 text
.vue の深淵 その他
31
props 補完したいのだけど...
Slide 32
Slide 32 text
.vue の深淵 その他
32
props 補完したいのだけど...
Command+Click で .vue 開きたいのだけど....
Slide 33
Slide 33 text
.vue の深淵 その他
33
props 補完したいのだけど...
Command+Click で .vue 開きたいのだけど....
lang=”scss” にしたいのだけど...
Slide 34
Slide 34 text
34
色々あるじゃん 😇
Slide 35
Slide 35 text
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
Slide 36
Slide 36 text
さらなる高みへ
● 2020: Vue Language Features (initial release)
○ Vetur とは別実装の LS
■ 型チェックのパフォーマンス改善
■ より多くの言語機能の対応
● 2023/02: Vue Language Features 1.0
○ Vue.js 公式の推奨に
○ コアが Volar.js という OSS に切り出される
36
Slide 37
Slide 37 text
Volar.js
● 組み込み言語のツールを作るためのフレームワーク
● 少ないコードで、高機能・高品質の LS が作れる
● コアチーム
○ Johnson Chu 氏 (Volar.js 作者)
○ Erika 氏 (Astro コアチームメンバー)
37
Slide 38
Slide 38 text
Volar.js の生まれた背景
● Vetur で直面した課題は...
○ 「組み込み言語」に共通するもの
○ Astro や Svelte でも困ってる
● Vue.js は多大な努力で解決しつつあるが...
○ 誰もがそれをできる訳ではない
38
Slide 39
Slide 39 text
Volar.js の生まれた背景
● Volar.js はその解決を手助けする
● 面倒な作業を肩代わりしてくれる
○ フレームワーク固有の、最小限のコードを書くだけ
○ あとは Volar.js がやってくれる
● そのおかげで...
○ フレームワーク開発者: 重要なことだけに集中できる
○ ユーザ: 豊富な言語機能が使える
39
Slide 40
Slide 40 text
40
Demo
Slide 41
Slide 41 text
Demo
● 実際に Volar.js で LS を作ってみよう！
○ https://github.com/mizdra/volar-demo
● いくつか見せ場があるので、👏 お願いします
41
Slide 42
Slide 42 text
Volar.js のconfig を書いて...
42
Slide 43
Slide 43 text
.html1 の Language/VirtualFile を書いて...
43
Slide 44
Slide 44 text
.html1 のService を実装すると...
44
Slide 45
Slide 45 text
warning が出るように！
45
Slide 46
Slide 46 text
CSS の言語機能も使える！
46
Slide 47
Slide 47 text
Emmet の Service を登録すると...
47
Slide 48
Slide 48 text
Emmetが 使える！
48
Slide 49
Slide 49 text
Volar.js (再掲)
● 組み込み言語のツールを作るためのフレームワーク
● 少ないコードで、高機能・高品質の LS が作れる
49
Slide 50
Slide 50 text
Volar.js (再掲)
● 組み込み言語のツールを作るためのフレームワーク
● 少ないコードで、高機能・高品質の LS が作れる
50
Slide 51
Slide 51 text
Volar.js (再掲)
● 組み込み言語のツールを作るためのフレームワーク
● 少ないコードで、高機能・高品質の LS が作れる
51
Language Server
だけとは言ってない
Slide 52
Slide 52 text
改めて Volar.js とは
● 組み込み言語のツールを作るためのフレームワーク
○ Language Server
○ Checker
○ Formatter
○ …
● 様々なツールを作れる
52
Slide 53
Slide 53 text
さっき作った Language や Service を
@volar/kit に渡すと...
53
Slide 54
Slide 54 text
CLI Checker が完成！
54
Slide 55
Slide 55 text
55
Volar.js 活用事例
Slide 56
Slide 56 text
Volar.js 活用事例: Astro
● Astro
○
○ コード量の削減、だけじゃない
■ いくつものバグが直り、新機能も付いてきた
56
Slide 57
Slide 57 text
Volar.js 活用事例: 社内フレームワーク
● 社内フレームワーク (ByteDance) (*3)
○ フレームワークで使う言語のツールを、Volar.js で実装
○ 1 人の開発者が 2 週間で！
57
*3: https://blog.vuejs.org/posts/volar-a-new-beginning より
Slide 58
Slide 58 text
Volar.js 活用事例: typescript-plugin-asset
● @mizdra/typescript-plugin-asset
○ .ts からアセット (画像など) を import するのを補助
58
② Enter で補完
& import文も自動挿入
① コード補完で
suggest されて...
Slide 59
Slide 59 text
Volar.js 活用事例: typescript-plugin-asset
● TypeScript Language Service Plugin として実装
○ TypeScript の LS の挙動をカスタマイズする仕組み
■ コード補完の候補を書き換えたり
59
Slide 60
Slide 60 text
Volar.js 活用事例: typescript-plugin-asset
● .png に .ts が埋め込まれてると誤認させる
○
● TypeScript の LS が、.png を .ts かのように扱うように
○ コード補完に出してくれる
60
Slide 61
Slide 61 text
Volar.js 活用事例: typescript-plugin-asset
● .png に .ts が埋め込まれてると誤認させる仕組み
○ Volar.js を使ってる
● こういう面白グッズも、Volar.js で作れる！
61
Slide 62
Slide 62 text
62
まとめ
Slide 63
Slide 63 text
まとめ
● Volar.js は、Vue.js だけじゃない
○ あらゆる組み込み言語のためのもの
● 様々な言語ツールを作れる
○ Language Server / Checker / Formatter / …
● Astro などで導入が始まってる
○ 組み込み言語全体の開発体験を変えつつある
63
Slide 64
Slide 64 text
まとめ
● Vue.js 公式ブログ(*3)より (翻訳)
○
Vue.js コミュニティ発の OSS が、
コミュニティを超えて影響していく
64
*3: https://blog.vuejs.org/posts/volar-a-new-beginning より
Viteが Vue エコシステムから生まれ、最終的に Web 開発エコシステム全
体のユーザーを結びつける独自のコミュニティに成長したのと同様に、
Volar.js も同じ道をたどることを望んでいます。