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
以上です! ご質問があれば!
joind.in: joind.in/talk/view/16037
ご静聴ありがとうございました!
今日 伝えたいこと!
- Reactのコンセプト(PHPで)
- 実装結果
- 試しに 削除機能 を加えてみる
- さらなる拡張!
- jsx版が読めるようになっている
ReactJS を PHP で理解する
By Wataru Terada
ReactJS を PHP で理解する
ReactJS のコンセプトをPHPを使って理解しようという試みと、その結論の紹介です。
- 4,237