ReactJS を PHP で理解する

2015-10-28      第95回 PHP勉強会@東京

GMOリサーチ 寺田渉

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

自己紹介 (会社)

- PHP (CakePHP) を主に使って開発

- 継続的インテグレーション

github + git flow で運用

- PHPUnit で カバレッジ 100%

- Behat (Selenium Driver 経由の画面テスト) 利用

- vagrant で開発環境構築

自己紹介 (趣味)

CakePHP 公式ドキュメント 翻訳

自己紹介 (趣味)

ボードゲーム 翻訳

自己紹介 (趣味)

TED 翻訳

自己紹介

プログラミング & 翻訳

大好き人間です

伝えたいこと!

ReactJS というものが

フロントエンドの世界で

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

ReactJS 初見で感じたこと

表示 と 動作 

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

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さん

そうだ!

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

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

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

今日 伝えたいこと!

  1. ReactのコンセプトPHPで
  2. 実装結果
  3. 試しに 削除機能 を加えてみる
  4. さらなる拡張
  5. jsx版が読めるようになっている
Made with Slides.com