【JavaScript実践 #2】jQueryとは？jQueryの概要説明

今回は、jQueryの概要説明をします。
jQueryは1番有名なJavaScriptのライブラリで、多くの人が利用しています。
jQueryの基礎を覚えてしまえば、ある程度のことは出来るようになるので、頑張って習得しましょう。

YouTubeにもアップしていますので、見ていただけたら嬉しいです！

jQueryとは？

jQueryとは、冒頭でも書いた通り、1番有名なJavaScriptのライブラリで、JavaScriptのコードを簡単に記述することができるものです。

ライブラリとは、htmlから読み込みをするだけで利用することができる、とても便利なものです。
しかも、jQueryは、MITライセンスというもので、無料で利用することができます。

本来、jQueryは使わずに、純粋なJavaScriptのコードで記述するのが正しいのですが、jQueryの普及により、jQueryで記述している人の方が多く感じるくらいです。

純粋なJavaScriptのコードに比べると、jQueryのコードは簡単で理解しやすいので、最初はjQueryを覚えることをおすすめします。

jQueryのデメリット

とても便利なjQueryですが、デメリットもありますのでご紹介します。

処理が遅くなる場合がある

jQueryの他に違うライブラリを読み込むと、処理が遅くなってしまう場合があります。
数個であれば問題ないですが、大規模サイトの場合は、検証してから導入するか決めましょう。

競合する場合がある

こちらも、違うライブラリを読み込むと競合してしまう場合があり、動かなかったりエラーが出てしまうことがあります。
競合してしまった場合は、JavaScriptで記述する等、何かしらの方法が必要になります。

JavaScript本来のコードが覚えられない

jQueryは簡単に記述ができる分、JavaScript本来のコードが覚えられなくなってしまいます。
大規模なサイト、システムが複雑なサイト等、jQueryを使えないサイトもあるので、こういったサイトを制作することが難しくなってしまいます。

本来のコードを覚えてから、jQueryを使うのが理想ですが、最初はかなり大変です。
多くのサイトは、jQueryが書ければ問題ないので、jQueryから覚えてしまって良いと思います。

JavaScriptをマスターしたいという方は、ぜひJavaScriptから覚えてください。

jQueryの読み込み方法

jQueryの読み込みはとても簡単です。
headタグに以下の1行を追加します。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

バージョンはたくさんあありますが、基本的に最新のバージョンを読み込めば問題ありません。

jQueryの書き方

では、jQueryの書き方をご紹介します。
分かりやすいようにJavaScriptで書く場合とあわせて紹介したいと思います。

「おはよう」を「こんにちは」に書き換えるコードです。

//html
<div id="hoge">おはよう</div>

// JavaScript
var hoge = document.getElementById('hoge');
hoge.innerHTML = 'こんにちは';

// jQuery
$('#hoge').html('こんにちは');

いかがでしょうか？
jQueryの方が圧倒的にコード量が少なく、簡単かと思います。

このように、JavaScriptのコードを省略して書くことができるので、覚えやすく習得しやすいです。

おすすめの書籍

jQueryのおすすめ書籍です。
ボリュームもそれなりにあって、これを覚えれば大抵のサイトで困ることはありません。

ただ、JavaScriptを覚えたいという方は、以前ご紹介している記事を参考にしてください。

→【JavaScript】JavaScriptの入門におすすめな書籍をご紹介！

最後に

以上、jQueryの概要説明でした。

JavaScriptを使いこなせる人からすると、「jQueryなんて使わない方がいいよ」「あんなの誰でもできる」など言う方もいますが、やっぱり便利でjQueryを使った方が良い場面が多々あります。

jQueryを覚えてから本格的にJavaScriptを覚えるのも全然アリなので、まずは覚えやすいjQueryから覚えることをおすすめします。

次回は、jQueryを使って簡単なアニメーションを作ってみたいと思います。