JavaScript,jQuery,CSS,HTMLの達人

JavaScriptとjQueryとCSSとHTMLの使い方やサンプルのブログ

【jQuery】本家の jQuery ファイルに直接リンクする方法

f:id:vw-dsg:20200601063533p:plain

本家の 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 本家サイトを確認してください。

code.jquery.com

~ ヘッドタグへの記述例 ~

基本的な記述は以下のようになります。

<head>
<script src="http://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
</head>

※以前はなかったintegrity属性とcrossorigin属性は、サブリソースの整合性(SRI)のチェックのために必要になるようです。

END