【CakePHP3/JavaScript】jsファイルを全ページ、ページ毎に読み込ませる方法 - 文系Webエンジニアの技術メモとたまに旅のメモ

CakePHP3系でJavaScriptを読み込むための記述方法を紹介します。
今回は下記2パターンです。
・全ページ対象
・ページ毎対象

CakePHP3系では、jsファイルは下記ディレクトリに配置を行います。

/webroot/js

読み込むjsファイルを作成し下記のように配置しましょう。

全ページ対象のjsファイル (common.js)

/webroot/js/common.js

ページ毎対象 (add.js)
対象にしたいページ：/Users/add.tpl

/webroot/js/pages/Users/add.js

記述内容は、なんでも良いですが、読み込まれたのが分かりやすいように
アラートを表示する記述します。

common.js
alert("全ページに表示");

add.js
alert("ユーザー新規作成ページのみ表示");

どちらが読み込まれたかわかる内容であれば問題はありません。

全てのページを対象としたjsファイルはこちらに記述します。

/src/Template/Layout/default.ctp

タグ内にhtmlヘルパーを使ったjsファイルの記述をしましょう。

<head>
    <?= $this->Html->script('/js/common') ?>
</head>

次に、ページ毎にjsファイルの設定を行うには、
hoge.tpl内に指定のjsファイルを読み込む記述をします。
ページの最上部もしくは最下部に下記記述をしましょう。

<!-- jsファイルの読み込み-->
<?= $this->Html->script('pages/Users/add') ?>

これで設定は完了です。

仮にUsersページがあるとしたら下記2画面を確認してみましょう。

・一覧画面
※common.jsの内容が表示

/Users/

・新規作成画面
※common.jsとadd.jsの内容が表示

/Users/add

先ほど、記述した内容がアラート表示されていれば読み込みの確認は完了です！
今回はhtmlヘルパーを使用して行いましたが、他の記述方法や、add.tplに書き込まない方法もあるので
やりやすい方法で試してみてください。

そしてまた、こんな書き方があるよ。と教えてもらえると嬉しいです！