アフィテク

アフィ収入月10万円以下の初心者を対象に『アフィリエイトで稼ぐテクニック』を発信！

jQueryの基礎中の基礎をなるべく分かり易く解説！

      2015/11/17

jquery2

jQueryが世の中に浸透してからもう何年も経ちますが、なんとなく利用しているだけで実は基礎的な部分すら知らないという方は意外と多いかと思います。というわけで今回はjQueryの基礎中の基礎を解説していこうと思います。

jQueryの機能・特徴

WikipediaによるとjQueryには以下の機能・特徴があると記述されています。

  • ブラウザに依存しないセレクタエンジンを使ったDOMエレメントの選択
  • DOM操作
  • イベント
  • CSS操作
  • エフェクトとアニメーション
  • Ajax
  • ユーティリティ
  • 拡張性 – jQuery プラグイン

なんとなくjQueryを使われている方は「なんのこっちゃ」と思われたかも知れません。今回はこれらについてなるべくわかりやすく解説していきます（今回は概念的な説明が主でソースコードついては触れません）。

ブラウザに依存しないセレクタエンジンを使ったDOMエレメントの選択

「セレクタエンジン」？「DOMエレメント」？

いきなり難解な言葉が出てきたなぁと思っている方もいることでしょう。
しかし戸惑うことはありません。HTMLやCSSを理解している方であれば理解できる概念です。

セレクタエンジンとは

CSSを書いた事がある人は以下のような表記を見かけたことがあるかと思います。

 #header #gnavi li a { ... }

はい。これがセレクタです。

そして、エンジンですが「検索エンジン」というように特定の処理を行うプログラムのことをいいます。つまりセレクタエンジンとは（CSS）セレクタの処理（・解析）を行うプログラムをさします。

DOMエレメントとは

これはJavaScriptをある程度書いた事がある方であれば知っているかと思いますが、HTMLやCSSだけしか書かないという方には馴染みがない言葉かもしれません。しかし、（細かい記法はおいておき）概念的な部分はHTMLやCSSを理解している人であれば何となく理解できるでしょう。

DOMとはDocument Object Modelの略で、JavaScript（および他の言語）からHTMLの要素にアクセスするための機能（API）です。

例えば、要素がアニメーション（例えばスライドショー）するようなページよく見かけますよね？
あれは当然Javascriptを使っているわけですが、実はJavaScriptだけでは要素をアニメーションさせることはできないのです。JavaScriptからDOMを利用して要素（エレメント）にアクセスすることで初めて要素をアニメーションさせることが可能になるわけです。

つまり、jQueryにはCSSセレクタを利用してHTMLの要素にアクセスする機能が基本機能に含まれているということです。CSSで慣れ親しんだ記法がそのまま使えるのはありがたいですよね。なお、この機能は後項で紹介する各機能でも使われるjQueryの根幹となるものです。ここをきちんと理解するかどうかでjQuery活用の幅が大きく変わってくることでしょう。

DOM操作

前項で触れたのでざっくりとまとめます。
DOMを使って要素にアクセスすることで以下のようなことが可能です。

  • 要素の属性（alt、href、classなど）の変更
  • 要素内のテキストの変更
  • 要素内のHTMLの変更
  • 要素の移動（視覚的な移動ではなくソース上の位置の変更）
  • 要素の追加・削除
  • 要素の複製
  • 要素のスタイルの変更（style属性の操作。後項の「CSS操作」はstyle属性を操作しています）

他にもあるかと思いますがざっとこんな感じです。
これらを駆使することで以下のようなことが実現可能になります。

使用例

  • 休日や祝日など特定の日付の時だけ一部のテキストを変更
  • 特定ページにいる場合にclass属性を変更（私はグロナビのアクティブ化などによく利用します）
  • レスポンシブWebデザインサイトでスマホとPCで要素の前後関係を入れ替えないといけない場合に活用
  • JavaScriptを使ったアプリケーション開発
  • 運用上更新が頻繁にある箇所を動的に組み立て更新の負担を減らす

イベント

JavaScriptに触れたことが無い人にとっては馴染みが薄い概念かと思います。プログラマでも使用する言語によっては触れることの無いテーマです。しかし、安心してくださいHTMLやCSSを記述したことがある人であれば既に利用しているはずです。

CSSでこのような記述をしたことがありませんか？

 .btn a:hover { ... }

大事なのは「:hover」の部分。
ご存知マウスオーバーした時に適用されるスタイルですよね。

この「マウスオーバーした時」、「○○した時」というのがイベントなんです。簡単でしょ？

また、もっと身近なところでは、Webサイトのリンクをクリックしてページを移動するのも、「クリック」というイベントが発生した結果ページを移動しているわけです。

イベントはWebサイトの中だけで起きているわけではありません。
キーボードをタイプして画面に文字が表示されるのは「キーボードをタイプした」というイベントが発生した結果であり、まれにエラー画面が表示がされるのも「エラーが起きた」というイベントが発生した結果なのです。

少し遠回りになりましたが、jQueryではこのイベントを簡単に扱う仕組みが用意されているのです。
JavaScript単体でもイベントは利用可能ですがブラウザの互換性を考慮しないといけないのでjQueryが重宝されているというわけです。

CSS操作

jQueryを使うことでCSSの操作が可能です。
前項「DOM操作」で触れたように内部的にはstyle属性を操作しています。
「CSS操作」とありますがCSSファイルを操作しているわけではありません。

このCSS操作によって変更されたスタイルはCSSファイル等に記述されたスタイルよりも優先されます。しかし、「!important」を指定したスタイルが最優先されるため「jQueryでCSS操作ができない！」なんて時はここを疑ってみてください。

エフェクトとアニメーション

デザイナーの方はjQueryといえばこれをイメージするかと思います。
そのイメージは間違っていません。

エフェクトやアニメーションはJavaScript単体で実装しようとすると多大な労力を要します。それをたった数行の記述で実現できるわけです。jQueryがWeb業界に与えた影響は計り知れなく大きなものです。

そんなエフェクトとアニメーションですが標準機能では以下のようなことが可能です。

  • フェードイン・フェードアウト
  • 特定の透明度へのフェード
  • スライドダウン・スライドアップ
  • style属性を操作することによるアニメーション

jQueryの登場でエフェクト・アニメーション処理が飛躍的に簡単になったものの、複雑なことをやろうとするとそれなりのプログラミングスキルは必要になってくるため過度の期待は禁物です。

Ajax

これはデザイナーやJavaScriptに触れたことの無いコーダーはなかなか利用する機会が無いかと思います。この言葉自体はjQueryが登場する以前によく使われていて一種の流行語のようなものだったと記憶しています。

AjaxはAsynchronous JavaScript + XMLの略で、JavaScriptを使って非同期でXMLをやり取りする仕組みを言います。
実際は必ずしもXMLが利用されているわけではなくプレーンテキストやCSVなどをやり取りをすることもあります。

非同期って何？

データを転送する際に、送信側と受信側のタイミングの一致（同期）を気にせずにデータをやり取りすること（IT用語辞典バイナリより抜粋）とあります。

ちょっとわかりにくいかも知れませんね。
ほんの少しだけスクリプトを使った例を提示します。

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
alert(jQuery); //jQueryが読み込まれたか確認
</script>

上記のコードはjQueryがきちんと読み込まれているかどうかを確認をするだけのコードです。
パスに問題がなければもちろん正常に動作します。
なぜ正常に動くか分かりますか？

「alert(jQuery);」よりも前の行にjQueryを読み込むコードが書かれていて、プログラムが実行される前にjQueryが読み込まれているためですよね。
これは同期されていて読み込みの順序が保障されているからそういう結果になっているわけです。

非同期はこの逆です。
もし仮に上記の例のjQueryが非同期で読み込まれていたとしましょう。
するとどうなるでしょうか？

正解は「動かない可能性がある」です。
非同期では読み込みの順序が保障されなくなるわけですから、jQueryが読み込まれる前にスクリプトが実行されてしまう可能性があるわけです。

これだけ聞くと非同期って意味無いじゃんって思うかもしれませんが大きなメリットがあります。

非同期であるメリット

非同期であるメリットは主に以下のようなものがあります。

任意のタイミングでデータをやり取りできる
例えばページ全体の読み込みが完了した数秒後にデータを読み込んだり、ユーザーのアクション（ロールオーバーするなど）をきっかけに読み込みをスタートさせることが可能。
メインの処理・読み込みにほとんど影響を与えることなくデータのやり取りができる
例えばユーザーがコンテンツを閲覧している裏側で重たいデータ読み込むことが可能。
画面切り替えの無いシームレスなサイトが作成できる
通常はページを移動するとページ全体が再読み込みされますが、Ajaxを利用することでページの一部分だけを更新することが可能になります。必要最小限のデータしか読み込まないためスマートフォンなど回線が細い環境ではパフォーマンスが大きく向上する可能性があります。

そんなAjaxがjQueryを使うことで容易に導入することが可能です。

ユーティリティ

jQueryの主な機能はセレクタ使ったDOMの操作ですが、それとは別にユーティリティと呼ばれる機能が存在します。ユーティリティには配列や文字列操作を便利に行う関数などが用意されています。

しかし、jQueryを使う上で必須の機能ではないので今回は割愛します。

拡張性 – jQuery プラグイン

jQueryプラグイン。デザイナーやHTML・CSSコーダーの方はお世話になっている方がほとんどかと思います。私もたまにお世話になっています。

世の中にはjQueryプラグインが当たり前のように存在するわけですが、それはjQuery本体にプラグインを組み込むための仕組みが用意されているから成り立っているわけです。こういう柔軟な拡張性あるからこそ便利に使えるわけです。これを知ったからにはjQuery開発者に足を向けて寝られませんね（笑）

プラグインの開発は比較的容易ですがある程度プログラミングスキルを要する為説明は割愛します。

まとめ

いかがでしたでしょうか。
技術をより便利に利用するために基礎を学ぶことは重要なことです。
学習の参考になれば幸いです。

また、今回はソースコードには触れませんでしたが定期的にこれらを掘り下げた内容を取り扱っていこうと思いますのでよろしくおねがいします。

↓「Web制作に必要なことだけを効率よくしっかり学べる」ということで好評を得ているこの書籍オススメです。「jQueryは勉強したいけどJavaScriptを一から覚えるのはシンドイ」という人は是非！

Web制作の現場で使うjQueryデザイン入門改訂新版 (WEB PROFESSIONAL)

 - Web制作テクニック , ,