【jQuery】本家の jQuery ファイルに直接リンクする方法
本家の jQuery ファイルにリンクする
以前の記事で、jQuery ファイルを一旦ローカルにダウンロードしてからリンクして使用する方法を説明しましたが、他にも、jQuery ファイルをダウロードすることなく、jQuery 本家サイトが公開している jQuery ファイルに直接リンクさせる便利な方法もあります。
この方法にすると、バージョンが上がるたびにローカルの jQuery ファイルを入れ替える必要がないので、管理が非常に楽になります。
リンクさせる方法
ローカルにダウロードして使用する場合と同じように、ウェブページの文書情報を記述するヘッドタグ <head></head> の中に、以下のような外部スクリプトへのリンクタグを記述します。
<script src="ここに本家jQueryファイルのURL"></script>
この中のリンク部分(src="")に、外部の jQueryファイルのURLを指定しますが、jQuery 本家が現時点で推奨している最新の jQuery へのリンクは以下となります。
<jQuery Core 3.5.1>
※非圧縮版
<script src="http://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
※圧縮版
<script src="http://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
※スリム版
<script src="http://code.jquery.com/jquery-3.5.1.slim.js" integrity="sha256-DrT5NfxfbHvMHux31Lkhxg42LY6of8TaYyK50jnxRnM=" crossorigin="anonymous"></script>
※スリム圧縮版
<script src="http://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha256-4+XzXVhsDmqanXGHaHvgh1gMQKX40OUvDEBTu8JcmNs=" crossorigin="anonymous"></script>
他のバージョン(1~2)については以下の jQuery 本家サイトを確認してください。
~ ヘッドタグへの記述例 ~
基本的な記述は以下のようになります。
<head>
<script src="http://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
</head>
※以前はなかったintegrity属性とcrossorigin属性は、サブリソースの整合性(SRI)のチェックのために必要になるようです。
END