javascriptとjqueryの違い

お知らせ

news

トップ > お知らせ > LABO（研究） > WEBチーム > javascriptとjqueryの違い

2018.10.23

Yoriyork WEBチームです。

HTMLとCSSで作成した自分のホームページに物足りなさを感じるときはありませんか？

「ホームページにちょっと動きをつけたい！」って思った時に分かる人へ質問をすると大体こう返って来ることが多いのではないでしょうか。

「ああ、それならJavascriptで出来るよ！」

現在のwebコンテンツに当たり前のように使用されているJavascript。
動的なWebコンテンツの作成やWebアプリケーション開発には必要不可欠です。

また、jQueryというものをご存知でしょうか。
よくgoogleで「ホームページ　スライドショー」と検索すると出てきますよね。
Javascriptという単語を教わり、いざ実践しようとするとき、おそらくjQueryを勧められるはずです。

参考URL
ハンバーガーメニューの実装もこれなら簡単！-Pushbar.js
https://coliss.com/articles/build-websites/operation/javascript/sliding-drawers-pushbar.html

2018年も手軽で便利なjQueryスライダープラグイン9選
https://ferret-plus.com/9396

「Javascriptは難しいかもしれないけど、jQueryなら割と簡単に出来るかも」

しかし、二つも新しい単語が出てくると、頭の中がこんがらがって訳が分からなくなり、混乱してしまうかも知れません。

そこで今回ははJavascriptとjQueryにはどういった違いがあるのか。
「混同されがちなこの二つの違い」を簡単に説明していきます。

1 Javascriptってなに？
2 jQueryってなに？
3 jQueryの使い方
- 3.1 ①ダウンロードしたファイルをフォルダから読み込む
- 3.2 ②URLから読み込む
4 jQueryを使用するメリット
5 jQueryを使用するデメリット
6 jQueryプラグインの設置
7 実際にjQueryを使用するときの注意
8 まとめ

Javascriptってなに？

Javascript（ジャバスクリプト）は、主にブラウザで動作するスクリプト言語です。
スクリプト言語はプログラミング言語の一種で、パソコンに対して何らかの作業を命令するためのものです。プログラミング言語で記述した命令文をプログラムと呼びます。
パソコンは人間の言葉が理解することが出来ないため、パソコンが分かるように記述することが必要になります。

Javascriptで出来ることは画面に動きを付けたり、フォームを制御するなどがあります。
（例：ボタンをクリックするとアイコンが動くようにする。メールアドレスのエラーチェックをするなど）

jQueryってなに？

jQuery（ジェイクエリー）は、Javascriptのコードを簡単に記述出来るようにしたライブラリです。
本来であれば冗長になりがちなJavascriptのコードも、jQueryを使用すれば短く記述することが出来ます。

ライブラリは、使用頻度の高いプログラムを再利用できる形にまとめたものです。
jQueryというライブラリの中に、膨大なJavascriptのコードが記述されています。

jQueryを使用すれば短く記述することが出来るのはそのためです。

jQueryの使い方

使い方は簡単で、head内でjqueryを読み込むだけです。
公式サイトhttps://jquery.com/でダウンロード出来ます。
ライブラリを読み込むのに二つの方法があります。

①ダウンロードしたファイルをフォルダから読み込む

<script type="text/javascript" src="/js/jquery/jquery-migrate.min.js?ver=1.4.1"></script>

1	<script type="text/javascript" src="/js/jquery/jquery-migrate.min.js?ver=1.4.1"></script>

フォルダのパスをscriptタグで指定してあげればOKです。

②URLから読み込む

公式サイトのダウンロードコンテンツにURL版があります。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

1	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

こちらも先程のようにURLをscriptタグで指定してあげればOKです。
読み込みが無事完了すれば、jqueryの機能を使用出来ます。

jQueryを使用するメリット

①クロスブラウザ問題を解決できる

Javascriptを実行するブラウザによって、命令の解釈が異なるため処理結果に相違が生じてしまうことがあります。jQueryを用いることで、どのブラウザで実行しても同じ処理結果を得られるようになります。

現在では、ブラウザも進化し以前ほど気にならなくなってきた部分ではあります。
案件の想定する環境次第では意識しておいた方が良いのではないでしょうか。

②文法がシンプルで短く記述出来る

jQueryってなに？で書きましたが、ライブラリを使用することでかなりシンプルなコードにすることが出来ます。
簡単なコードを例に比較していきます。

javascriptを使用した書き方

<script>
	//javascriptを使用した書き方
	document.addEventListener("DOMContentLoaded", function(){
		var test01 = document.getElementById("test01");
		var test02 = document.getElementById("test02");
		var test =  document.getElementsByClassName("test");
		var clear =  document.getElementsByClassName("clear");
		test01.addEventListener('click',function(){
			test[0].style.color = "#f90d90";
			test01.style.display = "none";
			test02.style.display = "block";
		});
		test02.addEventListener('click',function(){
			clear[0].style.display = "none";
		});
	});
</script>

//javascriptを使用した書き方

document.addEventListener("DOMContentLoaded", function(){

var test01 = document.getElementById("test01");

var test02 = document.getElementById("test02");

var test = document.getElementsByClassName("test");

var clear = document.getElementsByClassName("clear");

test01.addEventListener('click',function(){

test[0].style.color = "#f90d90";

test01.style.display = "none";

test02.style.display = "block";

});

test02.addEventListener('click',function(){

clear[0].style.display = "none";

});

</script>

htmlに設定したidやclassを取得して、文字の色を変えたり消したりしています。
javascriptの場合、document.getElementByIdやdocument.getElementsByClassNameなど取得する場所によって使用する書き方が違います。

jqueryを使用した書き方

<script>
	$(function(){
		$("#test01").on("click",function(){
			$(".test").css("color","#f90d90");
			$("#test01").css("display","none");
			$("#test02").css("display","block");
		});
		$("#test02").on("click",function(){
			$(".clear").css("display","none");
		});
	});
</script>

$(function(){

$("#test01").on("click",function(){

$(".test").css("color","#f90d90");

$("#test01").css("display","none");

$("#test02").css("display","block");

});

$("#test02").on("click",function(){

$(".clear").css("display","none");

});

</script>

jqueryの場合は、$(“”)の中に取得したいタグ名idやclassを記入するだけです。
idなら$(“#test01”)、classなら$(“.test”)といった具合です。
cssでセレクタを記述するような形でお手軽なんです。
いかがでしょうか。

jqueryの方が初心者には分かりやすいのではないでしょうか。

③豊富なプラグインがいっぱい

これも嬉しいポイントです。スライドショーやアコーディオンメニューなどの動きのあるコンテンツが初心者でも設置できてしまいます。

flexslider2
http://flexslider.woothemes.com/

accordion
https://github.com/ajayy004/accordion

いくつか例を挙げさせていただきましたが、今回ご紹介した内容が主に大きなメリットではないでしょうか。

jQueryを使用するデメリット

jqueryのデメリットは、jQueryライブラリを読み込まなければ使用出来ないことです。
jqueryを読み込むのに時間がかかり、結果ページの表示に影響を与える場合があります。

現在ではブラウザ間の差異も少しずつ解消されてきており、簡単な動きならjqueryを使用せずともcssで出来てしまうものもあります。
その状況に応じて使い分けができるようになると幅が広がります。

jQueryプラグインの設置

実際にプラグインの設置をしてみます。
使用するのはBookBlockというプラグインです。
https://tympanus.net/codrops/2012/09/03/bookblock-a-content-flip-plugin/

ホームページに絵本のようなコンテンツを設置することができます。
工夫次第では、ホームページ自体を絵本のようにしてしまうことが可能です。

では実際に設置していきます。

必要なファイルは公式ホームページからダウンロードして来てください。
https://tympanus.net/codrops/2012/09/03/bookblock-a-content-flip-plugin/

ダウンロードして来たらファイルを読み込む準備を始めます。
まずhead内に必要なファイルの情報を記述します。

<head>
<link rel="stylesheet" href="css/bookblock.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="js/modernizr.custom.js"></script>
<script src="js/jquerypp.custom.js"></script>
 <script src="js/jquery.bookblock.js"></script>
</head>

<head>

</head>

次にbodyに必要なhtmlを記述します。
“bb-item”がページを表します。
この中に画像やテキストを入れてあげます。

<body>
        <div id="bb-bookblock" class="bb-bookblock">
            <div class="bb-item">
                <img src="img/bg_hatake.jpg" alt="">
            </div>
            <div class="bb-item">
                <!-- ..※ここは実際に動作させる画像を埋め込みする。. -->
            </div>
            <div class="bb-item">
               <!-- ..※ここは実際に動作させる画像を埋め込みする。. -->

            </div>
            <div class="bb-item">
                <!-- ..※ここは実際に動作させる画像を埋め込みする。. -->

            </div>
            <!-- ..※ここは実際に動作させる画像を埋め込みする。. -->
        </div>
        <div>
            <p class=”prevbtn”>Previous</p>
            <p class=”nextbtn”>Next</a>
        </div>
</body>

<body>

</div>

</div>

</div>

</div>

</div>

<div>

<p class=”prevbtn”>Previous</p>

</div>

</body>

head内に動かすスクリプトを記述してあげれば動作します。
今回は、前後のページを移動するナビゲーションだけ設定してあげます。

<script type="text/javascript">
// bookblockを動かすスクリプト
$(function() {
                $( '#bb-bookblock' ).bookblock();
};
// ナビゲーション部分をクリックするとページ移動するスクリプト
             $( ‘.nextbtn’ ).on( 'click', function() {
                    $( '#bb-bookblock' ).bookblock( 'prev' );
                });
             $( ‘.prevbtn’ ).on( 'click', function() {
                    $( '#bb-bookblock' ).bookblock( 'next' );
                });

</script>