Upgrade to Pro — share decks privately, control downloads, hide ads and more …

XHPをはじめよう

 XHPをはじめよう

Getting started with XHP

HHVM/Hack勉強会 vol.1 LT@2018/4/20

5a867a8275346f66e3a7991fb4ec2f92?s=128

shirotter

April 20, 2018
Tweet

Transcript

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

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

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

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

  5. XHP Facebook で開発されたPHP/Hack 拡張のHTML テンプレー トエンジンの ようなもの。 (XML ベー スの)HTML

    構文がPHP/Hack の式として評価されるため、 HTML そのものをオブジェクトとして扱うことが出来たり、 再利用が可 能になります。 Hack の利点であるTypechecker での厳密なチェックが有効になるのも特 徴の一つです。 JavaScript ライブラリのReact のベー スにもなっています。
  6. とりあえず見た方が早い!!

  7. 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;
  8. 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 が文字列ではないことに注目!!
  9. XHP の特徴 HTML 要素を文字列ではなく、 オブジェクトとして扱える HTML やその属性のエスケー プ処理(XSS 対策) が自動

    XML がベー スなので仕様が厳格 閉じタグ必須 HTML 要素のネストの誤りはエラー Hack ではTypechecker でのエラー 検出が可能
  10. もっと知りたい方はドキュメントを見てください!! https://docs.hhvm.com/hack/XHP/introduction

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

  12. ひと手間が必要になる壁

  13. そのままではCustome Elements が使えない XHP にはHTML の一般的なタグしか実装されていません。 そのため、Custom Elements を使うとコンパイルエラー になります。

    <!-- "-" を含めなくてはならない命名規則がある --> <link rel="import" href="../custom-elements.html"> <custom-tag active></custom-tag> Custom Elements とは HTML の新しい型を定義できるWeb Components の機能。 “ “
  14. 解決するには 自分で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 するのが正しい
  15. これからぶつかるかもしれない壁

  16. デザイナー との協業が難しそう Hack のコー ドと混ざってしまう。 public function render(string $name): \XHPRoot

    { return ( <div class="hello-name"> <p>Hello {$name}</p> </div> ); } 社内ツー ルの実装なので今はまだデザイナー 不在でやってますが....
  17. コンクリー トよりも堅い壁

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

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

    Bootstrap のソー スコー ド https://github.com/fbsamples/xhp-bootstrap
  20. ということで...

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

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