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

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

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

WordPress 導入で初期費用を抑え運営注力

ホームページ・スタートアップは初期費用を抑えてホームページ運営に注力したい方向けホームページ入門パッケージです。ホームページ運営の方法がよくわからない、一緒に戦略を考えてくれるブレーンがいないなどお悩みのホームページ担当者にもおすすめのサービスです。

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のデメリット

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

jqueryを使ってjavascript開発の効率化のまとめ

jqueryを使ってjavascript開発を効率化いかがでしたでしょうか？これまでのHTMLやCSSと違いjavascriptは少し難解な言語です。開発に携わることがなければ、深く理解するよりも大枠をイメージ出来ることの方が重要です。その上で何が必要か？どのくらいの工数がかかるのか？を制作会社と一緒に考えていくと、スムーズにホームページのリニューアルに取り組めるかと思います。

ホームページのリニューアルに関するご相談は、お気軽にお問い合わせください。

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