PHP と JavaScript の噺
@ooharabucyou
第76回 PHP勉強会
わたしについて
● PHP歴 = 7年, エンジニア歴 = 6年
● Rakuten, inc. なんと新卒4年目になる
● 最近のお仕事
○ node.js でバックエンドなシステムづくり
■ BaaS Team, Web Sevice Platform Group
○ Java & Groovy でバックエンドなシステムづくり
○ http://webservice.rakuten.co.jp 楽天API 運用・開発・
宣伝何でもやる課
○ PHPはちょっと見るくらい
■ 一番最近やったPHP仕事は Symfony2.0 から 2.3
へのバージョンアップ
最近
● サーバサイドでも JavaScript 書く人になった
今日のテーマ
JavaScript
X
PHP
JavaScript X PHP にまつわる噺 3本
1. JavaScript 上で PHP(的)な関数を走らせたい
2. JavaScript 上で PHP(っぽいもの) を走らせた
い
3. PHP 上で JavaScript を走らせたい
まってくれ
そんなにバカ話じゃない
● その1 は実用的ですよ
その1: JavaScript で PHP(的)な関数を
使いたい
● PHPer のみなさん! こんな経験ありませんか?
○ ようし! クライアントサイド/サーバサイド な JavaScript
書くぞーー
○ あれ、PHPで便利にできるアレ、JavaScript でどうやる
んだ???
○ strtotime(), array_*(), rawurlencode(),
htmlspecialchars() もなしにワシはどう開発すればいい
んじゃ。
array_merge() っぽいことを
js でやるには
var merge = function(obj1, obj2) {
obj2 = obj2 || {};
for (var name in obj2) {
obj1[name] = obj2;
}
};
// なんか関数をつくらなきゃいけない
// PHP のように渡した値が変更されないようにするには、オブ
ジェクトのclone を実装する必要がある
strtotime() っぽいことを
js でやるには
var strtotime = function(str) {
var date = new Date(str);
return Math.round(date.getTime() / 1000);
};
// これは超適当実装です。一部ブラウザは対応し
ないかも
// ほかにも +2days とか実装したいとか思ったらよ
り至難の業
もちろん便利なライブラリはあるけど
● 例えば
○ jQuery な機能を駆使
○ underscore.js (配列のマージとか、フィルタなど便利な
機能を提供)
○ Moment.js (時間関連の処理を強力にサポート)
慣れ親しんだ
PHPの関数を使いたい
そこで便利なのが php.js
● http://phpjs.org/
● PHPのあの関数や、例の関数をJavaScriptの
世界で再現!
● node.js 使いは npm install phpjs で、使えるよ!
● ブラウザでも動くよ。
ブラウザ上での使い方
● https://github.com/kvz/phpjs から clone
● functions/ 下に関数ごとに js が入っているので <script> で
ロードする
● あとは、そのまま使える
<script src=”
phpjs/functions/array/array_merge.js”
></script>
<script>
array_merge([“Hello”], [“World”]); //
[“Hello”, “World”]
</script>
node.js 上での使い方
● npm install phpjs でインストール
● あとは以下のように使える。
var php = require(‘phpjs’);
php.array_merge([“Hello”],
[“World”]); // [“Hello”, “World”]
例の array_merge() も
● 元のオブジェクト非破壊
● 第3引数以上も指定可能
var php = require('phpjs')
, obj = { foo: ‘bar’ };
php.array_merge(obj, {
hoge: ‘fuga’
}); // { foo: ‘bar’, hoge: ‘fuga’}
あの strtotime() が!
● 便利だけど再現性はまだまだ?
● 元祖 strtotime() すごいよ!
// strtotime & date
var t = php.strtotime('+7 days');
php.date('Y-m-d', t); // 今日から7日後の日付
t = php.strtotime('2014-01-01 10:00:00');
php.date('Y-m-d H:i:s', t); // 2014-01-01 10:00:00
t = php.strtotime(‘2014-01-01 10:00:00 +7 days’);
php.date(‘Y-m-d’, t); // 今から7日後の日付 (本家は 2014-01-08を示す)
いるのか? echo()
● いるのか? と思ったけど、環境ごとの出力の仕
方などを担っている模様。
● 結構、重厚たるコード量
○ http://phpjs.org/functions/echo/
● node.js なら console.log() 、ブラウザなら
DOM要素追加
● 出力のある、もろもろの関数は、この関数に依
存している。
var_dump() だって!!
● 型も表示してくれるぞ!
● (ブラウザの場合 echo.js のロード必須)
● なんだ。。 PHP はやっぱり JSON でできていた
んじゃないか? そうに違いない。(PHP勉強会72
回 中野さんの JSON Schema の説明参照
http://www.slideshare.net/hinakano/json-
schema)
var_dump() さん ひょっとして console.log() さ
んより便利なんじゃないか
● 使いどころ間違えなきゃ便利なんじゃないか。
● 関数の中身も toString() しておっぴろげてくれ
るぞ!!
○ なお、本家PHPで同じようなことやると Closure#1 の
ようにしか表示されない
● なお、 node.js の util.inspect() は、そ
のままだと [Function] としか出してくれない模
様。
urlencode() だってPHP基準?
● 闇PHP勉強会 の @co3k さんの資料参照
(http://www.slideshare.net/ebihara/php-
32340906)
● php.js の urlencode() は空白は + に置き換
え、~ はエンコードしない模様。
● rawurlencode() もあるよ。
file_get_contents() はデフォルトで
“同期処理” でコンテンツ取得
● file_get_contents(“test”); とやると、
XHR (XmlHttpRequest) でのコンテンツ取得を
行う。
● デフォルトでは同期処理。
○ つまり、これ使うと一旦処理がとまるよ!
● 非同期処理を 第3引数 context で行うことがで
きる。
○ 本家は、header 周りとかの制御につかったりする。
なお非同期 file_get_contentns()
file_get_contents('data', false, {
stream_params: {
'phpjs.async': true,
notification: function(code, severity, msg, st, bt) {
if (code >= 8) {
var_dump(this.responseText);
}
}
}
});
// こんなの PHP じゃないわ!!!!
// file_get_contents() がついた JavaScript よ!!!!
// だったら(コールバック関数を) 呼べばいいだろ!!
(注意?) implode() は歴史的事情知らず
● さすがに例の順序逆も受け付ける仕様はは
いってなかった。
● 実装面倒だもんね。しょうがないよね。
php.implode(',', [‘Hello’, 'world']); // Hello,world
php.implode([‘Hello’, ‘world’], ‘,’); // ,
それでも物足りないあなた
● php.js は 325 の関数に対応
○ 本家には 3,000 以上あるってよ。へー。
● でも、そもそも JavaScript なんて書きたくな
い! とにかくPHP が書きたいんだ! という人
(中毒者?) もいるかもしれない。
● そこで、また別の php.js を紹介
その2: php.js - PHP VM with
JavaScript
● そもそも JavaScript 上で PHP を実行してしま
えばいいんじゃないかという発想のモノ
● ブラウザで動くぞ!!!
● class も magic method もちゃんと動くぞ!!
● 関数も一部はサポートしている模様。
● http://phpjs.hertzen.com/
○ (ブラウザでデモができます)
ブラウザで php.js VM を動かす
<script src="PHP.js"></script>
<script src="adapters/filesystem/xhr.js"></script>
<!-- PHP.js と filesystem 用の adapter をロード -->
<script>
var opts = {};
opts.filesystem = new PHP.Adapters.XHRFileSystem();
var path = window.location.pathname;
opts.SERVER = {
SCRIPT_FILENAME: path.substring(0, path.length)
};
var engine = new PHP(‘<?php echo “Hello”;’, opts);
console.log(engine);
console.log(engine.vm.OUTPUT_BUFFER);
</script>
node.js 上で php.js VM を動かす
var fs = require('fs')
,content = fs.readFileSync('php.js', 'utf8') ;
eval(content);
var opts = {
filesystem: fs,
SERVER: {
SCRIPT_FILENAME: 'file’
}
};
var engine = new PHP('<?php echo "sample";', opts);
console.log(engine.vm.OUTPUT_BUFFER);
php.js VM の不思議
● php_logo_guid() が実装されている
○ ロゴの guid を取得できるよ!
■ で、だからどうした。。
■ ちなみに、隠し関数(?)の
php_egg_logo_guid() もあるよ!
○ 【悲報】なお、本家側では、この関数は PHP5.5 で削除
された模様
その3: PHP上でJavaScript を走らせる
● 逆に PHP上で V8 JavaScript Engine を利用し
て JavaScript を実行することもできる。
● http://www.php.net/manual/ja/book.v8js.php
● 使い道思いつかない!
インストール方法 (Ubuntu)
sudo apt-get install libv8js-dev
# まだbeta なのだよ
pecl install v8js-0.1.5
# アレ登録
sudo echo “extension=v8js.so” >
/etc/php5/conf.d/v8js.ini
コード
<?php
$v8 = new V8Js();
$JS = <<<JS
var hello = function() {
return "Hello!";
};
hello();
JS;
try {
var_dump($v8->executeString($JS, 'basic.js'));
} catch (V8JsException $e) {
var_dump($e);
}
まとめ
● あのPHPの関数が JavaScript でほしい / どう
実装するのか知りたい
○ php.js (http://phpjs.org/)
● そもそもPHPの構文をクライアントサイド上で動
かしたい
○ php.js VM (http://phpjs.hertzen.com/)
● JavaScript をPHP上で動かしたい (!?)
○ v8js module
○ だれか、これだ!っていう使い道を教えてくれ

PHPとJavaScriptの噺

  • 1.
    PHP と JavaScriptの噺 @ooharabucyou 第76回 PHP勉強会
  • 2.
    わたしについて ● PHP歴 =7年, エンジニア歴 = 6年 ● Rakuten, inc. なんと新卒4年目になる ● 最近のお仕事 ○ node.js でバックエンドなシステムづくり ■ BaaS Team, Web Sevice Platform Group ○ Java & Groovy でバックエンドなシステムづくり ○ http://webservice.rakuten.co.jp 楽天API 運用・開発・ 宣伝何でもやる課 ○ PHPはちょっと見るくらい ■ 一番最近やったPHP仕事は Symfony2.0 から 2.3 へのバージョンアップ
  • 3.
  • 4.
  • 5.
    JavaScript X PHPにまつわる噺 3本 1. JavaScript 上で PHP(的)な関数を走らせたい 2. JavaScript 上で PHP(っぽいもの) を走らせた い 3. PHP 上で JavaScript を走らせたい
  • 7.
  • 8.
    その1: JavaScript でPHP(的)な関数を 使いたい ● PHPer のみなさん! こんな経験ありませんか? ○ ようし! クライアントサイド/サーバサイド な JavaScript 書くぞーー ○ あれ、PHPで便利にできるアレ、JavaScript でどうやる んだ??? ○ strtotime(), array_*(), rawurlencode(), htmlspecialchars() もなしにワシはどう開発すればいい んじゃ。
  • 9.
    array_merge() っぽいことを js でやるには varmerge = function(obj1, obj2) { obj2 = obj2 || {}; for (var name in obj2) { obj1[name] = obj2; } }; // なんか関数をつくらなきゃいけない // PHP のように渡した値が変更されないようにするには、オブ ジェクトのclone を実装する必要がある
  • 10.
    strtotime() っぽいことを js でやるには varstrtotime = function(str) { var date = new Date(str); return Math.round(date.getTime() / 1000); }; // これは超適当実装です。一部ブラウザは対応し ないかも // ほかにも +2days とか実装したいとか思ったらよ り至難の業
  • 12.
    もちろん便利なライブラリはあるけど ● 例えば ○ jQueryな機能を駆使 ○ underscore.js (配列のマージとか、フィルタなど便利な 機能を提供) ○ Moment.js (時間関連の処理を強力にサポート)
  • 13.
  • 14.
    そこで便利なのが php.js ● http://phpjs.org/ ●PHPのあの関数や、例の関数をJavaScriptの 世界で再現! ● node.js 使いは npm install phpjs で、使えるよ! ● ブラウザでも動くよ。
  • 15.
    ブラウザ上での使い方 ● https://github.com/kvz/phpjs からclone ● functions/ 下に関数ごとに js が入っているので <script> で ロードする ● あとは、そのまま使える <script src=” phpjs/functions/array/array_merge.js” ></script> <script> array_merge([“Hello”], [“World”]); // [“Hello”, “World”] </script>
  • 16.
    node.js 上での使い方 ● npminstall phpjs でインストール ● あとは以下のように使える。 var php = require(‘phpjs’); php.array_merge([“Hello”], [“World”]); // [“Hello”, “World”]
  • 17.
    例の array_merge() も ●元のオブジェクト非破壊 ● 第3引数以上も指定可能 var php = require('phpjs') , obj = { foo: ‘bar’ }; php.array_merge(obj, { hoge: ‘fuga’ }); // { foo: ‘bar’, hoge: ‘fuga’}
  • 18.
    あの strtotime() が! ●便利だけど再現性はまだまだ? ● 元祖 strtotime() すごいよ! // strtotime & date var t = php.strtotime('+7 days'); php.date('Y-m-d', t); // 今日から7日後の日付 t = php.strtotime('2014-01-01 10:00:00'); php.date('Y-m-d H:i:s', t); // 2014-01-01 10:00:00 t = php.strtotime(‘2014-01-01 10:00:00 +7 days’); php.date(‘Y-m-d’, t); // 今から7日後の日付 (本家は 2014-01-08を示す)
  • 19.
    いるのか? echo() ● いるのか?と思ったけど、環境ごとの出力の仕 方などを担っている模様。 ● 結構、重厚たるコード量 ○ http://phpjs.org/functions/echo/ ● node.js なら console.log() 、ブラウザなら DOM要素追加 ● 出力のある、もろもろの関数は、この関数に依 存している。
  • 20.
    var_dump() だって!! ● 型も表示してくれるぞ! ●(ブラウザの場合 echo.js のロード必須) ● なんだ。。 PHP はやっぱり JSON でできていた んじゃないか? そうに違いない。(PHP勉強会72 回 中野さんの JSON Schema の説明参照 http://www.slideshare.net/hinakano/json- schema)
  • 21.
    var_dump() さん ひょっとしてconsole.log() さ んより便利なんじゃないか ● 使いどころ間違えなきゃ便利なんじゃないか。 ● 関数の中身も toString() しておっぴろげてくれ るぞ!! ○ なお、本家PHPで同じようなことやると Closure#1 の ようにしか表示されない ● なお、 node.js の util.inspect() は、そ のままだと [Function] としか出してくれない模 様。
  • 22.
    urlencode() だってPHP基準? ● 闇PHP勉強会の @co3k さんの資料参照 (http://www.slideshare.net/ebihara/php- 32340906) ● php.js の urlencode() は空白は + に置き換 え、~ はエンコードしない模様。 ● rawurlencode() もあるよ。
  • 23.
    file_get_contents() はデフォルトで “同期処理” でコンテンツ取得 ●file_get_contents(“test”); とやると、 XHR (XmlHttpRequest) でのコンテンツ取得を 行う。 ● デフォルトでは同期処理。 ○ つまり、これ使うと一旦処理がとまるよ! ● 非同期処理を 第3引数 context で行うことがで きる。 ○ 本家は、header 周りとかの制御につかったりする。
  • 24.
    なお非同期 file_get_contentns() file_get_contents('data', false,{ stream_params: { 'phpjs.async': true, notification: function(code, severity, msg, st, bt) { if (code >= 8) { var_dump(this.responseText); } } } }); // こんなの PHP じゃないわ!!!! // file_get_contents() がついた JavaScript よ!!!! // だったら(コールバック関数を) 呼べばいいだろ!!
  • 25.
    (注意?) implode() は歴史的事情知らず ●さすがに例の順序逆も受け付ける仕様はは いってなかった。 ● 実装面倒だもんね。しょうがないよね。 php.implode(',', [‘Hello’, 'world']); // Hello,world php.implode([‘Hello’, ‘world’], ‘,’); // ,
  • 26.
    それでも物足りないあなた ● php.js は325 の関数に対応 ○ 本家には 3,000 以上あるってよ。へー。 ● でも、そもそも JavaScript なんて書きたくな い! とにかくPHP が書きたいんだ! という人 (中毒者?) もいるかもしれない。 ● そこで、また別の php.js を紹介
  • 27.
    その2: php.js -PHP VM with JavaScript ● そもそも JavaScript 上で PHP を実行してしま えばいいんじゃないかという発想のモノ ● ブラウザで動くぞ!!! ● class も magic method もちゃんと動くぞ!! ● 関数も一部はサポートしている模様。 ● http://phpjs.hertzen.com/ ○ (ブラウザでデモができます)
  • 28.
    ブラウザで php.js VMを動かす <script src="PHP.js"></script> <script src="adapters/filesystem/xhr.js"></script> <!-- PHP.js と filesystem 用の adapter をロード --> <script> var opts = {}; opts.filesystem = new PHP.Adapters.XHRFileSystem(); var path = window.location.pathname; opts.SERVER = { SCRIPT_FILENAME: path.substring(0, path.length) }; var engine = new PHP(‘<?php echo “Hello”;’, opts); console.log(engine); console.log(engine.vm.OUTPUT_BUFFER); </script>
  • 29.
    node.js 上で php.jsVM を動かす var fs = require('fs') ,content = fs.readFileSync('php.js', 'utf8') ; eval(content); var opts = { filesystem: fs, SERVER: { SCRIPT_FILENAME: 'file’ } }; var engine = new PHP('<?php echo "sample";', opts); console.log(engine.vm.OUTPUT_BUFFER);
  • 30.
    php.js VM の不思議 ●php_logo_guid() が実装されている ○ ロゴの guid を取得できるよ! ■ で、だからどうした。。 ■ ちなみに、隠し関数(?)の php_egg_logo_guid() もあるよ! ○ 【悲報】なお、本家側では、この関数は PHP5.5 で削除 された模様
  • 31.
    その3: PHP上でJavaScript を走らせる ●逆に PHP上で V8 JavaScript Engine を利用し て JavaScript を実行することもできる。 ● http://www.php.net/manual/ja/book.v8js.php ● 使い道思いつかない!
  • 32.
    インストール方法 (Ubuntu) sudo apt-getinstall libv8js-dev # まだbeta なのだよ pecl install v8js-0.1.5 # アレ登録 sudo echo “extension=v8js.so” > /etc/php5/conf.d/v8js.ini
  • 33.
    コード <?php $v8 = newV8Js(); $JS = <<<JS var hello = function() { return "Hello!"; }; hello(); JS; try { var_dump($v8->executeString($JS, 'basic.js')); } catch (V8JsException $e) { var_dump($e); }
  • 34.
    まとめ ● あのPHPの関数が JavaScriptでほしい / どう 実装するのか知りたい ○ php.js (http://phpjs.org/) ● そもそもPHPの構文をクライアントサイド上で動 かしたい ○ php.js VM (http://phpjs.hertzen.com/) ● JavaScript をPHP上で動かしたい (!?) ○ v8js module ○ だれか、これだ!っていう使い道を教えてくれ