NGK2017Bでの発表資料です。

1. Vue.jsをHaxeで
2017-12-02
terurou

2. 自己紹介：terurou
• デンキヤギ(株) 代表取締役
• NGK2017B実行委員、DSTokai管理人
• 主に基盤チームおじさん
• Transiru（自社開発）に最近やっと携われるように…
• プレゼン（スライド＋音声）をWeb配信
• ビジネス面での転換もあり、Haxe/JS + Vue.jsで作り直し中

3. 社員募集
• 会社見学で焼肉or寿司が食べられます（採用教育費）
• 「広義のWeb系開発者」を歓迎
• 業務SE/ディレクター（ビジネス要求を交通整理する人）や
型に興味のあるWeb Frontendエンジニアは大歓迎
• 連絡先：@terurou / info@denkiyagi.jp まで

4. Vue.jsとHaxeとは
ここから本題

5. Vue.jsとは
• 三大Web Frontend Frameworkの一角（2017年末時点）
• Vue.js以外はReact(+Redux), Angular
• 学習コストが低い（vs Angular, React/Redux）
• 原理主義すぎない, Webは泥臭い（vs React）
• オールインワンではない（vs Angular）
• 他より手軽で、開発規模が小さくても適用しやすいが、
プロジェクト統制力が若干劣る

6. Haxeとは
• オブジェクト指向＋関数型
• ActionScript 3(ECMAScript4の構文＋OCaml）
• マルチプラットフォームをターゲットにコンパイル
• JS, Flash, C++, C#, Java, PHP, Lua, …
• ゲームでの実績が多い
• Haxe創始者はShiro Games（Indie Game開発）のCTO
• 日本国内の著名なユーザー企業はヌーラボ社

7. ヌーラボさん、
Haxeの仕事お待ちしてます

8. Haxeの良いところ
• HaxeのEnumはすごい
• 代数的データ型、GADT
• 強力なマクロ
• ASTを操作してコード生成・変換
• ビルドプロセス内でのIO（File, Process, Socket, …）
• JSへのトランスコンパイルが超高速
• JSターゲット以外はほぼ触ってないのでわからん…
覚えて帰るか、
SNSに流しましょう

9. Vue.jsとHaxeの相性

10. Vue.jsとHaxeの相性は
微妙

11. 何があかんのか
Single File Componentsがうまく扱えない

12. Single File Components（SFC）とは
• JS（NPMモジュール）, HTML Template, CSS Modulesを
1ファイルにまとめて、コンポーネント管理しやすく
• 性能面も有利
• Webpack （vue-loader）等でのビルドが必要となるが、
Template文字列が事前コンパイルされる
• Vue.js自体を軽量版（Template Compiler抜き）にできる
• 開発ツールサポートあり（VS Code Plugin: vetur）

13. SFCのイメージ
<template>
<p>Hello {{name}}!</p>
</template>
<script>
module.exports = {
data: () => { name: 'terurou' }
}
</script>
<style scoped>
p { font-size: 20px; }
</style>
1ファイル内に
・Template(HTML)
・JS(NPM Module)
・CSS

14. どうやってHaxeとSFCを連携させる？
Haxeが出力するJSコードと
SFCを一対一で紐づけできれば…

15. ちょっと考えたが、
Haxe的に破綻してるのでアカン

16. HaxeとSFCの定義粒度のギャップ
• Haxeの管理単位はプロジェクトごと
• プロジェクトをビルドすると、プロジェクト全体が単一の
JSファイルになって出力される
• 出力JSファイルはWebpack等でbundleしたものに近い
• SFCの管理単位はコンポーネントごと
• vue-loaderはbundleされていないJSを期待している
• 1コンポーネント＝1プロジェクトは破綻した発想

17. haxe-modular （採用見送り）
• Haxe/JS出力コードを複数NPMモジュールに分割できる
• NPMモジュールに分割できれば、vue-loaderで処理できる
• 色々気持ち悪いので、採用見送り
• コード記述に制限が生じる（分割箇所を特定させるため）
• ビルド後に別処理で無理やりJSファイルを分割する実装
• 蛇足だが、Haxe + React方面では使われているっぽい

18. こうなった

19. そもそもSFCを使うと何が嬉しいんだっけ？
• JS（NPMモジュール）, HTML Template, CSS Modulesを
1ファイルにまとめて、コンポーネント管理しやすく
• 性能面も有利
• Webpack （vue-loader）等でのビルドが必要となるが、
Template文字列が事前コンパイルされる
• Vue.js自体を軽量版（Template Compiler抜き）にできる
• 開発ツールサポートあり（VS Code Plugin: vetur）

20. そもそもSFCを使うと何が嬉しいんだっけ？
• JS（NPMモジュール）, HTML Template, CSS Modulesを
1ファイルにまとめて、コンポーネント管理しやすく
• 性能面も有利
• Webpack （vue-loader）等でのビルドが必要となるが、
Template文字列が事前コンパイルされる
• Vue.js自体を軽量版（Template Compiler抜き）にできる
• 開発ツールサポートあり（VS Code Plugin: vetur）

21. Template文字列をコンパイルする
手段があればどうにかなるかも

22. 公式がCompilerをNPMで配布してるやんけ！！
vue-template-compiler

24. Vue.hx
なんかナイスソリューションが思い浮かんだらしい

25. Vue.hxというものを作り始めた
• Haxe extern for Vue.js
• Vue.js extern自体は他にも存在するが敢えて新規開発
• SFCの扱い方に新規性がある
• GitHub
• https://github.com/DenkiYagi/vue.hx
• この発表の時点では「ソースが置いてあるだけ」の状態

26. 方向性：Webpackを捨てる
• SFCを使って嬉しい事はTemplateの事前コンパイル
• ブラウザ実行時に辻褄が合っていればOK
• Webpackに頼らずTemplateをコンパイルする方法を検討
• もしHaxeだけでビルド可能であれば、高速化も期待できる
• Webpackに限らずJSのビルドツールは全体的に遅い傾向…

27. SFCのコンパイル方法：Webpack（vue-loader）を解析
• vue-template-compilerが使われている
• SFCをコンパイルすると<template>はrender関数文字列、
<style>はCSS文字列となる
• render関数はそのままJSコードとして扱える
• CSSはTemplateで記述した文字列がそのまま出力されるので
PostCSS（CSS ModulesやAutoprefixer等）で別途処理している

28. できたもの：HaxeのマクロでSFCを処理
• SFCをマクロで処理しやすいように分割記述
• JS部分のみをHaxeクラスとして記述
• HTML/CSS部分を<script>パートなしのSFCとして記述
• Single Fileとは何だったのか
• @:autoBuildマクロにより、Haxe側から紐づくSFCを
コンパイルして取り込む

29. @:autoBuildマクロ
• @:autoBuild付きinterfaceを継承したクラスを作成すると、
コンパイル時のマクロ処理対象となる
• マクロからNode.jsプロセスを実行し、SFCを取り込む
• vue-loaderの解析結果に準拠してSFCをコンパイル
• render関数はAST変換で当該クラスにインライン埋込
• CSSはマクロのポスト処理コールバックでファイル出力

30. Vue.hxでのコンポーネント定義イメージ
// Hello.hx
import vuehx.IVueComponent;
class Hello implements IVueComponent {
// vue.jsのオプションを記述
var _ = {
data: function () {
return { name: "terurou" };
}
}
}
<!– Hello.vue -->
<template>
<p class="$styles.hello">Hello
{{name}}!</p>
</template>
<style modules>
.hello { font-size: 20px; }
</style>
IVueComponentを継承するとマクロが
自動でSFCをコンパイル＋結合する。
Single Fileとは何だったのか。

31. Vue.hxの残課題
• externをまだ完全に書き切ってない＋テスト不足
• いちおう自社プロダクトで使用中だが…
• Vue.js自体への型付けをもう少し工夫できる余地あり
• 型安全、入力補完
• マクロのパフォーマンスチューニング
• SFCのコンパイルキャッシュ
• Haxelib（Haxeのパッケージマネージャ）に未対応

32. Webpackを捨てた影響
• Hot Module Replacement（HMR）が利用不能に
• Haxe/JSはビルドが超高速なので、影響なしでは？？？
• そもそも「モダンJS開発のビルド遅すぎで開発効率が低い」
問題に対するワークアラウンドがHMRという認識
• HMRでは開発ビルドと本番ビルドと大きな差異が発生する
• Browsersync等でのオートリロードで必要十分
• むしろ生産性は向上したのでは？？？

33. まとめ
LT発表時間は足りているのか…？

34. まとめ
• HaxeとVue.js（SFC）は相性があまり良くないが、
Webpack（Vue.jsのエコシステム・ツールチェイン）を
捨てることで、快適なHaxe + Vue.js開発を実現
• Haxeのマクロすごい
• Vue.js公式がNPMでTemplate Compilerを配布していて
本当によかった
• Vue.hxは自社で使うので今後アップデート予定