この記事はJavaScriptを勉強し始めた人に向けて書いています。
JavaScript自体に触れたことがない方にはまずJavaScriptの基礎だけでも勉強してから見ることをお勧めします。
個人的な意見としてはJavaScript自体を勉強しないままJQueryに手を出すのは避けた方がいいです。概要を知るだけなら問題ありませんが、勉強する順番としてはJavaScript→JQueryの順番で進んでいくことを推奨します。
目次
スポンサードサーチ
JQueryってなに？
JQuery・・・それはJavaScriptを勉強し始めた人でも必ず目にする単語だと思います。
私が勉強を始めた時はJavaScriptで実現したい内容を検索すると、JQueryが使用されたサンプルコードがたくさん出てきて何が何だかわかりませんでした。
結局JQueryって何なのでしょうか？
JQueryとは
JavaScriptを容易に記述できるようにするためのライブラリです。
JavaScriptとJQueryのコードを比較してみよう
容易に記述するってどういうこと？ここではJavaScriptとJQueryのコードを比べてみましょう。
同じ内容でどのように異なっているのかを確認します。ここの部分だけでもJQueryを使用する十分な理由になるほどです。
私もこんなに簡単に書けるの！？とびっくりしたのを覚えています。
例1 ID要素を取得する
|
1 2 3 4 5 6 7 |
//id="sample"を取得し、使用する //JavaScriptの場合 var sample = document.getElementById('sample'); //JQueryの場合 var sample = $('#sample'); |
同じ内容なのに、コードの長さはかなり違います。
JQueryの場合、記述が短いため変数に代入しなくても「$(‘#sample’)」という形で使用しても問題ありません。というか代入しないパターンの方がよく見かけます。
ID要素なら「$(‘ #ID要素 ‘)」、クラス要素なら「$(‘ .クラス要素 ‘)」と記述します。
例2 イベントの実装を行う
ここではクリックイベントを例に見ていきます。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
//id="sample"を取得し、使用する //JavaScriptの場合 var sample = document.getElementById('sample'); sample.addEventLister('click', function(){ console.log('クリックされました'); }); //JQueryの場合 $('#sample').click(function(){ console.log('クリックされました'); }); |
かなり短くなりました！クリックだけでなく、マウスオーバーなどのイベントも同様に使用できます。
JQueryのエフェクトを使ってみよう！
JQueryを使用することで簡単にエフェクトを実装することができます。
hide( )
指定した要素を非表示にします。
See the Pen mRoXrP by laha (@laha) on CodePen.
show( )
指定した要素を表示します。
See the Pen mRoXgw by laha (@laha) on CodePen.
fadeOut( )
要素をフェードアウトさせます。
See the Pen ygwKNr by laha (@laha) on CodePen.
fadeIn( )
要素をフェードインさせます。
See the Pen rjRdeN by laha (@laha) on CodePen.
toggle( )
要素の表示、非表示の切り替えを行うことができます。
See the Pen XpGEjb by laha (@laha) on CodePen.
最後に
このようにJQueryを使用すれば要素を扱うコードを短くできたり、エフェクトを簡単に使うことができます。
また、JavaScriptにはJQueryを使用することを前提としたライブラリも多数あります。もしかしたら使いたいライブラリがJQueryが必須のものかもしれません。
勉強しておいて損はありません。というか楽しいです！いろいろな表現を行うことができるようになりJavaScriptを使うのがどんどん楽しくなります！
フロントエンドのプログラミングはエディターとブラウザさえあればできるというのはかなり魅力的です。ビルドに時間がかかるということもないので、やりたいことがあったらガンガン試していきましょう！
