こんにちは。Webエンジニアの雅です！
HTMLやCSSなどのマークアップの勉強が終わって、さあ次は動くWebサイトを作るぞ！ってなった時にネットサーフィンをしていると「jQueryがおすすめだよ！」という記事をみたことはありませんか？
ってなりますよね。
そこで今回はプログラミング初心者向けにjQueryとは何か、その魅力についてを専門的な用語は一切使用せず解説していきます！！
これからjQueryを勉強しようとしている人やHTMLやCSSを勉強し終わって次何しようか迷っている人はこの記事をぜひ参考にしてみてください！！
目次
そもそもjQueryって何？？
jQueryはJavaScriptを簡単にしたもの
jQueryを一言でかつプログラミング初心者向けに紹介するのであれば、
です。
正確にはJavaScriptを簡単に書けるように開発されたライブラリと呼ばれる類になるのですが、細かいことはさておき、Webサイトで最も多く使用されるプログラミング言語であるJavaScriptを簡単にしたものと覚えておいてください。
jQueryは2006年にリリースされたのですが、それまではJavaScriptというプログラミング言語に卓越した人しか開発できなかった動的なWebサイトが、jQueryの登場で初心者でも簡単に動的なWebサイトが作れるようになりました。
これにより、従来はハードだと捉えられていたWebサイト開発のハードルがグッと下がり、プログラミングに慣れていない人でも少しの勉強で高クオリティのサイトが作れるようになりました。
jQueryでできること
ではこのjQueryで何ができるかというと、その大きな特徴は
という特徴が挙げられます。
これ関連の記事を見ているとよくDOMという言葉が出てきますが、要はHTML文書内のタグやクラス名、CSSなどをまとめた言葉です。
DOMは詳しくいうとそれだけで本が掛けてしまうレベルでとても奥が深いものなので、とりあえずは上のように概要だけ抑えておきましょう。
さて、jQueryではこのDOMを簡単に操作できるという特徴ですが、これでも今一つピンときていないかもしれません。
なぜDOMを操作するのかというと、そもそも動くWebサイトの原理として、JavaScriptなどのプログラミング言語でHTML文書のタグやCSSを操作してあげることによって、「動く」ことを実現しています。
jQueryはこのタグやCSSの操作を簡単に行うことができ、通常JavaScriptで10行以上かかってしまうコードをたったの1行で実装できるなど、その書き方の容易さが人気の一つとなっています。
だったらJavaScriptはいらないんじゃないの？
jQueryがJavaScriptを簡単にしたものであれば、それってもうJavaScriptいらないんじゃないの？？と思った人もいるかもしれません。
答えはノーです。
いくらjQueryがすごく便利でもJavaScriptがなくなることはありません。
jQueryを使用すればある程度のアニメーションは簡単に実装できますが、それでも限界があります。
細かいアニメーションの調整や、複雑なアニメーションの実装はjQueryでロジックを考えるよりもJavaScriptで実装した方がやりやすいということも多くあります。
またjQueryはWebサイトのフロントエンド開発に特化したものですが、JavaScriptはこのフロントエンドだけでなく、nodeというモジュールを使用すればサーバー側の開発ができるなど、非常に用途が広くなっています。
jQueryはあくまでWebサイトのフロントエンドに限定されるので、JavaScriptの用途のほんの一部にしかなりません。
ですので、jQueryがいくら便利でもJavaScriptがいらなくなったわけではありません！！
jQueryとJavaScriptのプログラムを比較してみる
それでは実際にjQueryとJavaScriptで同一のプログラムを組んで、その実装の簡単さを実感してみましょう！！
今回は以下のHTMLを使用します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> </head> <body> <div id="name">山田太郎</div> <script src="script.js"></script> </body> </html> |
JavaScriptのコード、またはjQueryのコードは全てscript.jsというファイルに書くものとします。
それでは、jQueryとJavaScriptでこのHTML文書内の「山田太郎」という文字の色のCSSをプログラムでいじって赤色に変更してみます。
まずはJavaScriptの場合、
|
1 2 3 |
// JavaScript var idName = document.getElementById("name"); idName.style.color = "red"; |
JavaScriptでは、まず「document.getElementById」というコードでHTML内のidを取得します。(今回はこれらのコードの細かい説明は省きます。)
次に、「style.color」で文字色を赤色(red)に変更しています。
続いてこれと同じことをjQueryで書くとどうなるかというと、
|
1 2 |
// jQuery $("#name").css({ "color": "red" }); |
なんと、同じことをこんなに短くしかも1行で実装できちゃうんです！！
HTML内のidの取得も、CSSを記入する時のセレクタと同じ書き方の「#id名」でダイレクトに取得できてしまうという大きな利点があります。
このような利点があるため、ややこしいDOMの考え方をあまり理解しなくてもjQueryで簡単に実装できてしまうんです！！
どうでしょうか？
こんな簡単に書けるのであればちょっとjQueryを書いてみようかなと思ったのではないでしょうか？？
次に、jQueryの導入方法を解説します。
jqueryを使ってクラスを操作する方法を徹底解説
【初心者必見！】jQueryが動作しないときの原因と対処法5選
jQueryの導入方法
ここでは手っ取り早くjQueryを読み込ませる方法を一つ紹介します。
お手持ちのテキストエディタを開いて一緒に実装してみましょう。
HTML文書のheadタグ内にjQueryをコピペする
jQueryの導入は簡単で、HTML文書のheadタグ内にjQueryをコピペするだけで簡単に導入できます。
head内に以下のコードを貼り付けましょう。
|
1 |
<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script> |
これで導入完了です。
あとは任意の「.js」ファイルか、HTML文書内のscriptタグ内にjQueryのプログラムを書くだけです。
jQueryの開始のおまじない(コード)を記述する
jQueryのプログラムを書くためには、まずはじめに必ず唱えるおまじないのようなコードを書く必要があります。
おまじないは以下の2つのどちらかを書きます。
|
1 2 3 4 5 6 |
$(function(){ // ここからjQueryのプログラムを書く //ここまで }); |
|
1 2 3 4 5 6 |
$( document ).ready(function() { // ここからjQueryのプログラムを書く //ここまで }); |
筆者は前者のコードを使用しています。
どちらでも実装できますが、後者のコードのショートコードである前者を使用する方がメジャーだと思います。
JavaScript初心者のためのjQueryの$を分かりやすく解説！jQueryを作ってみよう！
まとめ
いかがでしたか？
今回は初心者向けにjQueryの魅力やその用途、導入方法を中心に解説していきました。
この記事を読んだあなたは今すぐにでもjQueryを使ってみたいと思ったのではないでしょうか！？
記事で紹介したように導入も簡単にできるので、ぜひ挑戦してみましょう！！
