2024.01.09
この記事を書いた人
だいち
JavaScriptって難しいし、どこまで勉強したらいいのかわからないと思っている方は多いのではないでしょうか。
Webデザイナー志望でコーディングを勉強している方も、jQueryは勉強しておくべきです。
なぜなら、jQueryは現在あるWebサイトで最も多く使用されているJavaScriptライブラリで、UIデザイン実装の為に多く採用されているからです。
この記事では、jQueryとはそもそもなんなのか？Webデザイナーを目指す方が知っておくべきポイントを解説します。
この記事を読み終えると、これから学習する方もjQueryを知っておくべき理由が分かるようになります。
jQueryとは?
jQueryとは、Webブラウザ上で動作するJavaScriptライブラリの一つ。ブラウザの種類に依らず簡潔な記述で豊富な機能を活用することができる。オープンソースとして公開・配布されている。
jQueryとは – IT用語辞典 e-Words
Webサイトの装飾（ユーザー操作によって変化するアニメーションなど）などを簡単な記述で実装できる機能が詰まったもので、Web制作でコーディングをするなら抑えておきたいスキルの一つです。
具体的な使い方、書き方の基礎はこちらの記事で解説しています。
たまにjQueryを一つの言語と勘違いされている方もいますが、あくまで言語としてはJavaScriptです。
昨今のWebサイトはJavaScriptで動きをつけることがほぼ必須と言ってもいいくらい使われていて、その「JavaScriptを書くために、jQueryという機能（ライブラリ）を使っている」という解釈が必要です。
ライブラリとは？
上で「ライブラリ」という言葉が出てきました。
そのままの意味だと図書館という意味ですが、ITの分野ではプログラムコードをまとめて部品化しているもの、という意味になります。
出来上がっている汎用的なコードを、部品化してまとめたものが書籍で、その書籍が集約されている図書館がjQueryというイメージです。
同じアニメーションの実装でも、JavaScriptで全てコードを書くということは、本の中身を一から書いていくようなイメージで、ライブラリを使うということは、2、3冊組み合わせだけで完結する本を図書館から取り出す、といったイメージです。
要するに実行まで簡単になる、ということですね。
ライブラリは他にも様々ありますが、その中でもjQueryは世界標準で最も普及してきたライブラリです。
jQueryの特徴
ここではjQueryが優れている機能的な特徴を挙げてみます。
DOM操作が簡単に扱える
DOM（ドム）とは「Document Object Model」の略で、HTMLやXMLを取り扱うためのAPIです。
説明し出すと長くなるので詳細は割愛しますが、ブラウザがソースコード（HTML）を解釈した後に生成するものが「DOM」です。
JavaScriptなどのプログラミング言語は、ソースコードではなく、このDOMに対して操作を加えます。
この時、jQueryなら簡単な記述でDOM操作ができる、ということです。
例えばボタン要素をクリックするという内容も、JavaScriptでは以下のように記述します。
const btn = document.querySelector(".button");
btn.addEventListener("click", function(){
// ここに処理内容を書く
});上記の記述をjQueryを使用して書くと以下の記述になります。
$('.button').on('click',function(){
// ここに処理内容を書く
});このようにjQueryを使用すると、シンプルな記述で実現できます。
$()という記述だけで部品化された本を呼び出せる、というのがjQueryというライブラリならではの特徴です。
また、Webサイトのコーディングをする時によく使うjQueryメソッドは、殆どがこのDOM操作をしている、と考えてもいいです。
Ajax操作が簡単に扱える
Ajax（エイジャックス）とは「Asynchronous JavaScript + XML」の略で、ウェブブラウザ内で非同期通信を行いながらインターフェイスの構築を行うプログラミング手法です。
Googleマップの動きを例に挙げてみます。
ページ外から新しい情報を表示する時やクリックした時など、ページの読み込み（ロード）を行ってないことがわかると思います。これがAjaxの技術、非同期通信です。
一般的なWebサイトでページを切り替える場合は、一度サーバーに情報を同期させる同期通信となるため、ロード時に一瞬白い画面になります。
jQueryにはcss()やtoggle()といった様々なメソッドがありますが、その中に「ajaxメソッド」というものもあります。
下は一例ですがこんな感じの文法で非同期通信を実装できます。
$('#button').click(function(){
$.ajax({
url: "test.html",
dataType: "html",
cache: false,
success: function(data, textStatus){
// 成功したとき
},
error: function(xhr, textStatus, errorThrown){
// 失敗したとき
}
});
});Webデザイナーの業務範囲でゴリゴリとプログラムを書くことはあまり多く無いかと思いますが、問い合わせフォーム送信後の完了画面切り替えに使われたりもしますので、こういう技術がある、という程度で頭には入れておきましょう。
jQueryを使うメリットとデメリット
jQueryには使う際のメリットとデメリットがあるのでまとめています。
jQueryを使うメリット
- ①簡単な記述でアニメーションが実装できる
- ②学習コストが低い
- ③トラブルシューティングに関する情報が豊富
これは実装者目線でのメリットになりますが、まず一番はWebサイトなどのアニメーション実装が容易なことです。
クリックしたらスライドがスクロールする、読み込んだらローディング画面が表示されるなど、動作（イベント）に対して実行したい表示（メソッド）を実現するために、内容次第では２～３行コードで実現できることも多いです。
また、jQueryは使用実績が多いため、様々な学習コンテンツやトラブルに対応する情報も豊富にあります。
Webデザイン初学者の方でも情報を取り入れやすく、かつ一般的に必要とされる動きのあるWebサイトを手っ取り早く制作できるようなる、という点が大きいです。
生のJavaScriptや新しい技術を使っても同じようなWebサイトは作成できますが、jQueryを使っても結果（見た目や挙動）が変わらないのであれば、学習コストが比較的低いjQueryを使うメリットは十分にあると思います。
jQueryを使うデメリット
- ①サイトの読み込み速度が遅くなる
- ②代替技術の台頭に伴い全体的な使用頻度の低下が予想される
まず読み込み速度については素のJavaScript（Vanilla JSと言ったりもする）と比べた場合です。
jQueryはファイルを直接読み込むか、ネット上からCDNとして読み込んで使う為、その読み込み分だけ時間はかかります。
10ページ以下の小～中規模サイトであれば気にする程ではないかと思いますが、ページ数の多い大規模サイトの場合などは別の技術を使用して実装した方が良いと言われています。
図書館が広いと本を探すのも時間がかかりますよね？やりたいことが明確なら、パッケージ化された一冊の本を探すより、自分で必要な分だけ書いてしまった方が早い、というイメージです。
また、JavaScriptなどのプログラミング言語には、フレームワークというものも存在します。代表的なものだとReact.jsやVue.jsなどです。
ライブラリが部品であれば、フレームワークは骨組みと言われます。先程の例とはズレますが、フレームワークは建売されている戸建そのもので、ライブラリは中に充実させる家電や家具、といったイメージです。（ちょっと雑な例ですが）
Webサイトやサービス制作についても、特にフロントエンドの領域ではこのフレームワークを使用することが多く、どんどん最新の技術が取り入れられていくため、技術自体のメンテナンス性も高いです。逆にjQueryは古い技術と言われ、真新しい更新はされない傾向にあります。
ちなみに、HTML・CSS・JavaScriptを統合した有名なフレームワークにBootstrapがありますが、2020年6月新しく更新されたBootstrap 5ではjQueryが取り除かれています。
jQueryは学んだ方がいいのか？
結論としては学んだ方がいいです。
Webデザイナーや、コーダー、マークアップエンジニアとして、一般的なWebサイトをコーディングするくらいであればjQueryのスキルで十分間に合います。
流行りのフレームワークから勉強しても勿論いいですが、学習コストを考えるとまずはjQueryを使えるようになった後でもいいのではないかと思います。
また、実案件をこなす際に、既存のWebサイトの改修・修正という仕事があったとして、今ある既存のWebサイトの多くにjQueryが取り入れられていることを考えると、その知識は持っておくに越したことはありません。
未だ多くのWebサイトで採用されるjQuery
参考サイトです。
jQueryとBootstrap増加 – 12月Webサイト向けJavaScriptライブラリシェア | マイナビニュース
2019年12月時点の情報ですが、JavaScriptが使用されているWebサイトの内、まだ多く（約50％）のWebサイトにjQueryが使用されています。
現時点での使用率を考慮しても、現段階でjQuery学ぶ価値無し、とバッサリ判断するのは勿体ないと思います。
フロントエンドエンジニアとして、Webサービスやアプリケーションなど、様々な実装をするエンジニアを目指す方ならまだしも、デザインの領域で活躍したいと考えている方はまずjQueryを学んでおきましょう。
jQueryの学習方法
最後にオススメの学習方法を紹介します。
【書籍】jQuery最高の教科書
有名な教材ですが、jQueryについて体系的に解説されている有名な書籍です。一からじっくり学びたい方にオススメできます。
【オンライン教材】Progate
[linkcard url=”https://prog-8.com/”]
プログラミング勉強といえばProgate、と言っても過言ではないくらい有名なオンライン教材です。
jQueryの講座もあり、全部やろうとすると有料になりますが、分かりやすいスライドで基礎が学べます。
汎用的なデザインとコードの書き方を一通り知ることができるので、月額を払って1か月やってみる価値はあると思います。
【オンライン教材】Udemy
>> 世界最大級のオンライン学習プラットフォーム Udemy有料ですが豊富な動画教材が揃っています。「jQuery」などで検索すると沢山候補が出てきます。
通常期は高額な教材も多いですが、ほぼ毎月セールを行っていて1500円〜2000円程度まで下がるのでそのタイミングで購入しましょう。
【オンライン教材】PENGIN BLOG
当サイトです！！
jQueryの基礎知識や、実践的なUIデザインのコーディング方法をコード付きで紹介しています。
