【初心者向け】覚えておきたいjQueryの書き方と注意点

公開日2024/02/20

Web開発において、効率的にわかりやすいコーディングを実現するために、「jQuery」は不可欠なライブラリです。jQueryは初心者にも扱いやすく、HTMLやCSSを操作するための記述を簡略化でき、Web開発をよりスムーズにしてくれます。

2006年にジョン・レシグ氏によって公開されたこのライブラリは、本来「JSelect」と命名される予定でしたが、ドメイン名の問題から「jQuery」と名づけられました。

当記事では、jQueryの基本的な書き方から注意点までを初心者向けに解説します。jQueryの効果的な活用法を身につけ、Web開発のスキルをさらに高めましょう。

この記事でわかること

jQueryの基本的な特徴や導入方法、主要な使い方を初心者向けに解説
WordPressでjQueryを使う際に注意すべき3つのポイントを紹介

jQueryとは？

jQueryは、JavaScriptのライブラリの1つであり、プログラミングの効率を大幅に向上させられるツールです。JavaScriptをそのまま書くと、複雑で長いコードになりがちですが、jQueryを使えば同様の処理を短いコードで実装できます。特に、CSSに慣れている方なら、jQueryの構文をすぐに理解できるでしょう。

【ライブラリとは】
ライブラリは、特定のプログラミング言語で頻繁に使用される機能や処理を事前に記述し、コードのセットとして提供されるものです。特定のタスクを実行するために長文のコードを繰り返し書く必要がなくなります。

ライブラリの主要な特徴は、Webページに必要な機能を簡単に追加できることです。
ライブラリによって、制作者は限られたスペースを最大限に活用しながら、ユーザーに必要な機能を適切なタイミングで提供できます。

jQueryは、Web制作にかかる作業の効率化を図れるほか、JavaScriptの学習も容易となることから、初心者にも使いやすいツールと言えるでしょう。

jQueryでできること

jQueryは、Webページ上で簡単にかつさまざまな操作ができます。特にHTMLやCSSを扱う際、JavaScriptよりも短いコードで多様な処理を実現可能です。

下記は、jQueryでできることの代表的な例です。

HTML要素の操作

表示・非表示の切替え

アニメーションの追加

ユーザー入力の取得

外部ファイルの取得

アコーディオンメニューやスライダーの実装

上記以外に、グラフや図形の描画、SNSへのシェアボタンの実装なども容易です。jQueryを使えば、JavaScriptでできることの大半はより簡単に実現できます。

まずはjQueryを使う前の準備から！

jQueryを使うには、まずjQueryライブラリをWebページに読み込む必要があります。
ライブラリの読み込み方は、CDN（Content Delivery Network）を利用する方法と、Queryのファイルをダウンロードする方法の2つです。

CDNで外部サイトのjQueryを読み込む方法

CDNで外部サイトからjQueryのファイルを直接取り込むと、自分でjQueryのファイルを管理しなくとも常に最新バージョンが利用できます。

jQueryが使える主なCDNは次の3つです。

CDNからjQueryを読み込むには、scriptタグをHTMLファイルのheadタグ内に記述します。

GoogleのCDNを読み込む場合のscriptタグは、次の通りです。

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

jQueryのライブラリをダウンロードして読み込む方法

サーバー上にjQueryファイルをアップロードすれば、インターネット接続が不安定な環境でもjQueryを使用できます。プロジェクトの管理が容易になる反面、外部のCDNを利用する場合と比べて、バージョンアップデートなどの管理が必要になる点に注意が必要です。

jQueryのライブラリをダウンロードして使用する手順は、以下の通りです。

サーバー上の「index.html」ファイルの中に「script.js」ファイルを用意する
公式サイトにアクセスし、jQueryのライブラリをダウンロードする
「script.js」ファイル内に、jQueryのライブラリをアップロードする

ライブラリには、圧縮された「compressed」版と非圧縮の「uncompressed」版があります。中身を改変する予定がないのであれば、ファイルサイズが小さい「compressed」版（例：jquery-3.x.x.min.js）の使用が一般的です。

HTMLのheadタグ内に、次のようなscriptタグを記述して、ダウンロードしたjQueryファイルを読み込みます。

< script src="/js/jquery-3.x.x.min.js">< /script >

ファイルのパスは保存した場所によって異なるため、正確に指定しましょう。

jQueryを書いて覚えよう！

jQueryを学ぶ上で、まず基本的な構文とその仕組みを理解する必要があります。jQueryの基本構文とその意味は、下記の通りです。

$(イベント(){
　$(セレクタ).メソッド(パラメータ);
});

構文	意味
$(イベント(){	jQueryを実行するタイミングを指定する部分です。「$(function(){」と記述すれば、ページの読み込み完了と同時に実行されます。
$(セレクタ)	セレクタは、処理対象の要素を指定します。CSSのセレクタとほぼ同様で、要素のIDやクラス、属性などが指定可能です。
.メソッド(パラメータ)	セレクタに実行するメソッドとパラメータを指定します。要素の表示・非表示や位置・サイズの変更、イベントの処理などが可能です。

複数の処理（メソッド）を同時に実行する場合はメソッドチェーンを利用します。イベントハンドラを記述すれば、メソッドの発動条件となるユーザーの行動や操作（イベント）を詳細に指定可能です。

セレクタ

jQueryのセレクタは、どのHTML要素に処理を適用するかを指定するための部分です。CSSと同じように、IDやクラス、タグ名などを使って要素を選択します。

下記は、使用頻度の高いセレクタの例です。

セレクタ	種類
$("#id"){	IDセレクタ
$(".class")	クラスセレクタ
$("div")	要素セレクタ
$("p img")	子孫セレクタ

例えば「$("p").hide();」と記述すると、pタグを持つすべての要素を非表示にします。

メソッドチェーン

メソッドチェーンは、セレクタの後に記述するメソッドを「.」で連ねることで、複数の操作を連続して呼び出す方法です。例えば下記のコードでは、特定のIDに対して色を青に変更し、その後にクラスを追加します。

$(function(){
　$("#id").css("color", "blue").addClass("additional");
});

通常は、操作一つひとつを別々の行に書く必要がありますが、メソッドチェーンを使えば1行にまとめることが可能です。

イベントハンドラ

イベントハンドラは、ユーザーのアクションが発生したときに実行する関数を指定する方法です。対象となる要素に対して「.on()」メソッドを使用し、第1引数にイベント名、第2引数に実行する関数を指定します。

下記は、idが「aaa」の要素がクリックされた際、idが「bbb」の要素が青くなるように設定するコードの例です。

$("#aaa").on("click", function() {
　//$("#bbb").css("color", "blue")
});

クリック以外にもテキストの入力やマウスの動きなど、さまざまなイベントに対応できます。

WordPressでjQueryを使用する場合の3つの注意点

WordPressでjQueryを使うときに「$ is not a function」というエラーが表示されたり、期待通りに動作しなかったりすることがあります。これは、WordPressがjQueryを扱う際の特有の環境や設定によるものです。

ここでは、WordPressでjQueryをスムーズに使うための重要なポイントを3つ紹介します。

ポイント！

$を使わない
jqueryのスクリプトを読み込む位置
ライブラリの読み込ませ方

【注意点1】$を使わない

WordPressでjQueryを記述する際は、「$」（ドルマーク）の代わりに「jQuery」と記述する必要があります。WordPressが内包するjQueryライブラリが、noConflictモードで動作しているためです。noConflictモードは、jQueryと他のJavaScriptライブラリとの衝突を防ぐために設計されています。

下記は、WordPressでの記述例です。

jQuery(function(){
　jQuery("#id").css("color", "blue");
});

コードが正しいにもかかわらず正常に動作しない場合は、「$」を使っていないか確認しましょう。

【注意点2】jqueryのスクリプトを読み込む位置

jQueryコードの読み込みは、jQueryライブラリを読み込んだ後でなければなりません。WordPressで推奨されているのは、wp_enqueue_script関数による読み込みの管理です。

関数は、WordPress管理画面の「外観」→「テーマファイルエディター」にある、functions.phpファイル内へ記述します。

下記は、wp_enqueue_script関数の例です。

function my_theme_scripts() {
　　wp_enqueue_script('jquery');
}
add_action('wp_enqueue_scripts', 'my_theme_scripts');

【注意点3】ライブラリの読み込ませ方

WordPressにはデフォルトでjQueryが内包されているため、追加でjQueryを読み込む必要はありません。別のjQueryライブラリを読み込んでしまうと、2種類のjQueryが競合してスクリプトが正常に動作しない可能性があります。

jQueryを使用する場合、まずhtmlソースを開き「< script type="text/javascript" 」から始まるコードがないか確認しましょう。

jQueryの書き方をもっと知りたいならITスクールがおすすめ

jQueryの活用方法をもっと詳しく知りたい、あるいは難易度が高く、独学では難しいといった場合は、jQueryを学べるコースがあるITスクールに通うのがおすすめです。

初心者向け！jQueryのプロから学べるITスクールを見る

ITスクールでは、jQueryの基本から応用まで、体系的かつ実践的に学習できます。HTMLやCSS、Javaなどの他のプログラミング言語と合わせて学べるコースであれば、Web開発全般の知識とスキルを総合的に高めることが可能です。

ITスクールには、通学タイプとオンラインタイプの2つがあり、それぞれ異なる特長をもっています。

通学タイプの場合、直接講師や他の受講生と交流できる点が大きなメリットです。疑問点を即座に解消したり、他の受講生との情報交換を通じて新たな知識を得たりできます。

一方、オンラインタイプの場合は自宅や好きな場所で学習できるため、時間や場所に縛られず、自分のペースで学ぶことが可能です。自分の性格や学習スタイルに合わせて、通学型かオンライン型かを選択するとよいでしょう。

また、多くのITスクールでは、実際のプロジェクトに近い形式での学習が行われるため、実務に即したスキルが身に付きます。プログラミングの基礎知識だけでなく、チームでの開発プロセスや問題解決の方法など、実際の仕事で必要となるスキルを同時に習得できるのも大きな利点です。

初心者向け！ jQueryの書き方　まとめ

jQueryは、CSSに似たセレクタを使ってJavaScriptのコードを短く簡単に記述し、HTML要素を操作できるライブラリです。イベントハンドラを使えば、ユーザーのアクションに反応する動的なページも容易に作れます。

WordPressでjQueryを使用する際は、$を使用しないことやスクリプトの読み込み位置、ライブラリの重複などに注意しなければなりません。jQueryのさらなる習得には、ITスクールでの学習が効果的です。HTMLやCSS、Javaと合わせて学べば、Web開発で求められるスキルを広範囲に渡り高められるでしょう。

これからWeb開発に必要なスキルを学びたい、jQueryの書き方についてもっと詳しく知りたいとお考えの方はITスクールを検討してみてはいかがでしょうか？

独学が向いていないかも？と思ったら人気のスクールをチェック

さらに、マナビタイムでは、気になるスクールを比較検討しやすくするために、検討中リストに入れたコースに対して一括で問い合わせできる「まとめて問い合わせ機能」を提供しています。

対象講座を受講したいと考えている方は、複数のスクールを比較しながら効率よく情報収集するためにも、まとめて問い合わせを活用するのがおすすめです。

どのスクールが良いか迷っている方は、以下の記事で詳しく比較していますので、ぜひ参考にしてください。