jQueryとは?JavaScriptライブラリの『革命児』

jQueryとは?JavaScriptライブラリの『革命児』

 

 

たかやん
このjQueryって何なの?

 

 

にゃんこ先生
あー、それはJavaScriptの一種だよ!

 

 

たかやん
へぇー。独立した言語ではないんだね。

 

 

にゃんこ先生
そうだね。ライブラリと呼ばれるものだよ。

 

 

WEBページを作成するためのプログラミング言語の一つに『jQuery』というものがあります。

しかしこのjQuery厳密にいえば、独立したプログラミング言語ではありません。

 

その正体は、ライブラリという機能なのです。

・ライブラリってなんだ?

・そもそもjQueryってなに?

 

と思ったあなたに向けて、今回はjQueryがどういったモノなのか?ということをまとめました。

 

 

こんな人におススメ① jQueryについて知りたい人

② ライブラリについて知りたい人

 

jQueryとは?JavaScriptライブラリの『革命児』

 

 

まずは、jQueryの正体について説明します。

 

jQueryとは?JavaScriptの一種であり、使い勝手をよくしたライブラリ

 

というものです。

 

そうなんです。jQueryは一つの独立した言語ではなく、JavaScriptの中の1つというのが答えです。

まずjQueryを知るためには、そもそも『ライブラリ』というものを知らないといけません。

 

 

プログラミングにおけるライブラリとは?

ライブラリとは?ある程度まとまったプログラムをあらかじめ作ってくれているファイルのこと

 

こういうことをやりたいなぁ・・・と思っていても、知識とかスキルがなくてその機能が実装できないことありますよね。

その悩みを解決してくれるのがライブラリです。このライブラリには、

 

ここがポイント!・やりたいことのひな型を用意してくれている

・より簡単にプログラムが組める

・拡張性が高い

 

といった特徴があります。

一般的にプログラミングといえば、作りたいものに対して設計図を自分で書き、材料を集めるところから組み立てまで、すべて自分でやらないといけません。

 

しかしライブラリは、この材料集めをすべてやってくれた状態でユーザーに提供されるので、後はプラモデルを組み立てるみたいに材料をチョイスするだけでプログラムが組めてしまうという優れものです。

 

 

jQueryはJavaScriptの一部【機能紹介】

 

 

ライブラリについてわかったところで、jQueryの代表的な機能について見ていきましょう。

できることは大きく分けて4つです。

 

① DOM
② アニメーション
③ Ajax
④ その他、便利機能

 

① DOM

DOMとは『Document Object Model』の略ことで、簡単にいうとHTMLやXMLを操作するための仕様を指します。

jQueryはこの仕様にのっとった上で、要素を簡単に柔軟に操作する方法を、用意してくれています。

 

この方法を使うことで、Webページなどの構成要素とそれらの配置や見栄えなどを定めた属性情報などを、参照・制御する手法をあらかじめ設定しておいてくれるわけです。

 

このDOMを用いた機能はWebブラウザなどに実装されており、ページ上にJavaScriptなどで記述されたコードからページ内の各要素を読み取ったり、内容や設定の変更・要素の追加や削除などを行う標準的な手段として用いられています。

 

② アニメーション

jQueryはJavaScriptの一つなので、もちろんWebページに動きをつけることができます。

 

HTML&CSSなどでもアニメーションはできますが、できる範囲に制限があるわけです。

それに対してjQueryはどのブラウザでも動くだけでなく、機能のひとつであるタイマーを駆使したアニメーションを手軽に行う方法を用意してくれています。

 

カーソルを動かしたときに画像がダイナミックに動いたり、ポップアップメニューが作れたりすることができます。

 

 

③ Ajax

Ajaxとは?JavaScriptとXMLを使って非同期にサーバとの間の通信を行うこと

Ajaxの『A』はAsynchronousの略であり、非同期を指します。そして『ja』はJavaScriptを、『x』はXMLをそれぞれ表します。

 

非同期通信とは同期通信と違い、全ての情報をサーバーから取ってくるのではなく、情報の一部をサーバーから取ってくる方法です。

 

食べログやtwitterのページをイメージするとわかりやすいかと思います。

 

例えばページ内にあるGoogleMapを開こうとしたとき、ファイルを読み込みこんでいる時に画面全体が真っ白になることはありませんよね?

 

これは、Ajaxを使って実現しているのです。

 

このページの裏側では、APIをJavaScriptを使って実装し、DOMでXMLを操作してWebページ上に展開していくわけです。

 

ちなみに現在は『Json』というJavaScriptのフォーマットを用いることが主流となっています。

 

④ その他、便利機能

その他にも、さまざまな便利機能がjQueryには用意されています。その一つが『プラグイン』です。

 

プラグインという機能は、WordPressを扱ったことがある人ならば一度は聞いたことがあるでしょう。

このプラグインは機能を拡張するツールのことを指します。

 

言うなればカスタムパーツみたいなもので、自分のやりたいことに対してサポートしてくれるわけです。

機能を拡張すれば、動画や音声の再生をアシストしてくれたり、普通は開けないファイルをそのプラグインを通して開けるようになったりと、できることは様々です。

 

jQuery公式からもプラグインが出ているので、探してみると面白いかもしれませんね。

 

なぜjqueryは有名なのか?

 

 

jQueryはJavaScriptライブラリの中でも、とても有名で、全世界の70%を超えるWebサイトで採用されています。

 

これだけ有名なのには理由があります。

 

① 直感的にプログラムが組める

② コードが簡略化されている

③ どんなブラウザでも動く

 

① 直感的にプログラムが組める

まず一つ目に、直感的にプログラムを組めるという点があります。

最近のプログラム言語は、この傾向が強いのですが、jQueryも当てはまります。

 

『A』を点滅させる!

 

といったように、『対象となるモノ』に対して『どうするか』の指示を与えるだけで動いてくれるのです。

 

② コードが簡略化されている

二つ目に、コードが簡略されていることです。

JavaScriptだと10行ほど書かないといけないコードも、jQueryなら2行ほどで済んでしまいます。

 

プログラムを組む時の時間の短縮になるだけでなく、プログラム自体が短いというということはファイルの重さが軽くなるので、動作スピードのアップにも一役買っています。

 

③ どんなブラウザでも動く

そして最後に、どんなプログラムでも動くという点があります。

これが、Webページのシェア率70%をたたき出している大きな原因でもあります。

 

GoogleでもYahooでもBingでも基本はなんでも動きます。

どんな場面でも動くというのは、エンジニアにとって心強い味方というわけです。

 

 

まとめ

 

 

jQueryについてまとめます。

 

・JavaScriptのライブラリの一つ
・大きく分けて4つの機能がついている
・使い勝手から世界中のWebページで採用されている

 

jQueryの使い勝手は、ずば抜けています。

簡単にコードをかけるだけじゃなく、やりたいことをサポートするプラグインという機能も充実しています。

 

しかしあくまでも、JavaScriptをさらに良くしたものであり別言語ではないので、JavaScriptをある程度勉強・理解したうえで学習するといいです。

 

とは言っても便利なのは確かなので、タイミングをみて学んでおいて損はないでしょう!

この情報が皆さんにとって何かしら役に立てば幸いです。

 

ではでは今回はこの辺であでゆ(‘ω’)/

 

プログラミングカテゴリの最新記事