jQuery入門コース（初心者向け）JavaScriptを効率的に書こう

jQueryはJavaScriptを頻繁に使用する方やJavaScriptの基礎学習を終えられた方におすすめのJavaScriptのライブラリです。jQueryは、よく間違えられやすいですがプログラミング言語でもなく、フレームワークでもなく、ライブラリ（便利な機能をまとめたもの）です。JavaScriptで数十行以上となる処理がjQueryを用いると1行程度のコーディングでできるようになります。JavaScriptを使った開発を行なうのであれば、身に着けておくと便利なスキルです。

jQueryは、JavaScriptで書いた内容を、短いコードで簡単に分かりやすく記述することができるJavaScriptのライブラリです。例えば「クリックしたら画像が変わる」、「マウスポインターを乗せたら要素がアニメーションのように動く」、「時間によってページの色を変化させる」などの処理をJavaScriptで書くとなるとかなりの時間を要してしまいますが、jQueryの場合、簡単に記述することができます。

jQueryの主な用途は、テキストボックスの中身を取得したり、CSSをユーザー操作に合わせて変更したりするDOM操作です。jQueryではこのような操作が簡単に実行できる点に大きなメリットがあると考えられます。

また、jQueryではこのような利点を活かしてアニメーションを簡単に実装することができます。jQueryには、デフォルトでanimateというメソッドが用意されており、任意のアニメーション効果を作成するためのメソッドです。大きさや位置などの変化を細かく付けられる独自のアニメーションを作ることも可能です。

DOMとは直訳すると、「ドキュメントを物として扱うモデル」となります。その意味の通り、DOMでは文書に含まれる要素や属性、テキストをそれぞれオブジェクトとみなし、「オブジェクトの集合（階層関係）が文書である」と考えます。ちなみに文書を構成する要素やテキストといったオブジェクトのことを「ノード」と言います。

Ajaxとは、Asynchronous JavaScript And XMLの略で、JavaScriptとXMLで非同期通信をする処理を指します。Ajaxを用いることで、ページ内の必要な部分だけを書き換えることができます。更新する必要がない部分を無駄に読み込み直す時間が必要ないため、ユーザーは快適にブラウザ操作することができます。このAjax処理を実行するには、通常であれば数十行のコードの記述が必要になりますが、jQueryを使うことで記述量を大幅に減らすことが可能です。

jQueryを導入するには、一般的によく使われるCDNを使った方法とjQuery自体をダウンロードする方法があります。それぞれ簡単に解説します。

jQueryは公式サイトからダウンロードして使用することができます。ダウンロードファイルを保存して使用しましょう。

CDNとはコンテンツデリバリーネットワークの略でウェブコンテンツを効率的かつスピーディに配信できるように工夫されたネットワークのことです。CDNを利用したjQueryの導入は操作が簡単なので、初心者の方でも問題なく導入することができます。

jQueryの公式サイトにCDN経由で利用できるURLが記載されています。

用意されているファイルには、圧縮版（minified）と非圧縮版（uncompressed）があります。軽量で高速なものが希望であれば圧縮版を、あらかじめコメントでの説明や改行などがあって見やすいものを希望であれば非圧縮を選びましょう。容量を考慮すると開発段階は非圧縮、公開後は圧縮で使い分けると良いです。

jQueryは、JavaScriptを短いコードで記述することのできるライブラリのため、基本的にJavaScriptでできることは全て実装することができます。ここでは、jQueryで良く実装されていることを紹介します。

ページをスクロールすると次第にサムネイル画像が現れてくるフェードイン効果や徐々に薄くなって消えていくフェードアウト効果などをJavaScriptで作ろうとすると時間がかかってしまいます。しかし、jQueryであれば簡単に実装することができます。

jQueryで良く作られている機能のひとつとして良く見受けられるのが、スライドショーなどのスライダー機能です。スライドショー作成の操作は非常に簡単で、画像ファイルと画像の切り替わり時間を設定しておくことで実装が可能です。JavaScriptで実装する場合、難易度の高い内容になりますが、jQueryを使えば簡単に作成することができます。

マウスオーバーやクリックで開閉するハンバーガーメニューなどの実装もjQueryであればコード量少なく実装することができます。今の時代に欠かせないスマホ対応を考慮したWebサイト構築において、この機能は必要不可欠です。通常時にアイコンとして表示され、必要時のみにメニューバーとしての機能を持たせることができます。

ここまでの説明でザックリとjQueryが理解出来ていれば十分です。習得にはjQueryを実際に書いていくことが重要です。こちらでは、jQueryの入門編として、まずは問題を解いていきましょう。

Web制作のプロを目指す場合、jQueryは身に着けておくべきスキルといえます。今の時代のWebサイトでは、JavaScriotを使ったイベント処理が高確率で実装されている為です。jQueryを使いこなすことができるようになれば、JavaScriptをただ早く書けるだけではなく、優れたUXを備えたWebサイトをユーザーに提供することができます。プログラミング初心者でも比較的簡単に学ぶことのできるスキルなので、中級・上級問題集にも挑戦して身に着けていきましょう。