XHPをやってみよう！
今回はReactのTutorialで使われているものを、HackのXHPを利用して、その差を紹介します。
JSのコード(Reactなど)を吐き出す訳ではありませんので、
onClickなどのインタラクティブな要素はなく、
あくまで描画のみとなります。
ShoppingList
Reactのチュートリアルの概要で紹介されている例です。
JSXの例です。
class ShoppingList extends React.Component {
render() {
return (
<div className="shopping-list">
<h1>Shopping List for {this.props.name}</h1>
<ul>
<li>Instagram</li>
<li>WhatsApp</li>
<li>Oculus</li>
</ul>
</div>
);
}
}
これをXHPとして記述します。
<?hh // strict
class :ShoppingList extends :x:element {
attribute string name @required;
protected function render(): \XHPRoot {
return <div class="shopping-list\">
<h1>Shopping List for {$this->:name}</h1>
<ul>
<li>Instagram</li>
<li>WhatsApp</li>
<li>Oculus</li>
</ul>
</div>;
}
}
PHPに慣れているとcomposer.jsonでPSR-4を利用しているため、
ディレクトリ、ファイル名を合わせる必要がありますが、
Hackの場合は hhvm/hhvm-autoload を利用して、
XHP関係のものはオートローダーが吸収しますので、意識する必要はありません。
また、一ファイルに複数のXHPクラスが存在していても問題ありませんので、
Reactと同じ感覚で実装します。
描画は下記で行います。
<?hh // strict
require __DIR__ .'/vendor/hh_autoload.php';
<<__Entrypoint>>
function run(): void {
echo <ShoppingList name="ytake"/>;
}
出力結果はこの通りです。
JSでの操作などを行う訳ではないためclassNameなどはありませんが、
基本的なところはほぼ同等というのがわかると思います。
Attributeの記述方法は次の通りです。
attribute <type> <name> [= default value|@required];
Attributeなど、Hackに対応しているIDEでは基本的にすべて補完等できますので、
簡単に理解できると思います。
XHPはasyncを使って描画などを行うことはできますが、あくまでI/Oが発生するものに対してとなりますので、
利用ケースとしてはHTTPリクエストや、DBの処理などと組み合わせます。
同じ出力結果になりますが、下記の様に記述することもできます。
<?hh // strict
require __DIR__ .'/vendor/hh_autoload.php';
<<__Entrypoint>>
function run(): void {
$div = <div />;
$div->addClass('shopping-list');
$name = 'ytake';
$header = <h1>Shopping List for {$name}</h1>;
$div->appendChild($header);
$list = <ul />;
$v = vec['Instagram', 'WhatsApp', 'Oculus'];
foreach ($v as $item) {
$list->appendChild(<li>{$item}</li>);
}
$div->appendChild($list);
echo $div;
}
ほとんどの場合では後者で記述することはないと思います。
tic-tac-toe / 三目並べ
次に三目並べですが、XHPでは描画までとなりますので、
描画部分のみをXHPで記述してみましょう。
Reactの例と同じ様に下記の三つのコンポーネントを用意します。
- Square
- Board
- Game
Square
JSXでの記述は次の通りです。
class Square extends React.Component {
render() {
return (
<button className="square">
{this.props.value}
</button>
);
}
}
XHPで記述してもそこまで大差はありません。
ここでは描画部分のみを記述しますので、valueは必須にしておきましょう。
<?hh // strict
class :Square extends :x:element {
attribute int value @required;
protected function render(): \XHPRoot {
return <button class="square">
{$this->:value}
</button>;
}
}
Board
次にboardです。
class Board extends React.Component {
renderSquare(i) {
return <Square value={i} />;
}
render() {
const status = 'Next player: X';
return (
<div>
<div className="status">{status}</div>
<div className="board-row">
{this.renderSquare(0)}
{this.renderSquare(1)}
{this.renderSquare(2)}
</div>
<div className="board-row">
{this.renderSquare(3)}
{this.renderSquare(4)}
{this.renderSquare(5)}
</div>
<div className="board-row">
{this.renderSquare(6)}
{this.renderSquare(7)}
{this.renderSquare(8)}
</div>
</div>
);
}
}
これに対してXHPです。
これもそこまで大きな差はありません。
class :Board extends:x:element {
const string STATUS = 'Next player: XHP';
private function renderSquare(int $i): :Square {
return <Square value={$i} />;
}
protected function render(): \XHPRoot {
return <div>
<div class="status">{self::STATUS}</div>
<div class="board-row">
{$this->renderSquare(0)}
{$this->renderSquare(1)}
{$this->renderSquare(2)}
</div>
<div class="board-row">
{$this->renderSquare(3)}
{$this->renderSquare(4)}
{$this->renderSquare(5)}
</div>
<div class="board-row">
{$this->renderSquare(6)}
{$this->renderSquare(7)}
{$this->renderSquare(8)}
</div>
</div>;
}
}
Game
最後にGameです。
まずはjsxの例です。
class Game extends React.Component {
render() {
return (
<div className="game">
<div className="game-board">
<Board />
</div>
<div className="game-info">
<div>{/* status */}</div>
<ol>{/* TODO */}</ol>
</div>
</div>
);
}
}
特に難しいものはありません。
class :Game extends :x:element {
protected function render(): \XHPRoot {
return <div class="game">
<div class="game-board">
<Board />
</div>
<div class="game-info">
<div></div>
<ol></ol>
</div>
</div>;
}
}
これらを出力すると以下のものになります。
Reactのサンプルと全く同じものです。
ボタンのonclickにイベントを埋める場合は、
前回紹介したXHPUnsafeRenderableを実装したクラスを利用します。
final class ClickAlert implements XHPUnsafeRenderable {
public function toHTMLString(): string {
return "alert('click');";
}
}
作成したクラスを :Square クラスで利用します。
class :Square extends :x:element {
attribute int value @required;
protected function render(): \XHPRoot {
$stringish = new ClickAlert()|> $$->toHTMLString();
return <button class="square" onclick={$stringish}>
{$this->:value}
</button>;
}
}
描画までのコードは以下の通りです。
<?hh // strict
class :Square extends :x:element {
attribute int value @required;
protected function render(): \XHPRoot {
$stringish = new ClickAlert()|> $$->toHTMLString();
return <button class="square" onclick={$stringish}>
{$this->:value}
</button>;
}
}
class :Board extends:x:element {
const string STATUS = 'Next player: XHP';
private function renderSquare(int $i): :Square {
return <Square value={$i} />;
}
protected function render(): \XHPRoot {
return <div>
<div class="status">{self::STATUS}</div>
<div class="board-row">
{$this->renderSquare(0)}
{$this->renderSquare(1)}
{$this->renderSquare(2)}
</div>
<div class="board-row">
{$this->renderSquare(3)}
{$this->renderSquare(4)}
{$this->renderSquare(5)}
</div>
<div class="board-row">
{$this->renderSquare(6)}
{$this->renderSquare(7)}
{$this->renderSquare(8)}
</div>
</div>;
}
}
class :Game extends :x:element {
protected function render(): \XHPRoot {
return <div class="game">
<div class="game-board">
<Board />
</div>
<div class="game-info">
<div></div>
<ol></ol>
</div>
</div>;
}
}
final class ClickAlert implements XHPUnsafeRenderable {
public function toHTMLString(): string {
return "alert('click');";
}
}
最後のEntrypoiintでの出力は下記のもののみです。
<?hh // strict
require __DIR__ .'/vendor/hh_autoload.php';
<<__Entrypoint>>
function run(): void {
echo <Game />;
}
基本的な実装方法を覚えて、ぜひ活用してみてください。