【CakePHP3/jQuery】jQueryをダウンロードし、CakePHP3で使用できるようにする方法！
今回は、JavaScriptのライブラリであるjQueryをダウンロードしてCakePHP3で使用できるように
設定まで行なっていきます。
シェア率は下がってきていますが、まだまだ導入しているサイトは多いので扱えて損はないかと思います。
1.jQueryのダウンロード
まずは、jQueryのダウンロードをしましょう。
こちらのURLにアクセスします。
「Download jQuery」を選択します。
今回は最新版の「3.5.1」になります。
ダウンロードできるjQueryが表示されます。
「Download the compressed, production jQuery 3.5.1」をダウンロードしていきます。
※developmentは、非圧縮ファイルのため、事情がない限りはproductionを選んだ方が処理が重くないので良いです。
基本的にjQueryのファイルを編集する事はないと思います。
ちなみにクリックすると、内容を見ることができます。
productionファイル内容
developmentファイル内容
ダウンロードするには、右クリックし「リンク先を別名で保存」を選択します。
ファイル名は特になければ、デフォルトのままにしておきましょう。
保存先は任意の場所で大丈夫です。
設定したら、「保存」をクリックします。
これでダウンロードは完了です。
2.CakePHP3のディレクトリにダウンロードしたjQueryのファイルを配置
ダウンロードしたjQueryのファイルをCakePHP3のディレクトリに配置しましょう。
※webroot以下のディレクトリは自身で作成が必要です。
/webroot/plugins/jquery/jquery-3.5.1.min.js
これで配置は完了です。
jsファイルの配置は、基本的に下記に配置しますが、自身で作成したjsファイルと、
外部からダウンロードしたjsファイルは分けた方が良いかなと思います。
こちらは好みで配置して見てください。
自作したjsファイルの配置
/webroot/js/{作成したjsファイル}
外部からダウンロードしたjsファイルの配置
/webroot/plugins/{ディレクトリ名}/{ダウンロードjsファイル}
3.配置したjsを読み込む設定
配置しただけでは、jsファイルは読み込まれないので、設定を行います。
全てのページを対象としたjsファイルはこちらに記述します。
/src/Template/Layout/default.ctp
タグ内にhtmlヘルパーを使ったjsファイルの記述をしましょう。
<head> <?= $this->Html->script('/plugins/jquery/jquery-3.5.1.min') ?> </head>
これで、設定は完了です。
ダウンロードから配置、設定までの手順を書いていきましたが、簡単にできましたね！
配置後の設定ファイルへの記述を忘れないように気をつけましょう！