jQueryの使い方について説明します。
途中でもしかして心が折れてしまうような部分があるかもしれないですけど、そんなときも我慢して最後まで読めばきっと使う準備は100%完了できます。
その前に、jQueryとはJavaScriptです。
こんがらがる言い方をしてしまいましたが、大きなくくりとして「JavaScript」というものがあって、「jQuery」とはJavaScriptをよりインタラクティブにお手軽に使えるようにするためのフィルターとでも言いましょうか。
そういうものです。
jQueryのファイルを読み込ませてそのルール通りに書いていくと、通常のJavaScriptだと何十行も何百行も書かなければいけない処理をわずか数行で、単純なものだと1行書くだけで実現できてしまう、というとても便利なものなのです。
ということで、jQueryを使うためにはjQueryを使うためのファイルをサイトに読み込ませる必要があります。
「ではそのファイルは？」
↑こちらが本家のサイトです。
こちらからいろいろなバージョンがダウンロードできたりするのですが、英語なので英語ができる人は書いてあることがわかると思いますｗ
私は英語があまりできないので何が書いてあるのかわかりませんが、ダウンロードするところは何となくわかります。
で、ダウンロードするページに行くとリンクがいくつかあって、クリックするとなんか文字列が羅列してて、
「え？何？よくわかんないんですけど。」
とか思っちゃったりするんです。
これ、マジで厄介。
私は最初の一回目はここで心が折れました。
わかっちゃえばなんてことないんですけど、わかんないと何をしていいかわかんないですよね。
これ、確か「Download the compressed～」で始まるところのリンクを開いて、表示されたわけのわからない文字列を全て選択してテキストエディタへペーストして適当な名前でjs拡張子を付けて保存するとjqueryのファイルになるんです。（ファイル名は「jquery.js」とかでOK。）
で、これをサーバーにアップして読み込ませれば準備はOK。
でも、よくわかんないじゃないですか。
ちょっと説明を入れてあげればわかるんですけど、英語もわからないし説明もないと何をしていいのかがわからないですよね。
そこで、実はダウンロードとかファイルを自分で用意しなくても実はGoogle（神）がなんと提供しているのです！
どういうことかというと、Google（神）のサーバーにアップしてあるjqueryのファイルを「自由に使っていいですよ」といった感じで提供しているのです！
それがこちら！Google Hosted Libraries！
旧バージョンとかもあるし、タグが用意されているのでそれを自サイトへコピペするだけでなんと準備が完了！
わけわからん文字列に拒絶反応出して心折れる必要なし！
これ、だいぶ楽なので結構これを使って作る人いますね。
仕事で受注するときでもこれで問題なし。
ということで、Google Hosted Librariesを開いてjQueryの部分へ移動してみましょう。
そうすると、「3.x snippet」とか「2.x snippet」とか書いてあるのですが、これはバージョンを表してます。
まぁ、バージョンは最新のもので問題ないんですけど、検証とかサイトの仕様とかで古いバージョンである必要がある場合には古いものを使ったらいいと思います。
で、このscriptタグをコピペすれば準備完了！
あとは、JavaScriptのようにscriptタグで囲んでソースを書いていけばOKですね。
注意点を一つだけ、jqueryのスクリプトはjqueryファイルが読み込まれた後に記述しないと実行されません。
＜例：実行されない例＞
<html>
<head>
<title>jquery実行テスト</title>
<script>
$(function(){
//jQueryの処理
var txt = $(‘p’).text();
alert(txt);
});
</script>
</head>
<body>
<p>ここにHTML</p>
</body>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js”></script>
</html>
↑これは実行されません。確か。
理由は、jqueryファイルが読み込まれる前にjqueryのスクリプトが実行されてしまうので、その時点でJavaScriptから「おい、なんやこれ。わけわからんど。」というような感じでエラーになってしまいます。
なので、↓のように書いてもらうとちゃんと動くようになります。
＜例：実行される例＞
<html>
<head>
<title>jquery実行テスト</title>
</head>
<body>
<p>ここにHTML</p>
</body>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js”></script>
<script>
$(function(){
//jQueryの処理
var txt = $(‘p’).txt();
alert(txt);
});
</script>
</html>
scriptタグはhead内に書いても別に構いません。
なんなら、どこに書いても動きますｗ
ただ、ソースの中でまとめて書いていた方が改修する際もわかりやすくていいでしょ、ということです。
ということで、jQueryを使うための準備の仕方でした。
実際にjQueryをどう書くか、というのは伝えるのがなかなか難しいので作りたいスクリプトを調べて書いてトライ＆エラーを繰り返すとあるとき突然書き方がわかるようになります。
まぁ、ちょっと込み入った動きとか、イレギュラーケースとか、自分も迷って調べたこととかあればここに書き込んでいきます。
便利ですよー、jQuery。覚えてしまうとなんかいろいろ動かしたくなりますからね。
根気よく、いろいろ試してみてできるようになってください！