ChatWork Advent Calendar 2017の5日目の記事です。

こんにちは。インフラマネジメント部の @cw-ozakii です。

先日のphpcon 2017にてbabel-preset-phpのLTをさせていただきました。

PHPでJavaScriptを書く話 #phpconf2017 from K Kinzal

このときはLTの枠内に収めるためにbabel-preset-phpで何ができるのかをデモを中心に進めました。が、LTの内容から落とした技術的な話の中にはbabel-preset-phpをいかに導入するかという知見が詰まっていたので、今回はそのあたりの話をご紹介したいと思います。

babel-preset-phpの使い方

$ npm install --save-dev babel-cli babel-preset-php
$ $(npm bin)/babel source.php -o output.js --presets=php

基本的には上記のようにNodeプロジェクトでbabel-cliとbabel-preset-phpをインストールし、babelを実行するだけでPHPのコードをNodeのコードに変換することができます。もし、複数のファイルを変換する場合は

$ $(npm bin)/babel src --out-dir dist --presets=php

というようにすれば複数のファイルをNodeのコードに変換をすることはできます。しかし、ここでrequireの問題が出てきます。

requireの問題

LTでも少し話しましたがbabel-preset-phpはPSR-4のautoloaderに対応していません。そこで別のファイルを読み出すにはPHPのrequireやincludeを使う必要が出てきます。

Foo.php

<?
class Foo {
}

index.php

<?
require(__DIR__ . '/Foo.php');

$foo = new Foo();

autoloaderに対応する前の懐かしいPHPの書き方ですね。しかし、このコードをNodeに変換しようとするといくつか注意点が出てきます。

1. PHPのrequire ≠ Nodeのrequire

一つ目はPHPのrequireとNodeのrequireで微妙に挙動が違うということです。

相対パスを書いたときPHPのrequireはPHPのマニュアルにある通りカレントディレクトリからの相対パスになります。しかし、Nodeのrequireはそのファイルからの相対パスとなり、基準となるところが違うためPHPとNodeで両方に対応した相対パスを書くことはできません。そのため、もしrequireでパスを指定する場合はDIRを使って絶対パスになるように指定する必要があります。

余談ですが、

<?
require(dirname(__FILE__)  . '/Foo.php');

のようにdirname(FILE)の場合はdirnameがbabel-preset-phpが対応していないためエラーになります。

2. クラス定義の読み込み

二つ目はクラス定義の読み込みの仕方がPHPとNodeで違うということです。

PHPの場合はクラスを定義した.phpファイルをrequireすれば、そのクラスを利用できるようになります。対してNodeはというと

foo.js

class Foo {
}

module.exports = Foo;

上記のようにクラスをexportして

index.js

var Foo = require(__dirname + '/foo');

のようにexportされたクラスを受け取る必要があります。

これを解決するためにはPHPかNodeのどちらかに寄せる必要があります。

PHPに寄せる場合は

Foo.php

<?
class Foo {
}

if (global) { // on Node
    global.Foo = Foo;
}

というようにNodeのグローバル空間にクラス定義を書き込むことで、requireするだけでクラスを利用できるようになります。

逆にNodeに寄せる場合は

Foo.php

<?
class Foo {
}

return Foo;

index.php

<?
$Foo = require(__DIR__ . '/Foo.php');

$foo = new $Foo();

というようにrequireの結果を受け取り、それをクラスとして利用します。

これはどちらが良い、悪いということはありません。PHPのように書きたければ一つ目の方法を、Nodeのように書きたければ二つ目の方法をということで導入するプロジェクトのスタイルに合わせて決定すれば良いかなと思います。

3. requireの拡張子が.phpのままになる

三つ目はbabelで変換したファイルは.jsに書き換えられるのですが、requireで指定したファイル名は.phpのままになってしまうということです。

index.js

<?
require(__dirname . '/Foo.php');

var foo = new Foo();

ここでgruntやgulpなどのタスクランナーを用いて、ビルドフローで文字列置換を行うのも一つの手ではあります。が、それはあまりイケてる手法ではないので、ここはWebpackを利用して依存を解決し一つのファイルにまとめてしまおうと思います。

$ npm install --save-dev webpack babel-loader

webpack.config.js

module.exports = {
  context: __dirname + '/src',
  entry: __dirname + '/src/index.php',
  output: {
    path: __dirname + '/public',
    filename: 'index.js'
  },
  module: {
    loaders: [
      {
        test: /\.php$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['php']
          }
        }
      }
    ]
  }
};

ここまで準備ができたら、あとはWebpackを実行すると複数のPHPファイルを一まとめのJSにまとめることができます。

$ $(npm bin)/webpack

余談ですが、同様のことをできるツールとしてBrowserifyではエラーになってしまいまとめることはできませんでした。特に深くは追っていないのでもしかしたらBrowserifyでも可能かもしれませんので、どなたか自信がある方はチャレンジしてみてください。

まとめ

いかがでしたでしょうか。このrequireの問題さえ解決してしまえば、あとは既存のNodeの開発フローに乗せて、ElectronでもReact Nativeでも好きなように開発を進め始めることはできるのかなと思います。おそらくその過程でまだ見ぬ地雷を踏みぬくことができるので、そのときはぜひともどんなものを踏み抜いたのかお教えください。

自分はもう十分踏み抜いたと満足したのであとは任せます。

ChatWork Advent Calendar 2017、明日は @cw-arai です。

kubell Creator's Note

ビジネスチャット「Chatwork」のエンジニアのブログです。

PHPでJSを書く話

babel-preset-phpの使い方

requireの問題

1. PHPのrequire ≠ Nodeのrequire

2. クラス定義の読み込み

3. requireの拡張子が.phpのままになる

まとめ