目標

JavaScriptの醍醐味の１つは、他人が開発したモジュールを自分のプログラムに組み込んで、大規模なソフトウェアや見栄えのするソフトウェアを開発することである。
ここでは、他人が提供しているライブラリを自分のプログラムに組み込んで使うことを学ぶ。

• ライブラリの概念を理解する。
• 他人が用意したライブラリを利用する仕組みについて理解する。
• jQueryのようなライブラリが活用できるようになる。

JQuery

jQueryの基本

jQueryとは

JavaScriptの基本はHTMLで記述されたページに動きを与えることである。
ボタンを押すことによって動作を加えたり、フォームに入力した値によってページに表示されている内容を変更したりできる。
しかし、複雑なことをしようとすればするほど、面倒な手続きが多く出てくる。
そこで、JavaScriptをより簡単に使えるようにするために、ライブラリが開発されるようになった。
ライブラリとは、再利用可能な汎用性のある機能をまとめてパッケージ化したものである。

JavaScriptでは、多くの人々が様々なライブラリを開発し、公開している。
ここでは、その中でも良く利用されるjQueryについて紹介する。

jQueryは2006年に開発・公開されたJavaScriptライブラリで、CSSに近い記述方法を採用しているのが特徴である。
jQueryを使うことによって、短いコードでHTMLを操作することが可能になる。

それでは早速、jQueryを使ってみよう。

jQueryの使い方

jQueryを使うためには、jQueryライブラリをjQueryのサイトからダウンロードし、
これを自分のサイトに配置して、script要素を使って読み込む必要がある。
jQueryのサイトでは、Minifiedと呼ばれる圧縮された形のライブラリと、Uncompressedと呼ばれる圧縮前のライブラリが提供されている。
これら二つの機能は同じだが、通常はMinifiedを利用する。
これは、変数名を短くしたり、コメントを省くなどの手法を使ってファイルサイズを小さく押さえてあるため、
ダウンロードが早く終わるためである。
一方で、Minifiedライブラリは人間が読むには不向きで、jQueryのコードそのものに興味がある場合は、
Uncompressedライブラリをダウンロードした方が良い。

本来は自分でダウンロードして、コードを自分のサイトに配置するが、
本授業では予めMinifiedライブラリをhttps://ipl.sfc.keio.ac.jp/text/info2-2018-9/lib/jquery-3.3.1.min.jsに、
Uncompressedライブラリをhttps://ipl.sfc.keio.ac.jp/text/info2-2018-9/lib/jquery-3.3.1.jsに配置してあるので、これを利用する。
それぞれのリンクをクリックして表示してみると、MinifiedライブラリとUncompressedライブラリの違いがわかる。

初めてのjQuery

なにはともあれ、jQueryを使ってみよう。
次のプログラムを見てほしい。

<ul>
<li>Hello World!</li>
<li>Hello SFC!</li>
</ul>

<script type="text/javascript" src="https://ipl.sfc.keio.ac.jp/text/info2-2018-9/lib/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(function(){
  $("li").css("color", "red");
});
</script>

このプログラムの実行結果は下記のようになる。

Hello World!
Hello SFC!

プログラムでは、1つめのscript要素でhttps://ipl.sfc.keio.ac.jp/text/info2-2018-9/lib/jquery-3.3.1.min.jsを読み込んでいる。
また、2つめのscript要素は、これまで学習してきたJavaScriptとは全く異なる。
この2つめのscript要素の中に書かれたものがjQueryを使ったプログラムである。

jQueryでは、HTMLのどの部分を操作するかを指定し、その上で操作する内容を書くことが基本となる。
操作する部分を指定するものをセレクタと呼ぶ。
CSSのセレクタと同じである。
上記のプログラムにおいては、9行目の「$(…)」で囲まれた「”li”」の部分がセレクタである。
この例では全てのli要素を指定している。
CSSのセレクタと同じ表現で、クラスやIDなどを指定することもできる。
その上で、jQueryの操作の部分が「css(“color”, “red”)」となる。
これは、文字の色を赤に指定している。
結果として、箇条書きの部分が全て赤く表示されることになる。

8行目の「$(function(){」と10行目の「});」は何であろうか?
これは、jQueryの命令が実行されるタイミングを指定している部分である。
正確には「$(document).ready(function(){」と「});」するが、省略形として「$(function(){」と「});」が使われる。
非省略形をみると解るが、この記述方法は、ドキュメントの準備ができたら実行する、ということを示している。
つまりページの読み込みが終わった時点で、その中身(今回のプログラムでは「$(“li”).css(“color”, “red”);」)が実行れる。
多くの場合HTMLが全て読み込まれてから処理を始めたいため、
このように「$(function(){」と「});」で囲まれた部分にプログラムが記述されることが多い。

まとめると、次のような書き方が基本になる。

<script type="text/javascript" src="https://ipl.sfc.keio.ac.jp/text/info2-2018-9/lib/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(function(){
  jQueryのプログラム
});
</script>

さて、多くの場合「$(function(){」と「});」で囲まれた部分にプログラムが記述されると述べたが、
イベントドリブンでプログラムを動かす場合等はこの限りではない。
例えば次のプログラムを見てほしい。
こちらの方が親しみがあるかもしれません。

<div id="helloworld">Hello World!</div>
<button onclick="changeColor()">Click me!</button>

<script type="text/javascript" src="https://ipl.sfc.keio.ac.jp/text/info2-2018-9/lib/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
function changeColor() {
  $("#helloworld").css("color", "red");
}
</script>

このプログラムを実行した結果は下記のようになる。
ボタンを押してみてほしい。
「Hello World!」と表示されている部分の色が変わっただろう。
つまり、これまでgetElementById()等を駆使して行ってきた操作をjQueryを使うことによって、短く簡単に記述している。

Hello World!
Click me!

ここでJQueryのセレクタとしては、新しく「#helloworld」が出てきた。
jQueryでは、文字列の前に「#」をつけると、id属性を指定することになります。
なにも付けないときは要素を、「#」を付けるとid属性を指定することになる。
これは先にも述べたとおり、CSSのセレクタの指定と同じである。

セレクタ

上で見てきたように、jQueryを使いこなすためにはセレクタを使いこなす必要がある。
ここではセレクタの指定の仕方をより詳しく見てく。

要素セレクタ

要素セレクタは、上記でも説明した通り特定の要素を指定するためのセレクタである。
指定した要素が複数存在すると、その全部が対象となる。
記述方法は、単に要素名を指定するだけである。

IDセレクタ

IDセレクタは、要素につけらているid属性を指定するためのものである。
1つのページには同じid属性をもつ要素は存在してはいけないので、この指定方法を使うと、特定の1つの要素のみを指定することが出来る。
記述方法は、id属性名の前に「#」をつける。
要素セレクタとIDセレクタをつなげて「$(“div#helloworld”)」のように書くこともできる。
ただしここで、「div」は要素名、「helloworld」はid属性の値である。

クラスセレクタ

クラスセレクタは、要素につけらているclass属性を指定するためのものである。
指定したクラスが複数存在すると、その全部が対象となる。
記述方法は、class属性名の前に「.」をつける。
要素セレクタとIDセレクタをつなげて「$(“div.article”)」のように書くこともできる。
ただしここで、「div」は要素名、「article」はclass属性の値である。

子孫セレクタ

子孫セレクタは、ある要素の更に内側にある要素を絞り込むためのものである。
例えば「子孫セレクタは子孫を指定するためのものである。」という文章があり、div要素の中にあるstrong要素、つまり「子孫セレクタ」の部分を指定するような場合に使う。
記述方法は、親要素と子孫要素をスペースで区切って連続して書く。
例えば「$(“div strong”)」のように記述する。
必ずしも要素名である必要はなく、「$(“.article strong”)」のような指定も可能である。

ユニバーサルセレクタ

ユニバーサルセレクタは、全ての要素を選択するためのものである。
ユニバーサルセレクタを指定するためには「*(アスタリスク)」を使う。
例えば、div要素の中の全ての要素を指定するためには、「$(“div *”)」のように記述する。

複数のセレクタ(or)

複数のセレクタのうちどれかに合致すればよいというタイプの指定手法である。
複数のセレクタを並列に指定するためには「,」で区切る。
例えば「$(“#question1,#question2”)」のように指定する。

複数のセレクタ(and)

複数のセレクタのうち全てに合致するものを指定する手法である。
複数のセレクタを区切らずに並べる。
例えばクラスの場合、「$(“.class1.class2”)」のように指定する。
「+」を使って「$(“.class1″+”.class2″)」のように指定するとわかりやすい。

その他のセレクタ

上で紹介した以外にも、jQueryには様々なセレクタが存在する。
より詳しいことはjQueryのドキュメントのセレクタの章を参照してほしい。

<ul>
<li id="campus1" class="tokyo">信濃町</li>
<li id="campus2" class="tokyo">芝共立</li>
<li id="campus3" class="kanagawa">湘南藤沢</li>
<li id="campus4" class="kanagawa">日吉</li>
<li id="campus5" class="tokyo">三田</li>
<li id="campus6" class="kanagawa">矢上</li>
</ul>
<button onclick="reset()">リセット</button><br />
<button onclick="tokyo()">東京</button>
<button onclick="kanagawa()">神奈川</button><br />
<button onclick="campus1()">信濃町</button>
<button onclick="campus2()">芝共立</button>
<button onclick="campus3()">湘南藤沢</button>
<button onclick="campus4()">日吉</button>
<button onclick="campus5()">三田</button>
<button onclick="campus6()">矢上</button>

信濃町
芝共立
湘南藤沢
日吉
三田
矢上
リセット
東京神奈川
信濃町芝共立湘南藤沢日吉三田矢上

jQueryによる文書の操作

jQueryを使うことによって、文書を構成しているHTMLやCSSを操作することができる。
ここでは文書の操作について説明する。

CSSの制御

前の章でも見てきたように、jQueryを使うことによってCSSを動的に操作することが出来る。
CSSを操作するためにはcss()を使う。
css()の書式は「css(プロパティ名, 値)」となっている。
ここでプロパティ名は「”color”」や「”background-color”」のようなプロパティ名、
値はそのプロパティに設定する値の文字列となる。

複数のプロパティを同時に変更することも可能である。
例えば文字の色と背景色を同時に変更するためには次のようにする。
この時、プロパティ名はCSSのそれとは異なり、JavaScriptでCSSを指定する際に使われるプロパティ名である。
つまり、CSSのプロパティ名で「background-color」のように「-」でつながれているものの場合は、「-」を削除し、
次の頭文字を大文字にする。

$("div").css({
  backgroundColor: "red",
  color: "blue"
});

プログラムではCSSのプロパティの値を知りたい場合もある。
このような場合にもcss()を使う。
ただし、プロパティを設定する場合と書式が異なり、「css(プロパティ名)」となる。

<div id="weather">晴れ</div>

<script type="text/javascript" src="https://ipl.sfc.keio.ac.jp/text/info2-2018-9/lib/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
document.write("色は" + $("#weather").css("color") + "です。");
</script>

例えば上のプログラムを実行すると、下のような結果になる。
ここで「rgb(51,51,51)」となっているのが色である。
実際には、ページに指定されているCSSによって表示される色は異なる。
それぞれの値は赤、緑、青を示しており、0〜255の値をとる。

HTMLの操作

これまでにinnerHTML()を用いて、HTML要素の中身を書き換えてきた。
jQueryでも同じ機能を提供している。
jQueryでHTML要素の中身を書き換えるためには「html()」を使う。
使用方法は簡単で、次のようにする。

<div id="weather">晴れ</div>
<script type="text/javascript" src="https://ipl.sfc.keio.ac.jp/text/info2-2018-9/lib/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$("#weather").html("<strong>雨</strong>時々<strong>曇り</strong>");
</script>

この例では、もともとHTMLによって「晴れ」と表示されるはずだった部分を、
「雨時々曇り」に置き換えている。

html()でも、値の取得が可能である。
引数を空にすることによって要素の中のHTML部分を取得することができる。

HTML要素の挿入、移動

jQueryを使うことによって、HTML要素の挿入や移動を行うことができる。
下記の表にまとめる。

メソッドは、sel1 を値として返す。
上記で、sel2 のところに $(“<div>1</div>”) または、”<div>1</div>” などのように、html を書くこともできる。
（html を書く場合は、新規生成＋移動なので、挿入というイメージになる）

メソッドは、移動後の要素を値として返す。
上記で、sel2 のところに、$(“<div>1</div>”) などのように、html を書くこともできる。
（html を書く場合は、新規生成＋移動なので、挿入というイメージになる）

より詳しくはjQueryのドキュメントの操作の章を参照してほしい。
他にも沢山の操作のためのメソッドが用意されている。

フォームからの値の取得

これまでのプログラムでは、フォーム、特にテキストエリアからの値の入力を多用してきた。
このような値の入力についてもjQueryは簡単なインターフェイスを提供している。
例えば、下記は初期の頃に使った例で、名前を入力すると「こんにちは○○さん」と表示されたアラートが出るというものである。

<script type="text/javascript">
function hello(){
  // テキスト要素を特定する
  var name = document.getElementById("text1");

  // アラートを表示する。
  alert("こんにちは、" + name.value + "さん");
}
</script>

<form>
お名前をどうぞ: <input id="text1" type="text" size="20"><input type="button" value="OK" onclick="hello()"> 
</form>

これをjQueryを使って書き直すと次のようになる。
「val()」を用いることによって、簡単にinput要素の値を取得することができる。

<script type="text/javascript" src="https://ipl.sfc.keio.ac.jp/text/info2-2018-9/lib/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
function hello(){
  // アラートを表示する。
  alert("こんにちは、" + $("input#text1").val() + "さん");
}
</script>
 
<form>
お名前をどうぞ: <input id="text1" type="text" size="20"><input type="button" value="OK" onclick="hello()">
</form>

また、val()を使って値をセットすることもできる。
値をセットする場合は「val(値)」と書く。
例えば次のようにする。

$("input#text1").val("佐藤");

メソッドチェーン

1つの要素に対して複数のメソッドを順に適用したい場合、
jQueryではメソッドチェーンというインターフェイスを用意する。
例えば、次に示すように1つの要素に3つの操作をしたいとする。

<div id="soup">付け</div>

<script type="text/javascript" src="https://ipl.sfc.keio.ac.jp/text/info2-2018-9/lib/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$("div#soup").prepend("御");
$("div#soup").prepend("御");
$("div#soup").prepend("お");
</script>

この場合、3つの操作をまとめて次のように書くことができる。

<div id="soup">付け</div>

<script type="text/javascript" src="https://ipl.sfc.keio.ac.jp/text/info2-2018-9/lib/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$("div#soup").prepend("御").prepend("御").prepend("お");
</script>

もちろん、異なるメソッドが混じっていても問題ない。

jQueryによるイベントモデル

jQueryはイベントモデルに対してもインターフェイスを提供している。
ここでは、jQueryを用いたイベントハンドリングの手法を説明する。

ready()再び

一番始めに、jQueryのプログラムは「$(function(){」と「});」の間に書かれることが多いと説明した。
しかし、ここまでこのような例は殆ど出てきていない。
ここでは、「$(function(){」と「});」の意味について少し詳しく説明する。

「$(function(){」〜「});」は前にも述べた通り「$(document).ready(function(){」〜「});」の省略形である。
それでは「$(document).ready(function(){」〜「});」とはいったいなんなのだろう?
jQueryの使い方では、これまで「要素の選択.メソッド」という形をとってきた。
しかし、実はjQueryはその外側にイベントを定義することが出来る。
これが「$(document).ready(function(){」〜「});」の正体である。
「$(document).ready(function(){」〜「});」は「$(document)」、
つまりドキュメント全体に対して「ready()」のイベントが発生した時に実行する、という意味である。
「ready()」イベントはドキュメントが全て読み込まれた時に発生するため、
「$(document).ready(function(){」〜「});」は結論としてページが全て表示された状態になった直後に実行される。
つまり、ページを読み込んでいる途中ではなく、
ページを読み込み終わった後にプログラムを実行する際には「$(document).ready(function(){」〜「});」が使える。

click()とイベントハンドリングの基本

さて、「$(document).ready(function(){」〜「});」のおまじないが理解できたところで、別のイベントについて見てみよう。

まずは、一番基本のイベント、click()である。
click()は名前の通り、要素がクリックされた際に発生するイベントをハンドリングするためのものである。

次のプログラムを見てほしい。
このプログラムでは、1行目のHTML部分でボタンを1つ作っている。
しかし、これまでのようにonclick属性をつかって関数をひもづけていない。
その代わりにJavaScriptのプログラムの方でjQueryを使って「$(“button”).click(function(){」〜「});」で、
イベントハンドラを定義している。
「$(“button”).click()」は、button要素でクリックイベントが発生したら、という意味である。
クリックイベントが発生した際には、関数の内側、つまり中括弧で囲まれた部分が実行される。

<button>Click me</button>

<script type="text/javascript" src="https://ipl.sfc.keio.ac.jp/text/info2-2018-9/lib/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$("button").click(function(){
  alert("Click!!");
});
</script>

しかし、ここで落とし穴がある。
プログラムを次のように変更してみよう。
プログラムは動かなくなる。
これは、プログラムが読み込まれる、つまり実行される時にbutton要素が存在していないためである。

<script type="text/javascript" src="https://ipl.sfc.keio.ac.jp/text/info2-2018-9/lib/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$("button").click(function(){
  alert("Click!!");
});
</script>

<button>Click me</button>

これを回避するためにはどうすれば良いのでだろうか?
ここでいよいよ「$(function(){」〜「});」の出番である。
「$(function(){」〜「});」はドキュメントが全て読み込まれた時に実行されるので、
この中にイベントハンドラを定義する部分も入れ込んでしまえば良いのである。
具体的には次のようになる。
これによって、「$(“button”).click()」の部分が、ページが読み込まれた後に実行されるようになり、
結果としてbutton要素をハンドリングできるようになる。

<script type="text/javascript" src="https://ipl.sfc.keio.ac.jp/text/info2-2018-9/lib/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(function() {
  $("button").click(function(){
    alert("Click!!");
  });
});
</script>

<button>Click me</button>

様々なイベント

jQueryでは、イベントをハンドリングするためのメソッドも沢山用意されている。
主なものを以下にまとめておく。
より詳しくは、jQueryのドキュメントのイベントの章を参照してほしい。

その他のライブラリ

先にも述べたとおり、JavaScriptで使える多くのライブラリが公開されている。
例えば次のようなものはグラフを描いたり、図を描いたりするのに非常に有用なので参考にしてほしい。

• ChartJS[奈良先生資料]

棒グラフ、折れ線グラフ、レーダチャートなどのグラフを描画するためのライブラリ。仕様に従ったデータを用意することにより、容易にグラフを描くことができる。

• D3[奈良先生資料]

D3はデータに基づいて、描画するためのライブラリである。非常に高機能であり様々なことができるが、使い方が少々複雑。

• Tone.js[奈良先生資料]

Webで音を鳴らすことができるAPIであるWeb Audio APIを簡単に利用するためのライブラリ。

<p class="aaa">要素1</p>
<p class="aaa bbb">要素2</p>
<p class="ccc aaa bbb">要素3</p>
<p class="aaa ccc bbb">要素4</p>
<p class="aaa bbb">要素5</p>