jQuery入門!環境構築から基本的な使い方まで解説

jQueryは、JavaScriptのコードをよりシンプルに書くために開発されたライブラリです。

Webサイトをはじめ、Web製作において大きな力を発揮するjQueryは、世界中の開発者に利用されています。

実際にjQueryを使って開発をするためには、プログラミング一般の知識に加えて、HTMLやCSSの知識も必要です。

ですが、jQueryの文法は非常にシンプルなので、プログラミング初心者でもとっつきやすいと言えます。

この記事では、jQuery入門として、jQueryの環境構築から、基本的なコードの書き方について解説します。

jQueryとは

多くのJavaScript開発者が利用しているjQuery。

まずは、jQueryが何かについて解説します。

jQueryはJavaScriptのライブラリ

jQueryは、JavaScriptのコーディングを簡便にするために開発されたJavaScriptライブラリです。

エフェクトやモーションなど、Webサイトの作成で特に役立つため、HTMLやCSSなどのマークアップ言語と併用されることが一般的です。

jQueryの開発理念は
「少ない記述で沢山のことを(write less, do more)」
で、その理念のとおり、少ないコードでさまざまな動作を実現することができます。

そのため、JavaScriptと比べ習得にかかるコストが少ないという特徴があります。

2006年に初版がリリースされたjQueryは、現在もアップデートを続けてられています。

jQueryの特徴

jQueryの大きな特徴は、汎用性の高さと容量の小ささです。

まず、jQueryはブラウザに依存しないため、ほとんどのブラウザに対応しています。

また、HTMLだけではなく、最新のCSSにも対応しているため、CSS3の機能をjQueryで活用することができます。

そして、書くべきコードが少ない上に、コードそのものも軽いため、さまざまなモジュールに組み込むことができるという特徴もあります。

こうした特徴から、jQueryはWeb開発を中心に幅広い分野で採用されています。

jQueryの環境構築のやり方

jQueryを利用するためには、環境構築をする必要があります。

とはいえ、その手順はとてもシンプルです。

ここではjQueryの環境構築について、ダウンロードする方法としない方法、そしてWordPressでjQueryを使う場合のやり方を解説します。

ライブラリをダウンロード

jQuery公式サイトで配布されているライブラリをダウンロードすることで、オフラインでも利用することができます。

また、パッケージマネージャーからインストールすることも可能です。

なお、jQueryのバージョンと環境の組み合わせによっては、正常に動作しない場合があるため、ライブラリのバージョンには注意です。

(jQuery公式ダウンロードページ:https://jquery.com/download/)

公式サイトからjQuery一式をダウンロードし（拡張子が「.js」になっているもの）、自分の開発する環境のライブラリを置いている場所に保管します。

この時、わかりやすい様に名前を変えても大丈夫ですが、後述するタグの内容も併せて変更して下さい。

保存したら、headタグ内で、次のように記載します。

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

パスは、相対パスでも絶対パスでも良いですが、名前がダウンロードしたファイル名と同じであることを確認しましょう。
（上記の例は、作ったHTMLファイルと同じフォルダにjQueryのファイルを置いたばあいのもの）

ダウンロードしない始め方

ライブラリをダウンロードせず、CDNを使ってjQueryを利用する方法もあります。

スクリプトタグ(script src)でjQueryの配布URLを指定して、HTMLのヘッダーにコードを記載することで、jQueryを導入できます。

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

ダウンロードと違い、こちらは古いものだと配信終了の可能性があります。

その場合、ファイルそのものがこのサイトから消える可能性がありますので、注意しておきましょう。

WordPressでjQueryを使う場合

現行バージョンのWordPressにはデフォルトでjQueryが備わっているため、そのまま利用することができます。

ですが、使いたいjQueryプラグインが、WordPressにあるjQueryのバージョンに対応していないこともあります。

その場合は、プラグインのソースコードをWordPressのテーマファイルに組み込むことで、プラグインの使用が可能です。

この方法は、デフォルトで備わっているjQueryのコードを書き換えることになるため、こうした操作に慣れていない場合は、実行に十分注意してください。

jQueryの使い方

入手したjQueryライブラリを実際に動作させるためには、いくつかの手順をふむ必要があります。

ここでは、jQueryの使い方として、実際にコードを書けるようになるまでを解説します。

JavaScriptファイルを用意

jQueryライブラリをダウンロードして利用する場合、JavaScriptファイルを用意して、サーバにアップロードする必要があります。

CDNを使ってjQueryを導入する方法では、この手順は必要ありません。

まずJavaScriptファイルを作成して、分かりやすいフォルダを用意してアップロードします。

また、jQueryライブラリもサーバにアップロードされている必要があります。

そして、スクリプトタグでjQueryライブラリのパスを指定します。

スクリプトタグの記述場所については、次の項で解説します。

HTMLのheadにタグを記載

ファイルの用意とアップロードができたら、HTMLのコードにスクリプトタグを組み込みます。

CDNを使う場合は、このステップのみでjQueryを利用できます。

スクリプトタグは、HTMLのヘッダーのどこかに記載しておきます(head内であればどこでも大丈夫です)。

Web製作においてスクリプトタグは、メタタグやリンクタグの下、ヘッダーの最後にまとめることが一般的です。

jQueryの基本的な文法

jQueryの環境構築と導入が終わったら、いよいよjQueryを活用して製作をしていきます。

ここでは、その第一歩として、コードの書き方と基本的な文法を紹介します。

ここで紹介するものはjQueryのごく一部のため、さらに知りたい方は
「jQuery メソッド」
などのワードで検索すると、jQueryの書き方を網羅的に解説しているサイトを見つけることができます。

jQueryのコードの書き方

jQueryは、HTMLの要素を指定して、動作を指示します。

指示の順番は「①条件」「②要素」「③動作」となっており、「いつ・なにを・どう」動かすのかを書くことで、さまざまな動作を実行します。

jQueryのコードの基本形は以下の通りです。

$(“セレクタ”).メソッド(パラメータ[引数]);

HTMLの要素がセレクタにあたり、それを
$(“”)
で囲うことでオブジェクトを生成します。

そして【.】でメソッドを指定し、【()】で詳細を指示します。

コードの最後には【;】を付けて、ここで終わりというのを示します。

先ほどの説明と合わせると、オブジェクトが「なにを」に、メソッドが「どう」に当たります。

「いつ」にあたる条件設定は、使用するjQuery API(イベント)の設定に従います。

なおjQueryのコードは、そのほかのコードが読み込まれた後に実行したいので、function()内か、scriptタグに記載することが一般的です。

セレクタ

セレクタは、HTMLの要素やCSS属性など、操作したい対象のことを指します。

jQueryでは、このセレクタを用いて、システムのさまざまな要素を操作していきます。

「セレクタを指定してオブジェクトを生成する」というのが、jQueryの基本です。

よく使うのは、
【$(“.class”)】
で、「class」という名前のクラスを指定する方法や
【$(“#id”)】
で、「id」という名前のidのタグを指定する方法です。

classやidと書いている部分は、実際に指定したいものを書きます。

オブジェクト

「オブジェクト」というのは、ざっくり説明すると「データと処理方法のセット」のことです。

JavaScriptを初めとするオブジェクト指向言語では、オブジェクトとメソッドを組み合わせて、さまざまな処理を実行していきます。

jQueryにおけるオブジェクト生成のやり方は、【$(“”)】内でセレクタを指定したコードを書きます。

例えば、HTMLのh2タグを指定したオブジェクトは【$(“h2”)】と書きます。

メソッド

メソッドは、オブジェクトに対しておこなう操作を指定するものです。

jQueryのメソッドは【.メソッド名()】という形で、【()】内には引数と呼ばれる、メソッドに渡す情報を記載します。

また、ひとつのオブジェクトに対して、メソッドを続けて書くことで、複数の処理を同時に実装することができます。

メソッドによっては引数が必要なかったり、パラメータを指定できたりします。

jQueryには多種多様なメソッドが存在し、すべてを覚えることは不可能なので、必要になったらその都度調べることをおすすめします。

イベント

メソッドと少し似ているのですが、jQueryにはイベントAPIというのも用意されていて、より複雑な処理を実装できます。

イベントは対象のオブジェクトに続けて【.on(“イベント名”, 引数){}】と書くことで実行します。

イベントを活用することで「クリックされたら」「カーソルが合ったら」などの処理を簡単に実装することができます。

このイベントが、jQueryの理念である「少ない記述で多くのことを」をはじめて体感できる機能と言えます。

jQuery公式解説

残念ながら日本語バージョンは存在しないのですが、jQuery公式サイトでは、初心者向けの使い方ページを公開しています。

(jQuery Learning Center:https://learn.jquery.com/)

また、jQueryのAPIをまとめたページもあるため、コーディングに行き詰ったら参照してみるのも良いでしょう。

(API Documentation:https://api.jquery.com/)

jQuery開発ならAMELAに

今回は、初心者向けにjQueryの始め方を解説してきました。

書き方が少し特殊なので、最初は慣れないかもしれません。

しかし、実際javascriptをスクラッチで書くよりも、非常に簡単に高機能なものが作れます。

更に、実際に開発を行う上での環境構築は、ライブラリのダウンロード（もしくはCDN）するだけで良く、それでいて多くのサイトで利用されています。

そのため、是非習得してほしい言語の1つとなっています。

AMELAでは、大規模なWEBシステム開発も得意としています。

特にjQueryでは、
・ajaxを使ったフロントエンドでのデータ通信及び並列処理
・ユーザー動作による様々なアクション
などの実績も多数あります。

オフショア開発を活用した、安価で高機能な開発をご希望なら、是非ご相談いただければと思います。