javascriptを簡単に書ける！J-Queryの紹介、導入方法

「【ホームページを勉強するには何から始めればいいの？】WEB制作における基本的な言語、ツールの紹介」にて
javascriptはwebプログラマーを目指す上でとても需要のある言語ということについてお書きいたしました。

こちらの記事のJavaScriptの説明の文末にも書かれているのですが、
JQueryと呼ばれるJavaScriptを簡単に書ける言語があるのをご存知でしょうか？
こちらのJQueryもJavaScript同様とてもニーズの高い言語となっております。

そこで、今回はJQueryについてと導入方法をご紹介したいと思います。


JQueryとは?



上記の通りJQueryとはJavaScriptをより容易に記述できるように軽量化されたJavaScriptライブラリとなります。

JQueryにはライブラリと呼ばれる、使用頻度の多い機能や効果を再利用しやすいようにまとめたものもあり、こちらの知識があれば一からJavaScriptやJQueryが書けなくても、一通りの機能を実装する事ができます。


JavaScriptとJQueryの違い

JavaScript

var targets = document.getElementsByTagName("p");
for(i=0; targets.length; i++){
  if(targets[i].className === "red"){
    targets[i].style.color = "#f00";
  }
}

JQuery

$(p.red).css({"color":"#f00"});

両方ともredというクラスの文字色を赤に変えているだけなのですが、記述量にここまでの差が出てきます。


JQueryの実装方法

JQueryを実装するにはまず、htmlのheadタグ内にJQuery本体を読み込む必要があります。
※通常JQuery本体は１ファイルに1つだけ読み込みます。

JQuery本体を読み込むには二つの方法があります。

・CDNを利用する
・本体をダウンロードして、ディレクトリの配下に置く

まずCDNを利用する方法から説明していきます。


CDNを利用する

CDNとは、コンテンツデリバリネットワーク(Content Delivery Network)の略であり
大人数が同時にアクセスし過負荷がかかることを避けるためにサーバーを複数の場所に設置し、ユーザーにコンテンツを快適に提供するための仕組みです。

難しいので要約すると、JQueryの場合はCDNのサーバーに上がっているデータを直接的にHTML内にリンクすることでディレクトリ配下に置くことなくコンテンツを使用することができます。

口頭で説明すると難しいですが、実際にやることは下記のコードをHTMLファイルのheadタグ内に埋め込むだけです。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

上記はgoogleのCDNを利用していますが他にもJQuery公式、マイクロソフトからも適用されています。
下記のURLからCDNを利用する場合はjquery.min.jsと言う圧縮されたファイルを利用することをオススメします。
※CDNを利用する場合はインターネットがオンラインでなければ作動しません。



JQuery公式CDN
http://code.jquery.com/




Google JQueryCDN
https://developers.google.com/speed/libraries/#jquery




マイクロソフト JQuery CDN
https://www.asp.net/ajax/cdn


本体をダウンロードして、ディレクトリの配下に置く

次はJQueryの本体をディレクトリ配下に設置する方法です。

1.JQueryの公式サイトにアクセスします。



http://jquery.com/


2.赤線内の「Download jQuery」をクリックします。




3.赤線内のDownload the compressed, production jQuery 3.1.1をクリックします。



4.ダウンロードしたファイルを制作しているファイルのディレクトリ配下に設置します。
※jsと言うフォルダを作りその中に入れることをオススメします。


5.次にHTML内のheadのタグ内にディレクトリのパスを通した下記のコードを記述して設置完了です。

<script src="配置したディレクトリのパス/js/jquery-3.1.1.min.js"></script>

まとめ

いかがでしょうか？
JQueryは覚えるととてもJavascriptを効率的に書くことができる大変便利なプラグインですが、比較的勉強しやすく簡単な言語なので勉強してみてはいかがでしょうか？

次回はプログラミングせずともホームページに効果や機能をつけることができるプラグインの説明と実用的なプラグインをいくつか紹介したいと思います。