
こんにちは!
「初心者のためのWebデザイナー講座 good-f DESIGN」を運営しているユウです!
Webデザイナーってどんな仕事内容?これからWebデザイナーに挑戦したい!という方に向けて、僕が経験したノウハウやWebの楽しさをお伝えできればと思っています!
今回は、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を使って簡単なアニメーションを作ってみたいと思います。

最後までお読みいただきありがとうございました!
ブログ以外にもTwitter、Facebook、YouTube、LINEもやっていますので、見ていただけたら嬉しいです!
何か気になること等あればお気軽にコメントください。
コメント