ブログ

  1. トップ
  2. ブログ
  3. 初心者必見!jQueryの基礎知識と基本的な書き方まとめ

jQuery

初心者必見!jQueryの基礎知識と基本的な書き方まとめ

jQueryの基本について、ビギナー向けにまとめました。jQueryの基本や何ができるのか、基本的な書き方までご紹介しています。jQueryの基本をおさらいしたいエンジニアの方にも参考にしていただければと思います。

jQueryの基礎知識

はじめに、jQueryの基礎知識から解説していきましょう。

jQueryとは?

jQuery公式サイト

» jQuery

jQueryとは、JavaScriptのライブラリのこと。JavaScriptのライブラリは他にもいろいろとあるのですが、その中でもjQueryは人気が高く、Web制作ではスタンダードと言ってもいいほど使われています。jQueryがリリースされたのは2006年1月で、記事執筆時点でのバージョンは3.1.0です。

JavaScriptの特徴について簡単に触れておきましょう。jQueryのキャッチコピーは「write less, do more.」です。日本語にすると、「よりコード量を少なく、より多くのことができる」といった感じになります。JavaScript単体で書くときよりもコード量を減らしつつ、より簡単にJavaScriptを組むことができるのです。

さらに、jQuery自体もとても軽量に作られています。minifiedされた、圧縮されたjQueryは30KBほどのサイズしかありません。

jQueryのメリット

次は、jQueryを導入するメリットです。

簡単にJavaScriptが実装できる

jQueryを導入することで、簡単にJavaScriptが実装できるようになります。後述するように、jQueryはHTMLやCSSと馴染みのある文法になっています。Webエンジニアであれば、スムーズにjQueryを習得することができることでしょう。プログラミングに慣れていないデザイナーにも、JavaScriptが実装しやすくなるのでおすすめです。

コード量が減らせる

JavaScriptをそのまま書くよりも、jQueryを使うと大幅にコード量を減らすことができます。開発に掛かる工数も減らせますし、保守などのメンテナンスにかかる手間やコストも少なくできるでしょう。

クロスブラウザに対応している

jQueryはクロスブラウザに対応しているので、ブラウザごとに記述を書き分ける必要がありません。バージョン1.8からは、ベンダープレフィクスも自動で補完してくれるようになりました。

ブラウザのサポート状況

jQuery3.0以降のブラウザサポート状況についても確認しておきましょう。

代表的なブラウザについては、最新バージョンであればサポートされていると考えてしまってOKです。公式サイトでは、最新バージョンとその一つ前のバージョンがサポート対象と明記してあります(Chrome、Edge、Firefox、Safari)。最新バージョンが24.xの時、24.xと23.xがサポートされているということです。

Operaについては最新のバージョンのみ、IEについてはバージョン9以上がサポート対象となっています。

古いバージョンのブラウザに対応しなければいけない時は、バージョン1.12.x系のjQueryを使うなどの対策が必要です。

jQueryの参考サイト

jQuery関連の参考サイトについてもご紹介しておきましょう。jQueryの学習に役立ててもいいですし、普段使いのリファレンスとして使ってもいいでしょう。

jQuery Learning Center

» jQuery Learning Center

jQuery公式サイトによる、リファレンスです。英語なのですが、公式ならではの信頼性の高い情報が得られます。公式サイトではこの他にも、APIドキュメントも公開しているので、そちらも併せて参考にしたいところです。

JavaScript | MDN

» JavaScript | MDN

jQueryはJavaScriptのライブラリだと述べましたね。そのため、jQueryを使うにはJavaScriptのスキルも必要になります。

こちらはMozilla Developer Networkによる、JavaScript情報サイトです。チュートリアルやリファレンスが豊富で、初級者から上級者まで参考になる情報が多数掲載されています。Mozillaが提供している、JavaScript関連のツールも紹介してあります。

JavaScript入門 – 基本構文の解説とクラス/関数リファレンス

» JavaScript入門 – 基本構文の解説とクラス/関数リファレンス

JavaScriptの基本構文や各種リファレンスについて、幅広く紹介されています。jQueryの使い方についても解説されていますが、バージョン1.5.xを使っているため少し情報が古いです。

jQueryを導入する方法

jQueryを導入する方法です。難しい手順は必要なく、ページのheadセクションでjQueryを読み込むだけです。

ダウンロードして読み込む方法

jQueryをダウンロードして使う場合、先ほどの公式サイトからダウンロードをして読み込めばOKです。通常のJavaScriptファイルと同様に、ページのheadセクションで下のように読み込みます。

<script type="text/javascript" src="jquery-3.1.0.min.js"></script>

ダウンロードできるファイル形式は、compressedという圧縮されたものと、圧縮されていないuncompressedがあります。その他にも、Ajaxなどのモジュールを省いたslimバージョンも配布されています。用途に応じて、使い分けてください。

CDNを利用して読み込む方法

CDNを使ってjQueryを読み込むことも可能です。jQuery CDNから読み込む場合は、下のように記述します。

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

Google Hosted Librariesの場合は、下のようになります。

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

WordPressの場合

WordPressの場合は、jQueryの読み込みは不要です。WordPress本体に、最初からjQueryが含まれているからです。wp_head()の部分で、他のスクリプトやCSSなどのファイルと一緒にjQueryも読み込まれます。

※ここでは詳しく解説しませんが、WordPress本体に含まれているjQueryは、WordPress用に少しカスタマイズされたものです。

jQueryを読み込む手間が減るので便利なのですが、これにはデメリットもあります。他のJavaScriptライブラリとコンフリクトを起こしたり、特定のバージョンのjQueryを読み込みたいときもあるでしょう。

こういった問題を解決するには、wp_deregister_script()を使ってデフォルトのjQueryを読み込まないようにするなどの工夫が必要になります。WordPressでjQueryを使う場合は、頭に入れておきましょう。

jQueryの書き方

ここからは、jQueryの基本的な書き方について解説します。具体例を取り上げながら、jQueryの記述方法を見ていきましょう。

なお、jQueryはjsファイルとして外部ファイルにまとめて記述して、都度読み込む方法が一般的です。HTMLファイルのheadセクションに記述することも可能ですが、特に理由がない限りはjsファイルに記載するようにしましょう。

※jQuery本体を読み込んだ後に、jQueryのコードを記述した外部ファイルを読み込むようにしてください。この順番を間違えると、jQueryが動きませんのでご注意を。

jQueryの基本的な書き方

それでは、jQueryの書き方について見ていきましょう。

$(function(){
  //ここにjQueryのコードを書きます
});

上が、jQueryの基本形です。jQueryは必ず、このように記述します。例えば、下のコードをご覧ください。

$(function(){
  $("p").css("color", "yellow");
});

これはpタグの要素に対して、colorプロパティを指定しているコードです。

pタグのところがセレクタで、cssの部分はメソッドと呼ばれます。指定したセレクタに対して、任意の処理(メソッド)を実行していく。jQueryは基本的に、この流れで記述されます。

なお、メソッドの括弧の中にあるパラメータ(引数)は、メソッドの種類によって必要ない場合もあります。セレクタやパラメータはダブルクオーテーションで囲ってありますが、シングルクオーテーションでも大丈夫です。

セレクタには、idやclass、子孫、グループなどのセレクタが記述できます。

セレクタ
id #sample
class .sample
子孫 li a
グループ p.sample01, p.sample02

CSSを指定する

ここからは、jQueryの具体的な記述について見ていきましょう。まずはcssメソッドを使って、任意のセレクタにCSSを指定する方法から。

先ほどの例をもう一度見てみましょう。

$(function(){
  $("p").css("color", "yellow");
});

こちらの例では、sampleというclassに対してcolorプロパティを指定しています。指定したいプロパティが複数あるときは、下のように記述します。

$(function(){
  $("p").css({"color": "yellow", "text-decoration": "none"});
});

プロパティが3つ以上の場合も、同様に半角カンマを使ってつなげていきます。

classを追加したり取り除いたりする

classを追加する方法です。下の例では、addClassメソッドを使ってp要素にnew-classというclassを付け加えています。

$(function(){
  $("p").addClass("new-class");
});

逆にclassを取り除く場合は、removeClassを使います。

$(function(){
  $("p").removeClass("new-class");
});

クリックで処理をする

次は、ボタンなどの要素がクリックされた時に行う処理です。

$(function(){
  $(".register").click(function(){
    $(this).css("color", "blue");
  });
});

ボタンなどの要素にregisterというclassがついているとして、その要素がクリックされたとします。すると、要素のcolorプロパティがblueに変更されます。

なおthisというセレクタがありますが、これはclickされた要素と同じセレクタを使うという意味です。clickされたものとは別のセレクタを対象としたい場合は、thisの部分をそのセレクタに書きかえます。

さて、上の例では1度クリックしたら色はずっとblueのまま。元の色(whiteだとしましょう)に戻すことはできません。これに対して、toggleメソッドを使うとクリックの度にcolorプロパティの値を変更することができます。

$(function(){
  $(".register").toggle(function(){
    $(this).css("color", "blue")
  }, function(){
    $(this).css("color", "white")
  });
});

アニメーションする

animateメソッドを使うと、任意の要素にアニメーションをさせることができます。

ここではWebサイトによくある、クリックしたらページトップに移動する処理を例にあげます。上で使ったclickメソッドと、animateメソッドを使っています。

$(function(){
  $(".animationTop").click(function(){
    $("body,html").animate({
      scrollTop: 0
    }, "slow");
    return false;
  });
});

マウスオーバーで処理をする

上の例ではクリックで処理を実行しましたが、こちらは要素にマウスオーバーがあったときに処理を行う例です。

$(function(){
  $(".register").mouseover(function(){
    $(this).fadeOut(1000);
  });
});

ここではfadeOutメソッドを使って、要素にフェードアウト効果をさせています。パラメータに1000とありますが、これは時間のことです。ミリ秒が使われているので、1000は1秒のこと。1秒かけて、要素がフェードアウトすることになります。

hideメソッドを使うと、要素を隠すことができます。

$(function(){
  $(".register").mouseover(function(){
    $(this).hide();
  });
});

ちなみにmouseoverと似たメソッドとして、mouseenterがあります。両者の違いは、指定したセレクタの子孫要素にまで反応するかどうかということになります。mouseoverは子孫要素にも反応して、mouseenterは指定したセレクタにのみ反応します。

複数のメソッドをつなげる(メソッドチェーン)

最後に、複数のメソッドを同時に実行する方法についてご紹介します。メソッドチェーンと呼ばれる方法を使うのですが、書き方はこれまでの例とさほど変わりません。セレクタの後に、メソッドを順に書いていけばOKです。

要素がクリックされたときに、colorプロパティを変えつつ、テキストを表示してみましょう。

$(function(){
  $(".register").click(function(){
    $(this).css("color", "blue").text("テキスト");
  });
});

あとがき

jQueryの基礎や、基本的な使い方について解説しました。jQueryは、WebデザインやWebアプリケーションの開発では欠かせない技術です。jQueryの特徴をよく理解して、上手に使っていきましょう。