HTMLとCSSもHaxeから出力する話

天下一AltJS勉強会で話しました
http://connpass.com/event/6402/

Haxe
http://haxe.org/

サイトジェネレータTeplay
http://teplay.spheresofa.net/ja/

Transcript

1. Haxeから出力できる言語は…
2. これだけある Flash JavaScript Neko C++ PHP C# Java Python ↓NEW!
3. もちろん今日は… Flash JavaScript Neko C++ PHP C# Java Python
4. JavaScriptを出力する話… JavaScript
5. …だと思った？
6. var date = Date.fromString(“2014-06-08”); var eventName = “天下一AltJS武闘会”; var speaker = “shohei909”; HTMLとCSSも Haxeから 出力する話 本日の発表タイトル
7. AltJSユーザーの皆さん、 HTMLとCSSも別言語から出力し たいですよね？
8. 例えば、こう。 AltCSS : Sass, SCSS, or LESS
9. 例えば、こう。 AltHTML : HTMLテンプレート + MarkDown + シンタックスハイライト AltCSS : Sass, SCSS, or LESS
10. 例えば、こう。 AltHTML : HTMLテンプレート + MarkDown + シンタックスハイライト ↑ Pygments RedCarpet → AltCSS : Sass, SCSS, or LESS
11. 例えば、こう。 AltHTML : HTMLテンプレート + MarkDown + シンタックスハイライト ↑ Pygments ↓問題はこいつ AltCSS : Sass, SCSS, or LESS RedCarpet →
12. テンプレートで出力したいHTMLと、 JavaScriptで出力したいHTMLは 結構かぶってる。
13. だから、
14. AltJSのコードを 使いまわしたい
15. AltJSのコードを 使いまわしたい
16. AltJSのコードを 使いまわしたい
17. そこで、
18. Haxe
19. で、作りました
20. Teplay 静的サイトジェネレータ http://teplay.spheresofa.net/ja/
21. Teplay? なにそれ? Teplayは テンプレートエンジン & HTMLとCSSのビルド (MarkDown+シンタックスハイライト と Sass) のフレームワーク
22. Teplayテンプレートエンジン それは、 テキストの中に直接Haxeを記述して Haxeの変数や関数を呼び出せる テンプレートエンジン
23. どうやって？
24. TeplayはHaxeのマクロ を使って作られています。
25. なぜ？
26. マクロを使う理由1 マクロの実行時のエラーは、 Haxeのコンパイルエラー
27. つまり HaxeをサポートしているIDEで エラー行表示、行ジャンプ ができる
28. FlashDevelopでも、 IntelliJ IDEAでも、 これから現れる未来のIDEでも
29. マクロを使う理由2 haxe.macro.Contextの parse(expr, pos)関数
30. Haxeのコードを文字列で渡すと 構文木を返してくれる関数
31. Teplayのテンプレートエンジンは parse後の構文木を実行してるだけ
32. 簡単に処理系を 実装できる！
33. ちなみに逆に、 構文木からHaxeに変換することもできる
34. ん？
35. つまり、Haxeのマクロで パーサを実装すれば…
36. 8言語に出力できる 新言語が作れる Flash JavaScript Neko C++ PHP C# Java Python
37. Haxeやばい
38. マクロやばい
39. まとめ 私たちはJavaScriptを書くために JavaScriptを書くんじゃない。 Webサイトをつくるために JavaScriptを書くんだ。
40. まとめ JSの枠にとらわれず その目的を達成できる言語のこそが、 最強のAltJS といえるのではないだろうか？
41. 以上 @shohei909 がお送りしました