Be an Engineer.

社会人からWEBエンジニアになった人間の備忘録的勉強記録

FuelPHPでCoffeeScriptのコンパイルにcoffeescript-phpを使う

はじめに

突然ですが、FuelPHPCoffeeScript使って実装したいと思ったことありませんか?
生のjavascriptよりも簡潔に書けて、javascript特有のバグも起きにくいということからCoffeeScriptで書きたいというケースは少なからずあると思います。
でもCoffeeScriptで実装する際にめんどくさいポイントが2つあると思っていて、

このポイントを解決できるのがcoffeescript-php(https://github.com/alxlit/coffeescript-php)です。
2012年に書かれたものなのですが、これは

という代物です。そこでcoffeescript-phpを使ってFuelPHPCoffeeScriptの自動コンパイル機能を簡単に実装してみます。

coffeescript-phpのインストール

FuelPHPcoffeescript-phpをインストールするにはComposerを使います。FuelPHPには初期からComposerがあるのでそれを利用します。

{
...
    "require": {
        ...
        "coffeescript/coffeescript": "1.3.1"
    },
...
}

と追加してからcomposer.pharがあるディレクトリで

$ php composer.phar update

とすればVENDERPATH配下にインストールされます。(FuelPHPVENDORPATH等についてはこちらを参照

使い方

coffeescript-phpがインストールができるともう使用することができます。
(Composer経由でインストールしたパッケージは、autoload.phpをrequireすれば使用可能になりますし、それがFuelPHPではCOREPATH/bootstrap.phpで記述されているのでほぼ全てのファイルで使用可能になります。)
ここいらがFuelPHPの楽ちんなところですね!

coffeescript-phpCoffeeScriptファイルからjavascriptファイルを生成するには以下のようにします。

<?php
...

// コンパイルを実行したいCoffeeScriptファイルへのフルパス
$coffeescript_path = "/path/to/coffeescript_file";

// ファイルの中身を取得
$coffeescript = File::read($coffeescript_path, true);
 
$javascript = CoffeeScript\Compiler::compile($coffeescript);
// $javascript にはコンパイル実行結果のjavascriptのコードが文字列で格納されている

あとは出力されたjavascriptのコードをお好きなファイル(例えばpublic/asset/js/配下とか)に書き出すとかできるようになります。
これを上手いこと使えば、CoffeeScriptの自動コンパイルの仕組みを作ることができます!

では!

余談

ちなみに私はCoffeeScriptを独自拡張したAsset::coffee()Coffeescriptのソースを読み込ませると、

  • 自動で更新があったのかどうかを判別し、
  • 更新があった場合はpublic/asset/js/配下にjavascriptファイルを設置して、
  • Asset::js()と同じようにHTMLのソースに貼っつける

という仕組みを作れました。(作った拡張Assetクラス↓↓)

ROOtKEY/asset.php at master · shirakiya/ROOtKEY · GitHub

このようにcoffeescript-phpは結構使い方によっちゃあ便利になると思います!