【jQuery入門】jQueryとは? 簡単サンプルで学ぶ入門講座

jQueryとは、JavaScriptライブラリのひとつです。ライブラリとは、JavaScriptでよく使うコードをまとめたコード集のようなものです。 jQueryのファイルを読み込むだけで使える手軽さと便利さから、jQueryはJavaScriptの数あるライブラリの中でも最も有名なもののひとつです。

jQueryを使うことのメリット

ライブラリの最も大きなメリットはコードの記述量を減らせるという点です。 JavaScriptで一から書くと複雑で何十行にもなってしまうコードを、jQueryを使うことでシンプルかつ半分くらいのコード量になります。例えば、アニメーションつきで要素を表示・非表示するコードもほんの数行で済みます。 また、シンプルで分かりやすいのでプログラマーではないデザイナーでも扱うことができます。

jQueryを導入する方法

jQueryの導入はたった1行で済みます。まずは試してみたいという人は、以下のHTMLをhead要素内に挿入してみてください。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

これだけで、jQueryの導入は完了です。より詳細は以下を参照してください。 参照:【jQuery入門】jQueryファイルを読み込む2つの方法

jQueryのコードを記述する場所

jQueryのコードは、通常のJavaScriptと同様に外部のJavaScriptファイルに記述して読み込むか、scriptタグ内に記述するかどちらでも可能です。 また、とりあえずサンプルを試してみたいという場合は、CodePenJSFiddleなどウェブ上で試せるツールがおすすめです。

jQueryではなにができるの?簡単サンプルで紹介

導入が完了したので、次にjQueryではなにが出来るのかを簡単なサンプルで紹介します。

jQueryの基本的な文法

最も基本的な文法は以下のような形です。

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

セレクタは、CSSと同じように「#id」「.class」といったように指定できます。そして、メソッドは自分でも拡張できますがjQueryが既に用意している便利なメソッドが沢山あります。

例:要素を非表示にする

#childを非表示にするサンプルです。セレクタが#child、メソッドがhide()で、パラメータは指定なしです。

$("#child").hide();

例:クリックしたら要素の表示・非表示を切り替える

もう少し実用的な、クリックしたら要素の表示・非表示を切り替える例です。 クリックしたら表示・非表示が切り替わるサンプルです。メソッドは、on()で第一引数がclickで、第二引数がクリックされる際に実行される関数となっています。

$("#toggle").on("click", function(){
  $("#target").toggle("slow");
});

以下の表示・非表示ボタンをクリックすることで、ゆっくりと表示・非表示できます。 実際の表示

See the Pen [jQuery] 表示・非表示のサンプル by Yuichi Iwayama (@UXMILK) on CodePen.

より詳細は、以下を参照してください。 jQueryで表示・非表示のアニメーション:toggle(), show(), hide() このようにjQueryを使うと簡単かつシンプルなコードで、動きのあるサイトをつくることができます。

jQueryプラグインを使ってより便利に

また、jQuery本体とは別にjQueryプラグインというものがあります。これは、jQueryを使って書かれた便利なコードです。 例えばスライダーを実装したいという時、jQueryで一から書くこともできますが、それもやはり時間がかかってしまうものです。その時に、jQueryプラグインを使えばより簡単にスライダーを作ることができます。 よくある実装の場合は、探せばjQueryプラグインが見つかる場合が多いので、まずはプラグインを探してみても良いでしょう。


イベント

2017/10/06(金)
UX School(全10回)