2020.08.31
JavaScriptとjQueryの違い
こんにちは、MaromaroのTakaです。
今回はJavaScriptとjQueryの違いについて記事にしました。
JavaScriptとは
JavaScriptはプログラミング言語であり、ユーザー側のWebブラウザと、
Webサイトまたはウェブサービスの相互間のやりとりを、円滑にするために使われております。
使い方は様々なシーンで使われますが、
主に下記のように使われると思います。
・HTMLコンテンツの変更
・HTMLコードそのものを変更
・CSSスタイルを変更
・HTMLコンテンツの表示非表示
他にも様々な使い方はありますが、
スタンダードなコーディングでは上記に挙げたような使い方になると思います。
JavaScriptはHTML上でおこないたい挙動を、
CSSで実装が難しいもしくは出来ない場面で多用されます。
jQueryとは
次にjQueryですが、これも多くのコーディングされる方が目にする単語かと思います。
よく勘違いされますが、こちらはプログラミング言語ではなくライブラリと呼ばれるプログラムの集合体になっています。
実際の中身はJavaScriptで構成されたプログラムでしかありません。
簡単に言えば jQueryはJavaScriptを楽に記述できるようにしたものです。
例えば下記のようなidがtestのdiv要素のclass名を取り出してログに出す
JavaScriptのコードがあったとして
var target = document.getElementById('test') console.log(target.getAttribute('class'))jQueryで書くと下記になります。
console.log($('#test').attr('class'));上記の通り、jQueryで書くと非常に簡単にコードを実装することができます。
さらにjQueryにはプラグインというものがありまして、
自分で制作するととても時間がかかるものが、
一瞬で実装できるものとなっております。実装も簡単でCDNを読み込むか、
公式等からファイル一式をダウンロードして配置し、
読み込むだけとなっております。ちなみに私がよく使うのは下記のものです。
Slick
https://kenwheeler.github.io/slick/
「slick」はサイト上でよく見かけるカルーセルスライダーを簡単に実装できるプラグインになります。
動作が軽く、IE8以上のブラウザで動作することからクロスブラウザ対応をしております。
オプションも豊富なため色々な状況に対応できる点もとても使い勝手が良いです。Drawer
http://git.blivesta.com/drawer/
「Drawer」はレスポンシブ対応時のスマホ表示の際によく利用されているドロワーメニューを簡単に実装できるプラグインです。
利用する際には、「jQuery」だけでなく「iScroll」とよばれる別のjQueryプラグインも一緒に利用する必要があります。matchHeight
https://brm.io/jquery-match-height/
「matchHeight」は横並びの要素の高さを揃えられる機能を簡単に実装できるプラグインになります。
Flexが使えない等の場面で大活躍します。imgLiquid
https://github.com/karacas/imgLiquid
画像をHTMLページ内に表示する場合、表示したいエリアより画像サイズが大きい場合や、
縦横比（アスペクト比）がボックスと一致しないために画像が伸縮されて表示されたりしてしまいます。
このプラグインを使えば、ボックス内の画像をリサイズして表示してくれるので便利です。
jQueryは大変便利なものなので、
使えるようになるとコーディングがさらに楽になります。
（jQueryを開発してくれた方には頭が上がりませんね…）以上、takaでした。
