Design
Coding
Setting
jQueryとは
05:04jQueryとは
- jQueryについて
- jQueryファイルの読み込み方法
jQueryについて
 | jQueryは、Webページに動的な動きやインタラクションを簡単に追加できる、人気のあるJavaScriptライブラリです。JavaScriptの機能を簡単に使えるようにまとめたツールで、コードを短く、シンプルに書けるように設計されています。 |
ライブラリとは
「ライブラリ」とは、プログラムで使える便利な部品がまとめられたファイルのことで、さまざまな機能を簡単に実現できる部品が提供されます。jQueryの場合、JavaScriptを使った動きやインタラクションを簡単に実現するための部品が集められています。
JavaScriptとは
JavaScriptは、Webページに動きやインタラクション(ユーザーの操作に反応する仕組み)を加えるためのプログラミング言語です。
ページの内容を動的に変更したり、ユーザーと直接やりとりをすることができるため、現代のWebサイトには欠かせない要素となっています。
JavaScriptの用途
- 動的なページの変更
ユーザーのアクション（ボタンのクリック、ページのスクロールなど）に応じて、ページの内容やデザインを変更することができます。 - アニメーション
ページ内の要素を動かしたり、フェードイン・フェードアウトの効果を加えることができます。
JavaScriptとの違い
JavaScriptとjQueryはどちらもWebページに動きやインタラクション(ユーザーの操作に反応する仕組み)を加えるために使われますが、目的や使い方に違いがあります。
| 項目 | JavaScript | jQuery |
| タイプ | プログラミング言語 | JavaScriptのライブラリ |
| 機能の簡潔さ | 機能は豊富だが、書くコードが長くなりがち | よく使う機能が簡潔に書けるので、コードが短くなる |
| ブラウザごとの差異 | 自分で対応を考える必要がある | ブラウザごとの差異を気にせず使える |
| 学習曲線 | JavaScriptの基本を理解する必要があり、少し難易度が高い | 初心者でも簡単に使い始められる |
| パフォーマンス | 直接的なコード実行で、パフォーマンスが高いことが多い | jQueryの分だけ少しパフォーマンスが低下することがある（ただし、差はほとんど気にならない） |
| 汎用性 | Webサイトだけでなく、アプリケーションにも使える、非常に汎用性が高い | 主にWebサイトで使われ、動的な要素の操作に特化している |
例：同じ処理をJavaScriptとjQueryで書く
例のコードは、HTML要素をクリックしたときに、要素を非表示にする処理を記述しています。
JavaScriptでの例
document.getElementById("myButton").addEventListener("click", function() {
document.getElementById("myElement").style.display = "none";
});
jQueryでの例
$("#myButton").click(function() {
$("#myElement").hide();
});※同じ処理をJavaScriptとjQueryで書くと、jQueryの方が非常にシンプルに書けることがわかります。
jQueryを学習する理由
jQueryを学習する理由は、主にコードが簡単に書けること、ブラウザごとの差異を気にせず使えること、そして学びやすい点にあります。
jQueryを使うと、複雑な操作も少ないコードで実現できるため、効率的にWebページを作ることができます。また、さまざまなWebブラウザでも安定して動作するので、特別な設定なしで広く対応できます。
さらに、jQueryはJavaScriptの基礎を知らなくても簡単に使えるため、初心者でも短期間で学び始めることができ、プロジェクトを素早く進めるために非常に便利です。
jQueryファイルの読み込み方法
jQueryを利用するには、jQueryのファイルをWebページに読み込ませる必要があります。
この方法には主に2つの方法がありますので、それぞれについて説明します。
1.ファイルをダウンロードしてサーバーに直接アップする方法
-
公式ホームページよりファイルをダウンロードする
公式ホームページからjQueryライブラリの「jquery-3.7.1.min.js」ファイルをダウンロードします。
jQuery公式ダウンロードページ：https://jquery.com/download/ ※2025年1月28日時点の最新バージョンです。
-
「jquery-3.7.1.min.js」を保存する
ダウンロードボタンをクリックし、表示されたページを開きます。
そして、[右クリック]→[名前を付けてリンク先を保存]を選択して、ローカルPCの任意の場所に保存します。 -
プロジェクトフォルダに追加し、「jquery-3.7.1.min.js」へのパスを指定
Visual Studio Codeで任意のプロジェクトフォルダを開き、「jquery-3.7.1.min.js」をプロジェクトフォルダ内の適切な場所にコピーします。コピーしたファイルを適切なフォルダに配置し、HTMLのタグ内にパスを指定します。<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>classの例</title> <link rel="stylesheet" href="styles.css"> <!-- jQueryの指定 --> <script src="js/jquery-3.7.1.min.js"></script> </head>
「min.js」の扱い方
JavaScriptファイルには「通常の.jsファイル」と「.min.jsファイル」の2種類があります。
.min.jsファイルは.jsファイルを圧縮したもので機能は同じですが、コメントや空白が削除されているため、ファイルサイズが小さくなり読み込みが速くなります。
これにより、サーバーへの負担も軽減されるため、基本的には.min.jsファイルを使用するのが推奨されます。
2.jQueryの配布元に公開されたファイルを使うCDN
-
公式ホームページより公開されているCDNをコピーする
公式ホームページからCDN経由で利用できるURLが公開されているのでコピーします。
jQuery公式のCDNページ：https://releases.jquery.com/ ※2025年1月28日時点の最新バージョンです。
-
CDNのパスを指定
コピーしたCDNをHTMLのタグ内にパスを指定します。<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>classの例</title> <link rel="stylesheet" href="styles.css"> <!-- CDNによるjQueryの指定 --> <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script> </head>
以上が「jQueryとは」の説明でした。
jQueryを使うことで、静的なページを簡単に動的にできるので、ぜひ理解していきましょう。
次のステップで、「jQueryの書き方」について説明していきます。
jQuery
全 4 動画
