はじめに
UIを整える際に「jQuery UI」を使用している記事を多く見ました。
実装する前に概要を理解しておく目的で、今回はjQueryの概要を記します。
jQueryとは
よく言われている言い方が「JavaScriptのライブラリ」である。
この「ライブラリ」とは、まとまったプログラムをあらかじめ作ってくれているファイルのこと。
つまりjQueryとは、JavaScriptをより簡単に記述できるように設計された拡張機能のようなもの。
メリット
・どんなブラウザでも使える
現時点ではまだ自分はあまり実感できませんが、ここがjQueryが使われる最大の理由にあたるようです。
ブラウザには、「IE」、「Edge」、「Google Chrome」、「Safari」など様々な種類がありますが、
実はそれぞれ微妙に仕様が違うため、同じJavaScriptのコードでも異なる挙動になってしまうものがある。
そこでjQueryでは、どのブラウザでも同じコードで動作するようにしてくれるようになる。
・プラグインで拡張できる
こちらのメリットが今回自分がjQueryを調べるに至った所以です。
jQueryをベースに開発されたライブラリが多数提供されていて、簡単に独自の機能を追加できる。
代表的なライブラリとしては「jQuery UI」「jQuery Mobile」などがある。
読み込み方
以下の文をhtmlファイル内に記述する。
<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
min.jsとは
jQueryファイルをダウンロードすると、「jquery.js」「jquery.min.js」と2種類あったが、
結論これはどちらもまったく同じ動作をする。
「min.js」は圧縮版（minified）という意味で、改行・コメント・インデントなどを省略している。
これによりファイルの容量を小さくして読み込み時間を高速化している。
では「jquery.js」は非圧縮版で、開発者がコードを見ながらデバッグしやすくする意図がある。
要は本番の使用時は「min.js」を使用するのが一般的である。
コードの書き方
基本構文は以下の通り。
$(“セレクタ”).メソッド(“パラメータ[引数]”);
セレクタで「どこの」、メソッドで「何を」、パラメーターで「どうする」、を決める。
例えば、「h1要素のを文字色を赤にする」場合。
$('h1').css('’color,'red');
セレクタに関して、
id指定の際は＃を、class名指定の際は.をつける。
（例）
id="tBox → $("#tBox);
class="font-main" → $(".font-main");
さいごにJavaScriptとjQueryの使い分け
上記で挙げた通り、複数のブラウザでの使用が予想される場合はjQueryが便利である。
また、jQueryは多数のプラグインがあるので、それらを導入するだけで機能を追加できるという点がある。
しかし難点として処理速度は落ちるため、処理能力でいえばJavaScriptの方が断然速い。
まとめると、大規模のアプリであれば処理能力に重きを置いたJavaScript。
小~中規模程度のアプリであればコスパの良いjQueryが良いと言えそうである。