伝えたいこと！

ReactJS というものが

フロントエンドの世界で

流行りつつあるということ

ReactJS 初見で感じたこと

表示 と 動作 を

１つのコンポーネントとして扱う。

MVCやオブジェクト指向に

代わるかもしれない

画期的なアプローチ

こういう感じ

var CommentBox = React.createClass({
    handleCommentSubmit: function(comment) {
        ...
    },
    render: function() {
        return (
            <div className="commentBox">
                <h1>Comments</h1>
                <CommentList data={this.state.data} />
                <CommentForm onCommentSubmit={this.handleCommentSubmit} />
            </div>
        );
    }
});

この新しいコンセプトの

勘所 を体感したい！！

昔、偉い人がこう言ってました。

普通の PHPer

Ruby で書かれたゲームを

Ruby で学んで Ruby で攻略する

より練度の高い PHPer

Ruby で書かれたゲームを

PHP で すべて再実装し、

ステージをPHPで攻略

マスクドPHPさん

RubyWarriorをPHPに移植した #phpwarrior

そうだ！

PHP で動かそう！！

目的(体感したいポイント)

• ReactJS の 疎結合 の具合
• その ベストプラクティス

ReactJS の

チュートリアル と、

それが動く コア を

PHP で実装。

デモ ＆ ソース

試しに

削除ボタン を

追加してみよう

デモ ＆ ソース

これで多くのことを

感じたのですが

その話は最後に！

実は、今回、この試みで心残りがありました。

JSX版 をPHP版のソースの

見た目が違いすぎる。

JSX版とほぼ同じソースで動く
PHP版作りました。

デモ ＆ ソース

似せるためだけのソースが、
コアの 1.5 倍のボリュームに。。。

見た目似せる企画は
そのための層が厚すぎて、

動作遅いし、

デバッグ大変。。。

ただ、すごく楽しかった！

話を戻して、感じたこと。

感じたこと 1  -  props

ReactJS では

描画に必要な 引数(props) が常に

上位→下位へと 一方向 で渡される。

これが、 関数呼び出し のよう。

構造化のノウハウが応用できそう。

感じたこと 2  -  state

エレメントに 変数(state) を持たせて
外部から参照/更新させたいなら
メソッド を作る。

state は private 変数 のよう。

オブジェクト指向 のノリ。

感じたこと 3  -  メソッドの公開

メソッドを コールバック の形で
下位へと渡すことで
影響範囲 を限定している。
オブジェクト指向のように
自由にアクセスさせない。

引数大量 問題が起こりそう。

感じたこと 4  -  メソッドの公開

渡す方向が上位→下位の一方向。
色んなところで使う機能は上位に集中。
値を中継する中間層は冗長な感じ。

関数型言語の考え方が必要なのかも。

感じたこと 5  -  MVC との対比

描画と動作を一緒に書くというのは
V と M を一緒に書いてるよう。
慣れると書きやすい。
M 中心の MVC と違い、V 中心な感じ。

V が複雑な場合に良いのかも。

facebook: 寺田渉
github:   waterada
twitter:  @wa_terada

以上です！ ご質問があれば！

joind.in: joind.in/talk/view/16037​