jQueryは敷居が高い？
今回はJavaScriptライブラリとして有名なjQueryについて取り上げたいと思います。
ということで、まず、最初にJavaScriptについて簡単に触れておきたいと思います。
今や主要言語にもなったJavaScriptについて簡単な紹介
JavaScriptは2000年代初頭ぐらいまではブ
ラウザで表示する画面に少し動きをつけたい時などに利用する程度のプログラミング言語でしたが、
2000年代半ば以降から急速に発展を遂げ、
今やWebサーバアプリケーション開発に欠かせない言語となっています。
機能面からC系言語やJava言語などと同格といってもよいのではと思っております。
その機能面に着目して現在のJavascriptができることについて列挙してみます。
【Javascriptで実現できること】
- オブジェクト指向設計が可能
プロトタイプと呼ばれるしくみを利用、オブジェクトに関数を継承させることができる。 - 画面の一部変更
Document Object Model (DOM) と呼ばれるしくみで、HTML内の特定のタグ要素の値のみ変更させることができる。
これによりページをリロードさせることなく（少ない通信量で）、動きのある画面を実現できる。 - サーバ側との非同期通信が可能
Ajax通信(Asynchronous JavaScript + XML )という仕組みを利用してブラウザ（クライアント側）とサーバ側間で非同期通信を実現できる。
やりとりする通信データもJson形式やXML形式といったもので、軽く、信頼性も確保できるtcp通信が実現できる。
代表的な応用例としてGoogle Mapなどがある。 - クライアント側で動作するプロセス/タスクもどきを生成
Javascript標準のタイマー機能を応用するなどでブラウザ内で常駐するタスクのような動作をさせること可能です。
この機能と非同期通信（前述）の組み合わせはよく見かける。 - サーバー側で動作するプロセス生成
node.jsというライブラリ（実行環境）を利用すると、
サーバー側で動作することが可能なJavscriptプログラムを作成することができます。
node.jsをLinuxなどのUnix系OSにインストールすることで
サーバーサイドJavaScript環境を利用することができます。 - その他
jQueryでできること
jQueryは「JavaScriptコードをより容易に記述できるようにするために
設計されたJavaScriptライブラリである。」（ウィキペディアより引用）とあるとおり、
前述の【Javascriptで実現できること】をjQueryのみで実現することができます。
なお同ライブラリはこちらからダウンロードできます。
私がはじめてjQueryのコードを見た時、難しく感じた理由
私自身、jQueryのコードを初めてみた時、
正直、Javascript言語とは似ても似つかぬ表記方法に抵抗を感じました
($.ajax?、$("#active").show()?、なんだ$って。Javascriptの標準的な教科書にそのようなものは載っていないぞと)。
さらにはじめてみたみたオープンソースのjQueryのコードがAjax通信を関するものだったので、
Ajax通信のようにごく一部の機能の実現のために利用されるものなのだろうという勝手な思い込みをもった記憶があります。
しかし、後々、気付いたのですが、個人的にjQueryを難解な、どこか手の届かない次元ととらえていたのは、
ネイティブなJavascriptである機能を実現するために
必要な十数行のコードがjQueryの表記だと一行で済むように、
一行のjQueryのライブラリ関数にまとめられていることが原因でした。
私が思ったよりもjQueryは難しくないぞと思った理由
jQueryの表記は、確かに特殊です。
しかし、インターネットで検索すると、簡単にサンプルプログラムを取得することができます。
例えば、Googleなどの検索エンジンで「jquery アコーディオン サンプル」などと打ってみてください。たくさんのサンプルプログラムがヒットするでしょう。
このため、極端な話、基本となるJavascript言語を勉強したことがない人も、動作させるだけなら、そのサンプルプログラムを真似るだけで動作するものが作れるということになります。
ただ、実際は自分オリジナルにカスタマイズしたいというのがほとんどでしょう。
このため、現実にはjQueryのサンプルコードのネイティブのJavascriptで書かれたコードをざっくりとイメージできる程度の知識はあったほうがよいでしょう。
私の場合、jQueryを利用するにあたって次のようなスタンスで利用しています。
- ネイティブなJavascriptの基本的な文法は知識としてもっておく。
- jQueryの表記方法はこういうものだと割り切る。
- ネイティブなJavascriptで行き詰った時、または作成したコードが長すぎると感じた時、インターネットでjQueryをキーワードに含め、サンプルコードを検索してみる。
ということで「jQueryはJavascriptの基本を身につけている方であれば敷居は高くない。」というのが個人的な考えです。
最後に簡単ですが、jQueryの利用例と環境設定の方法についてご紹介します。
jQueryの利用例
サーバー側との非同期通信
下記はサーバ側からのJSONデータのtypeパラメータに"mymessage"が設定されていた時、指定の処理を行うためのリストイメージです。
function ajaxsample() {
var setting = {
url: "mypage/",
timeout: 10 * 60 * 1000 ,
contentType: "application/javascript",
success: function(data, status) {
//successはサーバー側とのデータ送受信に成功した時に呼ばれるコールバック関数
var type = data.type;
if("mymessage" == type) {
//ブラウザが受信したJSONデータにmymessageを含まれていた時の処理などを追加
}
ajaxsample();
},
error: function(data, status) {
//successはサーバー側とのデータ送受信に失敗した時に呼ばれるコールバック関数
setTimeout(ajaxsample, 1000);//例：１秒待ってもう一度、同関数を呼ぶ。
}
$.ajax(setting);//上記、settingに従ってAjax通信を行うための初期化するためのjQuery関数
}
Webページにアコーディオンメニューを追加
下記はWebページにアコーディオンメニューを追加したい時のリストイメージです。
【HTMLリスト】
<div id="toggle"><a href="#">メインメニュー</a></div>
<ul id="accordion" class="">
<li><a href="#"><span id="dropmenu-on">メニュー1</span></a>
<ul id="active">
<li><a href="#">メニュー1のサブメニュー（一つ目）</a></li>
<li><a href="#">メニュー1のサブメニュー（二つ目）</a></li>
</ul>
</li>
<li><a href="#"><span id="dropmenu-on">メニュー2</span><span class="arrow"></span></a>
<ul>
<li><a href="#">メニュー2のサブメニュー（一つ目）</a></li>
<li><a href="#">メニュー2のサブメニュー（二つ目）</a></li>
</ul>
</li>
</ul>
【上記HTMLのリストに動きを加えるためのjQueryのリスト】
<script type="text/javascript">
$(function () {
$("#toggle").click(function(){//$（タグ要素）.click→引数の要素がクリックされた時のコールバック関数を定義するjQuery関数
$("#accordion").slideToggle();//$（タグ要素）.slideToggle→引数の要素が開いている時は閉じ、逆に閉じている時は開くjQuery関数
return false;
});
$(function() {
$("#accordion li ul").hide();//$（タグ要素）.hide→引数の要素を閉じるjQuery関数
$("#active").show();//$（タグ要素）.hide→引数の要素を表示するjQuery関数
$("#accordion > li > a").click(function(){
if($(this).children("span").attr("id") == "dropmenu-on") {//$(親要素).children(子要素).attr(孫要素)→引数の要素の値を参照するためのjQuery関数
var click = $("+ul",this);
click.slideDown();
$("#accordion ul").not(click).slideUp();
$(".arrow").removeClass("rotate");//$（タグ要素）.removeClass（クラス属性）→引数の要素からクラス属性を消去するjQuery関数
$("> .arrow",this).addClass("rotate");//$（タグ要素）.addClass（クラス属性）→引数の要素へクラス属性を追加するjQuery関数
}else{
}
});
});
});
</script>
jQueryの環境設定
jQueryの利用に必要な環境設定についてご紹介します。
- こちらをクリックする。
- ファイルを選択し、ダウンロードする。
【2018年1月時点の最新版】
Download the compressed, production jQuery 3.3.1（一般向け）→jquery-3.3.1.min.js
Download the uncompressed, development jQuery 3.3.1（上級開発者向け）→jquery-3.3.1.js - ダウンロードしたjqueryファイルを任意のURLにアップロードする。
- jQueryファイルのリンク設定を行う。
jQueryコードを含むリストの先頭の方に次の宣言を追加する。
//（注）URLは仮です。 <script src="http://myhomepage/jquerydir/jquery-3.3.1.min.js" type="text/javascript"></script> //次のように直接、jQueryのサイトを参照する形でもいいですが、jQuery運営者側の都合でURLの変更等あるかもしれないので、自分オリジナルURL（上側）にしたほうが無難だと思います。 <script src="https://code.jquery.com/jquery-3.2.1.min.js" type="text/javascript"></script>