お知らせ(javascriptとjqueryの違い)|YORIYORK|栃木県佐野市

お知らせ

news

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にはどういった違いがあるのか。
「混同されがちなこの二つの違い」を簡単に説明していきます。

Javascriptってなに?

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

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

 

jQueryってなに?

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

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

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

 

jQueryの使い方

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

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

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

 

②URLから読み込む

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

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

 

jQueryを使用するメリット

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

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

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

 

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

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

javascriptを使用した書き方

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

jqueryを使用した書き方

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内に必要なファイルの情報を記述します。

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

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

以上です。
これで簡単な絵本のようなコンテンツが完成です。
その他にもオプションが用意されています。
https://tympanus.net/codrops/2012/09/03/bookblock-a-content-flip-plugin/

こちらのページを参考に自分でカスタムにチャレンジしてみて下さい。

 

実際にjQueryを使用するときの注意

プラグインによっては、最新版だと動作しないことがあります。
その場合は、プラグインが作成された時期のjQueryを使用しましょう。

公式サイト
https://jquery.com/

最新版や過去のバージョンがダウンロード出来ます。
確認してみて下さい。

デメリットで書きましたが、読み込みでページ表示スピードが遅くなることも覚えておきましょう。

 

まとめ

今回、javascriptとjqueryの違いを簡単に説明してきました。
二つの違いを理解出来たのではないでしょうか。
では、最後に要点をまとめさせて頂きます。

①javascriptはプログラミング言語。主にブラウザでの動的な動きが付けられます。
②jqueryはjavascriptでよく使われる機能を簡単に使えるようにしたライブラリです。
③jqueryにはメリット、デメリットがありますが初心者の方には分かりやすい仕組みです。

これらを意識をすることで、javascriptとjqueryを使いこなしていける足がかりになると思います。
混同しがちではありますが、違いを正しく理解し実践していければ間違いなく有益な情報になるでしょう。

Author:admin|Category:WEBチーム

\ お気軽に一度ご相談ください! /

お問い合わせ•ご相談はこちら
求人情報
PAGE TOP