文系Webエンジニアの技術メモとたまに旅のメモ

未経験文系エンジニアとして働いてます。アウトプットとして簡単に技術メモを残していきます。たまに旅関係のも趣味で残していこうと思ってます。

【CakePHP3/jQuery】jQueryをダウンロードし、CakePHP3で使用できるようにする方法!

今回は、JavaScriptのライブラリであるjQueryをダウンロードしてCakePHP3で使用できるように
設定まで行なっていきます。
シェア率は下がってきていますが、まだまだ導入しているサイトは多いので扱えて損はないかと思います。

1.jQueryのダウンロード

まずは、jQueryのダウンロードをしましょう。
こちらのURLにアクセスします。

https://jquery.com/

「Download jQuery」を選択します。
今回は最新版の「3.5.1」になります。

f:id:igarashi44:20200709010952p:plain

ダウンロードできるjQueryが表示されます。
「Download the compressed, production jQuery 3.5.1」をダウンロードしていきます。
※developmentは、非圧縮ファイルのため、事情がない限りはproductionを選んだ方が処理が重くないので良いです。
基本的にjQueryのファイルを編集する事はないと思います。
ちなみにクリックすると、内容を見ることができます。

productionファイル内容

f:id:igarashi44:20200709011352p:plain

developmentファイル内容

f:id:igarashi44:20200709011442p:plain

ダウンロードするには、右クリックし「リンク先を別名で保存」を選択します。

f:id:igarashi44:20200709011709p:plain

ファイル名は特になければ、デフォルトのままにしておきましょう。
保存先は任意の場所で大丈夫です。
設定したら、「保存」をクリックします。

f:id:igarashi44:20200709011943p:plain

これでダウンロードは完了です。

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>

これで、設定は完了です。


ダウンロードから配置、設定までの手順を書いていきましたが、簡単にできましたね!
配置後の設定ファイルへの記述を忘れないように気をつけましょう!