【初心者向け】jQuery入門ガイド：JavaScriptとの比較から使い方まで
Web開発を学び始めると、JavaScriptやjQueryといった言葉をよく耳にすることでしょう。
今回はjQueryが何であるか、またJavaScriptとどのように異なるのかについてご紹介します。
目次
jQueryとは？
jQueryは、JavaScriptを使いやすくするために作られたライブラリです。ライブラリとは、よく使われる機能をあらかじめまとめておき、必要に応じてそれらを簡単に使えるようにしたものです。つまり、jQueryを使うことで、複雑なJavaScriptのコードをより簡単に書くことができるようになります。
JavaScriptとの違い
JavaScriptはWebページに動きをつけるためのプログラミング言語です。ページ上でのユーザーの行動に反応したり、ページの一部を動的に更新するなど、Webサイトをよりインタラクティブにするために使われます。
jQueryはそのJavaScriptをより使いやすくするためのツールです。
例えば、JavaScriptだけでページの特定の要素を選択し、スタイルを変更するにはいくつかの手順とコードが必要ですが、jQueryを使えば数行のコードで同じことが実現できます。つまり、jQueryはJavaScriptの「ショートカット」のようなものであり、開発者がより簡単にWebページを動的に制御できるようにするものです。
jQueryを使うには？
jQueryを使うためには、まずjQueryライブラリをWebページに追加する必要があります。CDNを通じて、またはファイルをダウンロードしてローカルにホスティングする方法です。これらの手順を簡単に説明します。
CDNを使う方法
CDN（Content Delivery Network）を使うと、インターネット上にあるjQueryファイルに直接リンクできます。オンラインであれば、自分のホームページで使うことができます。
- jQueryCDN配布サイトにアクセスする
jQueryCDN配布サイトにアクセスしてください。
jQuery 3.x などの数字は大きいほうが新しいので、今回は記事制作時最新のjQuery 3.7.1にします。横に書いてある英語はサイズに関連しています。- uncompressed：通常版
- minified：圧縮版
- slim：ajax、effectsなど、一部機能を削除したバージョン
- slim minified：slimの圧縮版
理由がなければminifiedがおすすめです。minifiedをクリックすると、下記のようにコードが表示されるのでコピーしてください。
- headタグ内に貼り付ける
先ほどコピーしたリンクを、編集しているウェブサイトの<head>タグ内に追加します。
自分が編集するjsファイルの読み込みが必ず後になるように記述してください。
これでCDNを使った読み込みが完了します。
ダウンロードして使う方法
もしもインターネット接続がない場合や、自分のサーバー上で直接jQueryを管理したい場合は、jQueryをダウンロードして使う方法があります。
- jQueryをダウンロードする
こちらにアクセスし、「Download jQuery」をクリックして、最新版のjQueryをダウンロードします。 - プロジェクトにファイルを追加する
ダウンロードしたjsファイルを、あなたのWebサイトのサーバーのフォルダ内に置きます。
WordPressならば、WordPressのテーマフォルダ（通常はwp-content/themes/your-theme-name）に置きます（your-theme-nameは、現在アクティブになっているWordPressテーマのフォルダ名）。
こちらも自分が編集するjsファイルの読み込みが必ず後になるように記述してください。 - HTMLファイルに追加する
そのファイルへのリンクを、あなたのHTMLファイルの<head>セクションに追加します。例えば、jquery-3.6.0.min.jsをダウンロードした場合、以下のようになります。
この方法では、あなたのWebページはインターネット接続に依存せずにjQueryを使用できます。
これでオフイランでもjQueryを使用することができます。
具体的な使用例
HTML要素の選択と操作について
jQueryを使うとHTML要素を簡単に選択し、そのコンテンツを操作することができます。例として以下のコードは、id=”example”を持つHTML要素のテキスト内容を「Hello, World!」に変更します。
$("#example").text("Hello, World!");先ほどJavaScriptとの違いとして例に出したコードと同じです。
イベントハンドリング
ユーザーのアクション（クリック、ホバー、スクロール等）に応じて、特定の関数を実行することができます。以下のコードは、button要素がクリックされた際にアラートを表示します。
$('button').click(function() {
alert('ボタンがクリックされました!');
});アニメーションとエフェクト
jQueryを使用して、ページ上の要素に対して様々なアニメーション効果を簡単に適用することができます。例えば、slideUp()やslideDown()メソッドを使用して、要素の表示と非表示をアニメーションで切り替えることができます。
$('#example').slideUp();まとめ
jQueryはJavaScriptの作業を簡略化し、Web開発の効率を上げるために開発されました。初心者にとっては、複雑なJavaScriptのコードを学ぶ前のステップとして、または小規模なプロジェクトで迅速に開発を進めるためのツールとして、大変有用です。
しかし、Web開発の世界は日々進化しており、近年ではJavaScript自体の機能拡張や他のフレームワークが同様の機能を提供していることもあり、jQueryの重要性は徐々に変わりつつあります。それでもなお、jQueryはその簡便さから多くの既存プロジェクトで使われており、基礎を学ぶ価値は十分にあります。
r.s
グローワークスのコーダー兼プログラマー。最適なコードでサイトを動かすことに情熱を注いでいます。技術的課題を解決するのが得意です。
