Controllerから簡単にJSに変数を渡したい in CakePHP3 #JavaScript

CakePHP3 Advent Calendar 2016の11日目兼
Fusic Advent Calendar 2016の11日目の記事です。

こんにちは、クリスマス三連休の孤独に耐えるために一気見するアニメの選定に最近忙しいtutidaです。
福岡のFusicにてLAMPでCakePHPでウェブアプリ開発もしくは、AWSをいじいじしております。
会社のAdvent Calendarがだいぶカオスなことになってきてますが、気にしない

というところで、CakePHP3で業務を行う際に発生した小さな悩みを解決するためのPluginを作成したので紹介します。

Pack
- github(https://github.com/tutida/Pack)
- packagist(https://packagist.org/packages/tutida/pack)

Controller's variables to Js

CakePHP3のControllerで作った変数をJS側で使いたい。

layoutのscriptタグに書き込む
data属性にぶち込む

数が多くなってくるとしんどいし、ctpも読みにくくなってくる。つらみがある。

Railsに便利そうなの発見

Gon - get your Rails variables in your js

Gon.Readme.mdより

Write variables by

gon.variable_name = variable_value

# or new syntax
gon.push({
  :user_id => 1,
  :user_role => "admin"
})

gon.push(any_object) # any_object with respond_to? :each_pair

In your js you get this by
```
gon.variable_name
```

なるほど、便利そう。

Plugin つくってみた（簡易版

Pack - You can easy to pass CakePHP3 variables to JS in View.

内部的にはStaticなClassに対して、ComponentとHelperから値を入れたり取得したりするだけ。
~~じゃあ、直接 StaticなClass叩けばいいじゃんとかいは言わないで~~
通常のControllerのsetと同じ感覚で変数をjsに渡せます。

使い方

読み込んで

<?php
    class AppController extends Controller
    {

        public function initialize()
        {
            $this->loadComponent('Pack.Pack');
        }
        ...
    }

layoutにこれかいて

    <?= $this->Pack->render();?>

コントローラーで値をセット


    $url    = 'https://qiita.com';
    $entity = $this->Hoge->get($id);
    $array  = ['hoge', 'fuga'];

    $this->Pack->set('url', $url);
    $this->Pack->set('entity', $entity);
    $this->Pack->set('array', $array);

    ## OR ##
    $this->Pack->set(compact('url', 'entity', 'array'));

JS側で参照可能に

    Pack.url;    // > https://qiita.com
    Pack.entity; // > Object {id: ..., name: ..., ....}
    Pack.array;  // > Array[2] {0: 'hoge', 1: 'fuga'}

他の機能はREADMEにちょこちょこ書いています。

順次アップデート

予定...(汗

その他

Altair - Auto converting special characters of variables to HTML entities
- HTMLエスケープ用のPlugin、もし困っているのであればご参照ください