jQueryはJavaScriptに活用されるオープンソースWebアプリケーションのライブラリです。今やWebデザインの仕事に関わる上で必須スキルとして言われるほどのJavaScriptライブラリのデファクトスタンダードとされております。この記事ではjQueryを理解するために初心者でも分かる歴史、できること、基礎知識などを簡単に解説していきます。
jQueryとはJavaScriptに活用されるジョン・レシグ(John Resig)氏によって開発されたクライアントサイドスクリプトを簡易化するためのライブラリです。2006年8月に誕生し、基本理念を『write less, do more(少ない記述で、もっと多くのことをする)』を掲げております。特徴として非常に簡単でかつ少ない記述でHTMLとCSSを操作することができます。またjQueryを利用する世界中の方々が様々なプラグインの作成を行っていることから拡張性が高いことも特徴として挙げられます。jQueryはJavaScirptの発展に大きく影響を与えたフレームワークと言えるでしょう。
JavaScriptとはネットスケープコミュニケーションズ社によって1995年に誕生したプログラミング言語の一種でその中でもオブジェクト指向スクリプト言語に区分されます。主な目的として動的な機能をWebページに生成するためのプログラミング言語として開発されました。Webサイト、Webアプリ、ゲームなど様々な用途に活用できるため注目を集めております。名称にJavaが含まれるためJavaの仲間と誤解を生むこともありますがJavaScriptは全く異なるプログラム言語です。開発当時サン・マイクロシステムズ社が開発したプログラミング言語『Java』が大きな注目を集めていたことや同社との業務提携を行った背景もありJavaにちなんだ名称が付けられました。
JavaScriptのメリット・基礎知識について解説された記事はこちら>>
『JavaScriptにおけるシステム開発を簡単に行えるように用意された枠組みのこと』
JavaScriptフレームワークとはJavaScriptにおけるシステム開発のプログラミングを効率的に実施するために汎用的な機能群をまとめ、システムの骨組みとなるテンプレートまで用意してくれる枠組みのことです。フレームワークを活用することでプログラミングにおける記述コードを最小限に抑えることが出来ます。JavaScriptフレームワークの代表的な種類としてjQuery、AngularJS、Vue.jsなどが挙げられます。
JavaScriptフレームワーク人気どころ6選ついて解説された記事はこちら>>
jQueryの読み方は『ジェイクエリー』です。名前の由来は『 j =JavaScriptの頭文字』『Query = 手続き』といわれております。これらを読み取るとJavaScriptにおける様々な手続きのためのものと解釈することができます。またjQueryは『JSelect』という名称をつける予定であったというエピソードも開発者であるジョン・レシグ(John Resig)氏によって語られております。
jQueryはジョン・レシグ(John Resig)氏によって開発され2006年に『BarCamp NYC』にてリリースされました。JavaScriptのデフォルトスタンダードとして多くの方に親しまれるjQueryはこれまで数多くのバージョンアップを行っております。jQueryの人気が浸透したのが2010年後といわれております。2012年には非営利団体として新設された『jQuery Foundation』に移管されます。そして2016年にはその他の有力なJavaScript関連オープンソースプロジェクトと統合され『JS Foundation』となります。
年代 | バージョン | 備考 |
2006年 | jQuery 1.0 | a版及び最初の安定版リリース |
2009年 | jQuery 1.3 | Sizzle Selector Engine がコアに導入 |
2010年 | jQuery 1.4 | ・大幅なパフォーマンス ・実行速度改善 |
2011年 | jQuery 1.5 | ・Ajax関連モジュールのコード刷新 ・settingに新規プロパティを追加 |
2013年 | jQuery 2.0 | ・Internet Explorer 6, 7, 8 の非サポート ・ファイルサイズを12%現象 |
2016年 | jQuery 2.2.4 / 1.12.4 | 1系、2系の最終バージョン |
2016年 | jQuery 3.0 | ・DeferredのPromises/A+互換化 ・カスタムセレクタの高速化 ・Ajax機能を含まない軽量版の提供 |
2020年 | jQuery 3.5 |
jQueryでできることを見ていきましょう。
jQueryではAjax機能を使用し、外部ファイルの動的読み込みが可能です。AjaxとはJavaScriptとXMLを使って非同期にサーバとの間の通信を行うものであり、一部の情報をサーバーに送信し、それを受け取り反映させる仕組みを提供しているものです。代表的な例としてコーポレートサイトや食べログなどのサービスサイトにおいて地図情報掲載するためにGooglMapを掲載している場面を見かけたことがあると思いますがこのような場合にも使用されております。
jQueryではフェードイン/フェードアウトのアニメーションを実装することができます。特にリッチなメディアを実現する必要性の高い商品掲載型のWebサイトなどで使用されます。
jQueryではアコーディオンを実装することができます。PCサイトのグローバルナビゲーションやSPサイトのハンバーガーメニューなどカーソルを合わせると隠れていたメニューが表示されるような動作を見せることをアコーディオンと呼びます。
jQueryではリアルタイムで動く画像を実装することができます。jQueryでは秒単位で情報を取得し、最新版の画像を実装するということを実現できます。リアルタイムで視覚的な情報を提供する必要のある投票機能などの画像表示作成なども制作することが可能です。
jQueryではマウスオーバーを実装することができます。PCやスマートフォンなどの操作画面でマウスポインタを対象物に重ねた際に何かしらの変化をもたらす技術です。マウスポインタを外すと元通りになります。
jQuery以外のJavaScriptによるシステム開発に用いられる代表的なフレームワークを紹介させていただきます。
AngularJSとはJavaScriptに活用されるGoogle社によって開発されたオープンソースWebアプリケーションフレームワークです。2009年に誕生し、ミシュコ・へブリー(
Mishko Hebley)氏とアダム・アブロンズ(Adam Ablons)氏が主軸となって開発がなされました。特徴としてフルスタックなフレームワークと呼び声が高く、AngularJSが用意する機能を全て使いこなすことができればその他の技術は不要と言えるほど多機能で充実しております。AngularJSとAngularJS2が存在し、AngularJS2についてはGoogle社とマイクロソフト社の協力の下で作成されました。
Vue.jsとはJavaScriptに活用されるエヴァン・ユー(Evan You)氏によって開発されたオープンソースのオブジェクト指向Webアプリケーションフレームワークです。2014年2月に誕生し、GoogleにてAngularJSを使用した開発に携わっていたエヴァン・ユー氏がAngularJSをモデルに本当に好きな部分だけを抽出してVue.jsの作成を行ったという経緯があります。特徴として、
スクリプトタグを一行書くのみで使い始めることが出来る手軽さやAngularJSと比較して規模が小さい分学習コストが低いなどが挙げられます。
React.jsとはJavaScriptに活用されるジョーダン・ウォーク(Jordan Walk)氏によって開発されたオープンソースWebアプリケーションフレームワークです。2011年にFacebook社のプログラマンーであるジョーダン・ウォーク氏が同社のサービスであるFacebookにて使用し、2013年にオープンソース化されました。特徴としてUI/UXを意識した開発に向いていることやAndroidとiOSの両プラットフォームに対応していることなどが挙げられます。またReact.jsは数々の有名なサービスにて採用されております。代表的なものとしてFacebook、Instagram、Yahooなどが挙げられます。
jQueryを理解するために初心者でも分かる歴史、特徴、基礎知識などを簡単に解説させていただきました。jQueryを一言で表すと『JavaScriptライブラリのデファクトスタンダード』
です。jQueryついてこの記事に書かれている基本的なできることなどの最低限の内容は理解をしておくようにしましょう。