【CakePHP3/JavaScript】jsファイルを全ページ、ページ毎に読み込ませる方法
CakePHP3系でJavaScriptを読み込むための記述方法を紹介します。
今回は下記2パターンです。
・全ページ対象
・ページ毎対象
1.jsファイルの配置
CakePHP3系では、jsファイルは下記ディレクトリに配置を行います。
/webroot/js
読み込むjsファイルを作成し下記のように配置しましょう。
全ページ対象のjsファイル (common.js)
/webroot/js/common.js
ページ毎対象 (add.js)
対象にしたいページ:/Users/add.tpl
/webroot/js/pages/Users/add.js
2.jsファイルの内容記述
記述内容は、なんでも良いですが、読み込まれたのが分かりやすいように
アラートを表示する記述します。
common.js alert("全ページに表示");
add.js alert("ユーザー新規作成ページのみ表示");
どちらが読み込まれたかわかる内容であれば問題はありません。
3.読み込むjsファイルの設定
全てのページを対象とした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') ?>
これで設定は完了です。
4.jsファイルの読み込み確認
仮にUsersページがあるとしたら下記2画面を確認してみましょう。
・一覧画面
※common.jsの内容が表示
/Users/
・新規作成画面
※common.jsとadd.jsの内容が表示
/Users/add
先ほど、記述した内容がアラート表示されていれば読み込みの確認は完了です!
今回はhtmlヘルパーを使用して行いましたが、他の記述方法や、add.tplに書き込まない方法もあるので
やりやすい方法で試してみてください。
そしてまた、こんな書き方があるよ。と教えてもらえると嬉しいです!