最近jQueryを学び始めました。
これから始めようと思ってる人や、同じく学び始めた人、jQueryってなんぞや？って人のために残しておきたいと思います。
1.jQueryとは
javascriptでできることを、より簡単な記法で出来るライブラリのことです。
最大の特徴はブラウザを意識しなくて済むことです。
ChromeやFirefox、Safariなど、ブラウザで対応可能なメソッドが少々異なる部分がありますが、jQueryはそれをほぼ意識せず使用できることにあります。
DOM操作やAjax機能の記述も楽になりことも利点です。
他にもアニメーションなどをつけるなどもできるため、ユーザーは目で楽しめます。
フロントにはもってこいの代物となっています。
しかし、メリットばかりではありません。
デメリットとしては、jQueryの読み込みが発生するため、jQueryでの記述が多いと処理が重くなる場合があります。
さらに、プラグインという便利な拡張機能があります。プラグインを使うとバラエティに富んだ表現を行えるのですが、使いすぎると非常に重たくなるため注意が必要です。
アプリケーションのUI/UXは非常に素晴らしいが、ユーザーは待ち時間が長くなってしまう可能性がある。
それがjQueryです。
2.jQueryを使用するには
jQueryライブラリを読み込む必要があります。
<head>タグの中でURLを読み込むことで使用できるようになります。
今回はjQueryのCDN（コンテンツデリバリーネットワーク）を利用します。
<head>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
3.jQueryのファイルを読み込むには
.js形式のファイルにコードを書きます。
HTMLファイルで、<script src="ファイルのURL"></script>と書くことで、jQueryのコードを記述するファイルが読み込まれます。
<script>はCSSファイルの読み込みのように<head>タグの中にも書けます。しかし、</body>の直前に書くことで、WEBページの表示速度を早めることが出来ます。
<head>
#省略
</head>
<body>
#省略
<script src="script.js"></script>
</bode>
4.HTML要素を取得してみる
取得する方法
まず基本形は以下のようになっています。
$("セレクタ")
$()とすることで取得してきたセレクタを読み込みます。
肝心の取得の仕方です。
例として、example.htmlの中に、
<div class="class" id="id">ただの例です</dev>
があるとします。
この時、
divタグを取得したい場合は、$("div")
classを取得したいときは$(".class")
idを取得したときは$("#id")
となります。
取得してくる種類によって何もなし、ドット、シャープと異なるので注意が必要です。
5.命令してみる
実際に取得してきた要素にアニメーションをつけてみます。
今回はfadeOutメソッドを使ってみます。
fadeOutメソッドは要素を隠す際に使われるメソッドです。
徐々に消えていく演出ができます。
$('セレクタ').fadeOut();
// 取得したセレクタが徐々に消えていきます。
$('セレクタ').fadeOut(2000);
// 引数に数字を入れると消えるまでの秒数を決められます。
// この場合は2000ミリ秒なので、2秒です。
他にも消えていく演出にはslideUpやhideなどがありますので、是非試してみてください。
終わりに
まだまだ序盤です。
ドラ◯エ５でいうならビスタ港から出たばかりでしょうね。
ここからイベントハンドラーを駆使することでいろんな表現ができるようなので覚えていきたいですね。