初心者向け：jQueryとは？いったい何？

初心者向けに、「やっぱりサイトのトップページには、カッコイイ！スライダーがあったほうがイイよね！」や「サイトに写真をたくさん使いたいけど、スマートに表示したいよね！」などといった要望に応えるにはjQueryが便利！そこで、今回よりjQueryとは何か、何ができるのかなど詳しく解説しています。

jQueryとは、JavaScriptライブラリのひとつですが、ページ作成、初心者の方でHTML・CSSをひととおり学習した後に、Webデザインやフロントエンドのスキルを身に付けたい人は、jQueryもぜひ身につけておきたいスキルのひとつになります。

という事で、それでは今回はッ、

・初心者へjQueryとは？いったい何？
・ブラウザで動くプログラムJavaScript
・jQueryメリットとデメリット
・CSSと似ているjQueryの記述方法

上記について記載していこうと思います…。

初心者へjQueryとは？いったい何？

Web制作初心者の方で、HTML・CSSの学習をひととおり終え、いざ実際にWebサイト作成を行うと、「Webサイト事態に動きが欲しいな！」と考えることも多々あることと思います。

例えば「トップページにスライダーが欲しい！」とか「画像がフェードしながら切り替わったらいいな！」とか「マウスでクリックしたら、スライドしたらいいな！」とか、そんな風にWebサイトのデザインをJavaScriptを記載するよりも、比較的簡単に実現してくれるのが、JavaScriptのライブラリのひとつである「jQuery（ジェイクエリ）」になります。

一般的にWebサイトは、HTMLとCSSによって作られていますが、HTMLでWebサイトの文章をマークアップして、CSSで見た目、デザインを整えます。しかし、HTML+CSSで作られたWebサイトには基本的に動きがありません。

CSSでは:hover疑似クラスを使えば、マウスを載せた時に少しだけ動きを付けることができます。例えばマウスオーバー時に色を変えたりアンダーラインを表示することができます。
簡単な装飾的な動きを付けることはCSSでもできますが、ダイナミックにページの要素を書き換えたり、画像をアニメーションさせながら表示させるといった動きは、JavaScriptの力が必要になります。

jQueryが普及した背景jQueryが普及した背景として、InternetExplorerの影響が大きいものと思います。以前ブラウザの使用率のおおよそ半数以上はInternetExplorerだったという時代がありました。単にJavaScriptを記載したWebサイトでは、ブラウザごとの実装差異が生じたことから、それを補うにもjQueryが必要だったように思います。

ブラウザで動くプログラムJavaScript

Web制作初心者の方でも、JavaScriptという事がは聞いたことがある方が多いことと思います。

JavaScriptは、たくさんあるプログラム言語のひとつで、JSと略されることもあります。
JavaScriptは、Microsoft EdgeやGoogle Chrom、Safariといったブラウザ上で動くプログラム言語です。主にWebサイトに動きを付けることが得意なプログラム言語になります。

JavaScriptを覚えれば、ページの要素をダイナミックに変更したりするようなことが出来るようになります。
しかしながらJavaScriptを覚えるのは、なかなか大変です。個人的に、私もあまり得意とはいえません。そして更にコーディングを大変にしているのが、先ほど多少記載したブラウザごとの実装差異になります。

要素を変更サンプルダイナミックに要素を変更とは下記のような場合になります。
Webサイトでよく見かけるサムネイルをクリックすると、メイン画像が切り替わるなどetc。

※上記がjQueryを使用したサンプルになります。

JavaScriptはブラウザで動くプログラムですから、色々なブラウザでも同じように動作するようにコーディングする必要があります。CSSでも、基本的にどのブラウザでも同じように表示されるように記述しますので、それと同じ感覚で、JavaScriptもどのブラウザでも動くように記述しなくてはイケなくなります。しかし、以前のInternetExplorerとその他のブラウザでは、記述法が違ったりすることもあるので、さらにJavaScriptのコーディングを大変にしています。

「IEを考えないだけで、ずいぶんとコーディングが楽になった！」などの話をお聞きしたこともあると思いますが、上記のようなことが原因のひとつに上げられることと思います。

jQueryメリットとデメリット

「jQueryとは、なんなの？」「jQueryで何ができるの？」をひと言でいってしまうと、jQueryはJavaScriptのライブラリのひとつです。

では、ライブラリとはなんでしょう？ライブラリというのは、よく使う機能をひとまとめにして部品化し、簡単に機能を使えるようにしたものです。ライブラリを使えば、複雑になりがちなJavaScriptのコードも、比較的簡単に記述できるようになります。

JavaScriptのライブラリには、prototype.jsや、React.jsなど、沢山のライブラリがありますが、jQueryもそんなライブラリのひとつになります。

jQueryを使うメリット

JavaScript自体が簡易的にプログラムできる言語になりますが、jQueryは更に簡易的にプログラムを作成することができます。コーディングが短いので、すぐに実装できること、エラーが見つかっても探しやすいという利点があります。特にすぐに実装できる点には注目すべき所になります。

コーディングが短く済むのであれば、その分作業時間も減ることは確実です。効率さを求めるのであればjQueryを利用することは大きいメリットと言えます。

また、インターネットエクスプローラーや、グーグルクロームなどウェブブラウザは沢山あります。特定のブラウザで不具合が出てしまうことは良くあることですが、たとえばインターネットエクスプローラーでは問題ないのにグーグルクロームではエラーが発生することもあります。

この問題は各ブラウザごとに仕様があるために起こることです。しかし、jQueryを使う場合は気にする必要はありません。それぞれのブラウザごとの実装差異を吸収してくれているため、開発者は純粋にコーディングに集中することができます。

jQueryを使う一番のメリットとしては、豊富なプラグインが存在することがあげられます。

プラグインとは拡張させるためのプログラムと考えて頂ければ分かりやすい事とおもいます。jQueryのプラグインは、何かしらの処理や効果をプラグインを付けることで対応できるようになります。具体的な例としては、スライダーやフォトギャラリーなどを上げることができますが、この他にも沢山のプラグインがあります。

jQueryを使うデメリット

jQueryを使うデメリットとしては、jQueryの読み込み、また、処理速度が遅くなることがあげられます。
これは、jQueryを使用する場合、jQuery自体を読み込みをする必要があります。読み込みをする分、プログラムの時間がかかってしまい、結果として表示速度が遅くなる原因の一つになります。

また、jQueryの使い方にも注意する必要があります。簡易的にコーディングで記述できるため、多少誤った記述でも動いてしまうことがあります。実際には無駄な処理をしてしまい、結果的に処理速度を遅くしている可能性が考えられます。初心者の場合は自身が書いているコードがどんなコードなのかきちんと理解してから実装するようオススメします。

Webサイト制作には、jQuery以外にも多数のライブラリが存在しています。そこで、多くのライブラリはjQueryとの共存ができない（干渉）という不具合が発生してしまうこともあります。これを回避する方法も、実は存在しますが、jQueryを使うデメリットとしては、上記に記載した2点がデメリットといえる事と思います。

CSSと似ているjQueryの記述方法

jQueryは、難しく複雑になりがちなJavaScriptのコードを間にjQueryの記載をすることで、比較的簡単なコードで記述することができるようになります。そして上記にも記載したように「ブラウザごとの実装差異」も気にする必要がなくなります。これはjQuery自体がクロスブラウザで設計されているからになります。

jQueryがJavaScriptの間に、記載するコードを比較的簡単に記述できる、記載方法の説明を記載してみます。
まずは、基本のCSS、セレクタとプロパティの組み合わせの記述。

基本のCSSサンプルp.samlpe { color: red; }
セレクタ { プロパティ: 値; }

CSSはセレクタで要素を指定して、プロパティと値で、スタイルを指定します。これに対して下記がjQueryのサンプルコードになります。

jQueryサンプル$(“p.samlpe”) . css(“color”, “red”);
$(“セレクタ”) .メソッド ();
$(“セレクタ”) .メソッド (パラメータ);

jQueryでも、CSSと同じように、セレクタを使って要素を指定します。そしてメソッドで何をするかを指定します。メソッドにはパラメータというものを指定する場合もあります。

上記サンプルでは、sampleというクラスの付いたp要素（ここまでがセレクタ）に対して、css()メソッドを使って、赤色にする（メソッドとパラメータ）というコードになります。

このように要素を指定して、メソッドで何をするか記述していくのが、jQueryの基本的な記述方法です。この記述方法、考え方は、CSSに慣れている人であれば、習得するのにそんなに時間がかからない事と思います。
このことからもjQueryは、HTML、CSSの次に学ぶにふさわしい、Webデザイナーに優しいJavaScriptのライブラリです。

という事で今回は、jQueryとは？いったい何？につきまして、サンプルデザインおよびサンプルコードを踏まえ記載してみました。

実はここ数年、「jQueryは、そろそろ使わない！！」などの意見もWeb上ではチラホラ出始めてきました。しかしながら、Web上自体にjQueryで作製されたWebサイトが、まだまだ沢山ございます。ということは、jQuery自体もここ1～2年でコンテンツが終ってしまうという事は、ないここと思います。いきなりJavaScriptを勉強するのもアリですが、初めからJavaScriptの学習というのは、初心者に取りまして、挫折の要因となることと思いますので、はやり始めは簡単な所からがオススメです。

とりあえず、今回はここまで…。

お仕事のご依頼は↓コチラより…、それではまた次回…。