XHPをはじめよう

XHP をはじめよう HHVM/Hack 勉強会 vol.1 LT 枠@2018-4-20

自己紹介 Masaru Shiraishi istyle.inc 昔は海上自衛隊で船乗ってました

みなさんHack やってますか?

一緒にXHP も使ってますか?

XHP Facebook で開発されたPHP/Hack 拡張のHTML テンプレートエンジンのようなもの。 (XML ベースの)HTML
構文がPHP/Hack の式として評価されるため、 HTML そのものをオブジェクトとして扱うことが出来たり、再利用が可能になります。 Hack の利点であるTypechecker での厳密なチェックが有効になるのも特徴の一つです。 JavaScript ライブラリのReact のベースにもなっています。

とりあえず見た方が早い!!

XHP を使わない実装 <?hh $href = urlencode("http://...."); echo "<a href='${href}'>Hello World</a>";
XHP を使った実装 <?hh $href = "http://...."; $xhp = <a href={$href}>Hello World<a>; echo $xhp;

XHP を使わない実装 <?hh $href = urlencode("http://...."); echo "<a href='${href}'>Hello World</a>";
XHP を使った実装 <?hh $href = "http://...."; $xhp = <a href={$href}>Hello World<a>; echo $xhp; ※ HTML が文字列ではないことに注目!!

XHP の特徴 HTML 要素を文字列ではなく、オブジェクトとして扱える HTML やその属性のエスケープ処理(XSS 対策) が自動
XML がベースなので仕様が厳格閉じタグ必須 HTML 要素のネストの誤りはエラー Hack ではTypechecker でのエラー検出が可能

もっと知りたい方はドキュメントを見てください!! https://docs.hhvm.com/hack/XHP/introduction

今日はXHP をやってみたら見えてきた壁をさらっと紹介します

ひと手間が必要になる壁

そのままではCustome Elements が使えない XHP にはHTML の一般的なタグしか実装されていません。そのため、Custom Elements を使うとコンパイルエラーになります。
 <link rel="import" href="../custom-elements.html"> <custom-tag active></custom-tag> Custom Elements とは HTML の新しい型を定義できるWeb Components の機能。 “ “

解決するには自分でXHP クラスを実装する必要があります。 <?hh // strict class :custom-tag extends :xhp:html-element
{ children empty; category %flow; attribute bool active; protected string $tagName = 'custom-tag'; } ※ 正確にはchildren empty; の要素は:xhp:html-singleton をextends するのが正しい

これからぶつかるかもしれない壁

デザイナーとの協業が難しそう Hack のコードと混ざってしまう。 public function render(string $name): \XHPRoot
{ return ( <div class="hello-name"> <p>Hello {$name}</p> </div> ); } 社内ツールの実装なので今はまだデザイナー不在でやってますが....

コンクリートよりも堅い壁

何よりもXHP の情報が少ない!!

ほぼこの情報だけで頑張ってます... HHVM/Hack リファレンス https://docs.hhvm.com/hack/XHP/introduction XHP のソースコード https://github.com/hhvm/xhp-lib XHP
Bootstrap のソースコード https://github.com/fbsamples/xhp-bootstrap

ということで...

みなさん一緒にXHP やりましょう!!

ご静聴ありがとうございました

XHPをはじめよう

XHPをはじめよう

shirotter

Other Decks in Programming

Featured

Transcript