vue-template-parier

1. vue-template-parserを作っている話
s1240075 棗
光幹

2. 自己紹介
名前：棗 光幹
大学：会津大学学部２年（24期）
好きな技術：Web
好きな言語：Golang, JavaScript
SNS：natsumen
マイブーム：うまるちゃん、言語処理系

3. 目次
1. vue-template-parserって？
2. 動機
3. 中身について
4. まとめ

4. vue-template-parserって？
● .vueファイルをパースするライブラリ
● vue用パーサコンビネータ
● JavaScript実装
● まだ途中です

5. vue-template-parserって？
● .vueファイルをパースするライブラリ
● vue用パーサコンビネータ
● JavaScript実装
● まだ途中です
● 進捗はまだ温まってないです。

6. 動機
● アルバイトで少々Vue.jsを書いてた。
● vueのVSCode pluginを書きたかった。
● 既存vueのparserを使いたかったが,いい感じのがなかった。
● ので、自作しよう。

7. 中身について
● template部分 -> htmlparser2 で実装
● script部分 -> babylon で実装
● style部分 -> reworkcss/css で実装 ?(未定)

8. 中身について
● template部分 -> htmlparser2 で実装
● script部分 -> babylon で実装
● style部分 -> reworkcss/css で実装 ?(未定)
目標！
templateとscript部分を依存関係含めASTの構造に
直せるようにする。

9. tempalte部分
● メインでhtmlparser2を利用。
● htmlparser2の結果をさらに自分で解析していく。
● htmlparser2は、タグ構造なら（たぶん）なんでもよしなにパースしてくれる。

10. htmlparser2

11. htmlparser2
こんな感じでタグがパースされる。
これをscriptのデータとひも付けたり
する。で、その途中。

12. script部分
● メインでbabylonを利用。
● パースできないものがあったら、随時自実装。

13. babylonとは
● webフロントでおなじみのBabelの内部で利用されている
JavaScriptパーサー。
JS parser AST
generato
r
JS
traverser
AST

14. babylonとは
● webフロントでおなじみBabelの内部で利用されている
JavaScriptパーサー。
JS babylon AST
generato
r
JS
traverser
AST

15. babylon便利だ、楽しいな！
基本はこの２つのみ。
babylon.parser(code, [option])
babylon.parserExpression(code, [option])
返り値は Babel AST formatというオブジェクト。
babel-log（ライブラリ）とかで見れる。

16. babylon便利だ、楽しいな！
fileやmoduleなど
形式の指定。
JSXなどなどもパ
ースできる。

17. babylon便利だ、楽しいな！
結構長い。
5*5+(4-2)*2+9 で 452行分いく。
ASTのNodeの情報 Nodeの位置とかト
ークンの情報
(より細かい)

18. babylon便利だ、楽しいな！
bindingする変数や関数、コンポーネントを
htmlparser2のtreeとひも付ける。

19. babylon便利だ、楽しいな！
bindingする変数や関数、コンポーネントを
htmlのtreeとひも付ける。
そんな感じで依存関係をもたせた
templateとscriptの二つのASTオブジ
ェクトの入った配列を返す。

20. これから
● とりあえず、ファイル一つパースできるように。
● pug(元jade)対応とかcss対応。
● 依存関係を拾う。（子と親コンポーネントとか）
● もはや、自作でパーサー書いてみたり。

21. まとめ
● htmlparser2はけっこうよしなにやってくれる。
● babylon便利。
● BabelなどJSのトランスパイル文化は楽しい。
● 言語処理系は楽しい。

22. おわり

23. ご清聴ありがとう
ございました！