> WEB関連 > jQueryなどサイト制作によく使うCDNまとめ
jQueryなどサイト制作によく使うCDNまとめ

jQueryなどサイト制作によく使うCDNまとめ

サイト制作時に、サイトの構成ファイルやサーバーへの負荷を軽くするためなど、CDN(Content Delivery Network)として既に公開されているスクリプトを直接リンクで借用することがあります。
他サイトでも利用されていればブラウザキャッシュに保管されていて読み込みが早いですし、自サイトにスクリプトを設置する必要がないため、スクリプトのダウンロード・設置の手間が掛からないというメリットがあります。
また、バージョンの指定が楽なので環境にあわせたスクリプトを最小限の労力で活用できます。

ここではよく使うCDNを紹介します。

jQuery

Google

3.0系

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>

2.0系

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

1.0系

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

ユーザーも多く動作も軽い。jQueryのCDNならこちらを使うのが安定でしょう。

https://developers.google.com/speed/libraries/#jquery

jQuery 公式

3.0系

<script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>

2.0系

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

1.0系

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

公式の展開しているものですが、動作が少々重いのとユーザーの量を考えるとGoogleのCDNを利用したほうがよいかもしれません。

https://code.jquery.com/

Bootstrap

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" >
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

CSSフレームワークとして有名なBootstrapのCDNです。
リセットCSSとしてReboot.cssを併用することが多いのですが、Reboot.cssはCDN化されていません。

https://www.bootstrapcdn.com/

Font Awesome

Bootstrapでも採用されていた各種アイコンフォントを利用するためのサービスです。
現在ではCDNの利用にはメールアドレスが必要になっています。
一度メールアドレスを入力すれば、同じメールアドレスで複数のサイトでCDNを利用することが可能です。

https://fontawesome.com/start

Google Fonts

多種多様なWEBフォントを利用できます。
閲覧者側のデバイスに影響されずにサイトのフォントを指定できるので、便利に利用しているサイトも多く存在します。

https://fonts.google.com/

ajaxzip3

<script src="https://ajaxzip3.github.io/ajaxzip3.js" charset="UTF-8"></script>

フォームに入力された郵便番号から住所を検索する時などに使用します。

https://github.com/ajaxzip3/ajaxzip3.github.io

この記事が気に入ったらシェアしてください

関連記事

【2022年版】GTMでUAからGA4に移行する方法~Google Tag Manager でGoogle Analytics 4を利用する方法

【2022年版】GTMでUAからGA4に移行する方法~Google Tag Manager でGoogle Analytics 4を利用する方法

【2022年版】Google Tag Manager(GTM)の始め方

【2022年版】Google Tag Manager(GTM)の始め方

カラーミーでカテゴリー商品一覧画面・グループ商品一覧画面で表示を変える方法

カラーミーでカテゴリー商品一覧画面・グループ商品一覧画面で表示を変える方法

カラーミーで共通のパーツを複数の画面で呼び出す方法

カラーミーで共通のパーツを複数の画面で呼び出す方法

カラーミーのカテゴリー機能とグループ機能の違い

カラーミーのカテゴリー機能とグループ機能の違い

創作サイトの携帯電話・スマートフォンなどモバイル対応の必要性

Comment Form

コメント投稿はこちらをクリックしてください
  • コメントを入力してください。
登録フォーム
Name
Mailaddress
URL
Message
Postkey
(スパム対策に、投稿キー を半角で入力してください。)