jqueryを使ってjavascript開発の効率化/台東区のWEB制作会社

jqueryを使ってjavascript開発の効率化：目次

• jqueryとライブラリ
• jqueryとjavascriptの違い

jqueryとライブラリ

jQuery（ジェイクエリー）は、javascriptをより効率的に構築するために開発されたjavascriptのライブラリです。2018年1月現在ではjavascriptのライブラリで最も使われているスタンダードなライブラリです。

javascriptに関してわからない方は是非、『身近な最新機器にも搭載されているjavascript』からご覧ください。

ライブラリとは

ライブラリとは汎用性のあるスクリプト（プログラム）を集めた素材集のようなものをイメージしていただければ大凡正解です。javascriptのみならず、他のスクリプト（プログラム）言語でもライブラリを使って作業をすることがあります。しかしながらjavascriptのライブラリは、PHPなど別の言語で使うことは出来ません。同様に他言語のライブラリをjavascriptで使うことも出来ません。

jqueryの他にも注目されているライブラリ

2018年現在、私たちが注目しているjavascriptライブラリは「React.js」と「AngularJS」です。

React.js

React.jsはフェイスブックが開発しているライブラリで、UIなど操作するパーツを作るのに優れています。フェイスブックはもちろん、Yahoo!などでも採用している信頼性のあるライブラリです。また、スマホアプリも開発することも出来る優れモノです。

AngularJS

AngularJSは、Googleと個人または企業のコミュニティにより開発されています。Googleが開発に携わっているので次世代主力のライブラリになりそうな予感があります。またAngularJSは公式にはライブラリではなくフレームワークと言われていますが、ここでは類似語としてとらえて問題ありません。

jqueryとjavascriptの違い

jqueryとjavascriptの違いは、かなり乱暴な言い方になりますが、jqueryは途中まで作ってあるjavascriptです。システム開発者でなければ、これくらいのイメージで大丈夫だと思います。もちろん、ほんとうは少し違いますが、ここでは割愛しておきます。

jqueryのメリット

ブラウザ間での挙動差異が無くなる

現在はブラウザ間でのjavascriptの挙動差異は少なくなりましたが、実行タイミングなど若干の差異があります。これらをjqueryが修正してくれます。また、NODE（タグ：要素）へのアクセスの記述も簡素化してくれます。この辺りがjqueryが使いやすい理由です。その他にもまだまだ沢山の簡素化されるメリットはありますが、挙げるとキリが無いので代表的なものを例としてあげさせていただきました。

NODE（タグ：要素）へのアクセスの比較と記述例

例えば以下のようにPタグをjavascriptとjquery双方で取得するとします。

HTML
<p id="hogeId">サンプル</p>
<p class="hogeClass">サンプル</p>

javascript
var hogeId = document.getElementById('hogeId');
var hogeClass = document.getElementsByClassName('hogeClass');

jquery
var hogeId = $('#hogeId');
var hogeClass = $('.hogeClass');

jqueryの方が記述が短く、スタイルシートに近い記述のため直感的に操作が出来ます。

さらに特定のクラス(hogeClass)を直接指定する場合などは、記述の差がかなり出ます。

HTML
<div id="hogeId">
　<p class="hogeClass">この部分を取得したい</p>
</div>
<div id="anotherId">
　<p class="hogeClass">こっちは必要ない</p>
</div>

javascript
var hogeClass = document.getElementById('hogeId').getElementsByClassName('hogeClass');

jquery
var hogeClass = $('#hogeId .hogeClass');

jqueryとjavascriptの記述の違いが一目瞭然ですね。このようにjqueryを利用すれば、javascriptの記述を短く直感的に出来るようになり、開発効率も格段に向上します。

jqueryのデメリット

あらかじめ数多くのプログラムが記述してあり、必要の無いモノまで取り込んでしまいます。そのためページの読み込み速度に影響が少なからずあります。

※本情報はページ公開時のものです。情報は常に更新され掲載内容と異なる場合がございます。