jQueryはどこに置くべき？

jQueryはどこに置くべき？

jQueryを使うためには、まずjQueryのライブラリファイルをあなたのウェブサイトに設置する必要があります。このファイルはどこに置くのが適切なのでしょうか？

ダウンロードと設置場所

jQueryのライブラリファイルは、jQueryの公式サイトからダウンロードできます。ダウンロードしたファイルは、基本的にはあなたのHTMLファイルと同じフォルダ、もしくはそこから辿れるフォルダに置きます。

最適な場所はプロジェクトの規模や構成によって異なりますが、一般的には以下の2つの方法が考えられます。

1. プロジェクトルートディレクトリ内の専用フォルダ

小規模なプロジェクトであれば、HTMLファイルと同じ階層に「js」や「lib」などのフォルダを作成し、そこにjQueryのライブラリファイルを置く方法がシンプルです。

project/
├── index.html
└── js/
    └── jquery.min.js

2. 静的ファイルを管理するフォルダ

大規模なプロジェクトや、フレームワークを利用している場合は、「static」や「assets」といった名前で静的ファイルを管理するフォルダが用意されていることがあります。その場合は、以下のようにjQueryのライブラリファイルを配置します。

project/
├── static/
│   └── js/
│       └── jquery.min.js
└── index.html

HTMLファイルへの読み込み

jQueryのライブラリファイルを配置したら、HTMLファイルから読み込む必要があります。読み込みは<script>タグを使用し、src属性にjQueryのライブラリファイルへのパスを指定します。

<script src="js/jquery.min.js"></script>

jQueryファイルの設置場所が異なる場合は、src属性のパスを適切に修正してください。

読み込み位置のベストプラクティス

jQueryのライブラリファイルは、使用する前に読み込む必要があります。そのため、一般的には<head>タグ内、もしくは<body>タグの閉じタグ直前に配置します。

1. <head>タグ内

<!DOCTYPE html>
<html>
<head>
  <title>My Website</title>
  <script src="js/jquery.min.js"></script>
</head>
<body>
  </body>
</html>

2. <body>タグの閉じタグ直前

<!DOCTYPE html>
<html>
<head>
  <title>My Website</title>
</head>
<body>
  <script src="js/jquery.min.js"></script>
</body>
</html>

どちらの方法でも問題なく動作しますが、<body>タグの閉じタグ直前に配置することで、ページの表示速度がわずかに向上する可能性があります。

CDNの利用

jQueryのライブラリファイルは、CDN (Content Delivery Network) を利用して読み込むこともできます。CDNを利用するメリットは、

  • 高速な読み込み: CDNは世界中にサーバーを配置しており、ユーザーに近いサーバーからファイルが配信されるため、高速に読み込むことができます。

  • サーバー負荷の軽減: CDNを利用することで、自サーバーの負荷を軽減することができます。

  • キャッシュの利用: CDNで配信されるファイルは、多くのユーザーで共有されているため、ブラウザのキャッシュに保存されている可能性が高く、2回目以降のアクセスではさらに高速に読み込むことができます。

CDNを利用する場合は、<script>タグのsrc属性にCDNのURLを指定します。

例: Google Hosted Libraries

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

まとめ

jQueryのライブラリファイルの設置場所とHTMLファイルへの読み込み方法について解説しました。適切な場所にjQueryのライブラリファイルを配置し、HTMLファイルから正しく読み込むことで、jQueryを使ったWebサイト制作をスムーズに行うことができます。

その他の参考記事:

jquery ドラッグ

jquery dropdownplain