jQueryのCDNってどこに書くの？
読み込みエラーになった
そもそもCDNって？
jQueryはCDNで読み込むと、とても簡単で便利に使えるようになります。
本記事では、jQueryのCDNの取得から読み込み方法、エラーが出たときの対処法まで丁寧に解説しています。
jQueryとCDNの基本知識
まずは前提知識として、以下の3つを説明します。
- jQueryとは？
- ライブラリとは？
- CDNとは？
これらに少し不安がある人はチェックしてみてください。
jQueryとは？
jQueryは、JavaScriptをより手軽に書けるようにするためのライブラリです。
JavaScriptだと20行以上のコードを書くことが、jQueryでは数行で済んでしまうほど簡単にプログラムが書け、実装スピードや保守性が高まります。
jQueryを読み込むだけで使えるため、複雑なコード不要でスムーズなコーディングが可能です。
Webサイトやアプリ開発で広く使用されており、jQueryを採用している企業の数も多く、WordPressでも導入されています。
ライブラリとは？
ライブラリは、よく使われるコードや機能がまとまった便利な道具箱のようなものです。難易度が高いコードをゼロから書かずに済み、より簡単に構築できるようになります。
たとえば、jQueryのライブラリなら、ボタンをクリックしたときの動作や、アニメーションの追加などの複雑なコードが容易に使えます。
さらに、ライブラリを活用することで、作業時間の大幅な節約も可能です。
CDNとは？
CDN（Content Delivery Network）は、外部ファイルをダウンロードしなくても、リンクだけで簡単に利用できる仕組みのようなものです。
ファイルを一つ一つダウンロードする必要がなく、CDNを読み込むだけで手軽に使えます。
jQueryのCDNを読み込む方法
jQueryのCDNの読み込み方法は、たった2ステップで簡単です。
- jQueryのCDNを取得する
- jQueryCDNを読み込む
それぞれ順番に見ていきましょう。
jQueryのCDNを取得する
まずはjQueryの公式サイトにアクセスし、「Download」をクリックしましょう。
クリックしたら「Other CDNs」のセクションまでスクロールして、以下のいずれかを選択します。
- Google CDN
- Microsoft CDN
- CDNJS CDN
- jsDelivr CDN
どれを選んでも問題ありませんが、ここではGoogleのCDNを選択して説明していきます。
CDNを選択したら、jQueryのスニペットをコピーしてください。これでCDNの取得完了です。
jQueryのCDNを読み込む
CDNを取得したら、エディタに読み込みましょう。
読み込む位置は、HTMLの</body>の直前かつjsファイルの手前です。
|
<!– jQueryのCDNを読み込む –>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js”></script>
<!– jsファイル –>
<script src=”./js/script.js”></script>
</body>
</html>
|
HTMLは上から順番に読み込まれるため、先にjQueryのCDNを読み込んでからjsファイルを読み込みます。
読み込む順番が逆になると、jQueryが正しく読み込まれずにエラーが出てしまいます。
この読み込む順番は重要なポイントとなるため、しっかりと覚えておきましょう。
jQueryのCDNを読み込んでエラーになるときの対処法
エラーが出る場合は、以下を確認してみてください。
- 最新のCDNを読み込んでいるか
- 閉じタグを忘れていないか
- jQueryの読み込み順は合っているか
- インターネット接続はされているか
- ブラウザのキャッシュをクリアしたか
これらを試してみて問題が解決しない場合は、デベロッパーツールでエラーを確認しましょう。
jQueryが正しく読み込まれていないときは「jQuery is not defined」というエラーが表示されます。このエラーが出たときは、スペルミスがないかコードを見直してください。
それでも問題が解決しない場合は他のCDNが使えないか、もしくはコードの他の部分にエラーが出ていないかチェックしてみましょう。
jQueryでCDNを利用するときの注意点
CDNを取得するときは、必ずjQueryの公式サイトからCDNを入手するようにしましょう。
2024年5月にトロイの木馬化されたjQueryが確認され、一ヶ月にわたって数十のパッケージで汚染されたバージョンが公開されていたという事例があります。
GitHubや他のプラットフォーム、jsDelivrのCDNホストなどからトロイの木馬化されたjQueryのインスタンスが発見されました。
このことからCDNの利用時は、信頼性の高い公式サイトを活用するようにしましょう。
信用できる情報元からCDNを入手することは、クライアントやお客様を守ることにも繋がるとても重要なことです。
トロイの木馬とは？
正当なファイルやソフトウェアに偽装し、ユーザーのコンピューターに悪意あるコードを仕込んでシステムに侵入したり、データを盗んだりするマルウェアの一種。
まとめ：jQueryのCDNで効率よくコーディングしよう
jQueryのCDNを利用すると、手軽に導入できて構築スピードが向上します。
とはいえ、安全性のために公式サイトからCDNを取得することが重要です。
2024年にトロイの木馬化されたjQueryが発見された事例もあるため、信用できる情報元を利用しましょう。
実際にjQueryを使ったデザインカンプや課題に挑戦したい人は、デイトラWeb制作コースがおすすめです。
未経験からコーディングを学ぶならデイトラWeb制作コースがおすすめ！
デイトラWeb制作コースは、実務レベルの本格スキルを学び、Web制作を仕事にしたい方におすすめのコースです。
HTML/CSSやjavaScriptの言語の基本はもちろん、デザインカンプからのコーディング、WordPressのオリジナルテーマ作成までカリキュラムに含まれています。
さらに、中級・上級の最終課題はメンターによる課題レビューがあります。現場目線の品質チェックが受けられるため、大幅なスキルアップが期待できるでしょう。
Web制作のスキルを身につけたい方は、ぜひデイトラWeb制作コースをチェックしてみてください！