【JavaScriptライブラリ】jQueryって何?

画像

ParaLuxにインターンシップ研修中の近藤です。
今回は、2020/12/18でのミーティングで学んだJavaScriptライブラリであるjQueryについて紹介します。

内容

  1. そもそもライブラリって何?
  2. 人気のJavaSriptライブラリ4選
  3. jQueryを使用するメリットとデメリット

1.そもそもライブラリって何?

プログラミングを学習している方だと一度は聞いたことがある「ライブラリ」という言葉。そもそも「ライブラリ」とは何なのでしょうか?

ライブラリとは?

「library」は「図書館」という意味ですが、IT用語では「データ(ファイル)の集まり」という意味で使われます。ライブラリは再利用可能な機能・関数をひとまとまりにして提供するものです。言い換えればプログラムの部品を集めたものがライブラリで、プログラマは使いたい部品(機能)を選んで使うものと考えれば理解しやすいかと思います。

2.人気のJavaScriptライブラリ4選

JavaScriptライブラリには様々なライブラリがあります。今回は、その中でも人気なライブラリを4つを紹介したいと思います。

  1. jQuery
  2. React(React.js)
  3. Riot.js
  4. Node.js

1.jQuery

jQueryとは、JavaScriptでできることを、より簡単な記法で実現できように設計されたJavaScriptライブラリです。学習コストが低いため、プログラミングが苦手な方でも扱いやすいでしょう。

2.React(React.js)

React(リアクト)は、Facebook社が開発したライブラリです。Reactの特徴は、UI(ユーザーインターフェース)を構築するためのライブラリである点です。軽量で仮想DOM(HTMLの部品をDOMという)が高速であるためパフォーマンスがよく、主にWebアプリケーションの開発に使われています。

3.Riot.js

フロントエンドの開発で人気を集めているUIライブラリです。Reactに似たライブラリで、軽量で学習コストが低い点が特徴です。

4.Node.js

非同期型のイベント駆動モデルを採用しているJavaScriptライブラリです。サーバサイドJavaScriptで、軽量である点、大量の接続を同時に処理できる点が特徴です。

3.jQueryを使用するメリットとデメリット

ライブラリを使用することで少ないコードの量でコーディングすることが出来ます。しかし、そこにはメリットとデメリットが存在します。今回はjQueryライブラリのメリットとデメリットを紹介します。

メリット

  1. ブラウザの違いを意識せずに済む
  2. HTMLのDOM操作が簡単にできる
1.ブラウザの違いを意識せずに済む

JavaScriptは、各ブラウザに搭載されたエンジンにより実行されます。そのため、

  • Chrome
  • FireFox
  • InternetExproler
  • Safari

等で、それぞれ微妙に対応可能なメソッドが違ったり、記法が異なります。
しかし、jQueryはこのような膨大なブラウザごとの記述差異を、自動的に吸収してくれるため、ユーザーはほとんどブラウザの違いを意識せずにプログラミングができます。

2.HTMLのDOM操作が簡単できる
DOMとは?
HTMLの部品(pタグやhタグ)のことです。

HTMLのDOM(部品)をHTMLファイルから検索して内容を取得や変更することが可能です。

<!--HTML-->
<p id="text">ごはん</p>
//jQuery
$("#text").text(); //pの内容を取得
$("#text").text("パン");//pの内容を変更
//JavaScript
document.getElementById("text").value; //pの内容を取得
document.getElementById("text").textContent = "パン";//pの内容を変更

2つのコードを比べて分かるようにjQueryを使用することで、より簡単にDOMを操作することができます。

デメリット

ライブラリを読み込むためページ更新が遅いことです。jQueryを利用する為には、開発しているHTMLの中にjQueryを読み込む必要があります。この読み込んだjQueryの中には、多くの関数が用意されているため、読み込むのに時間がかかります。

最後に

今回は、JavaScriptライブラリについて書いてきました。JavaScript初学者のため、足りない部分もありますが、次回もよろしくお願いします。