JavaScript Advent Calendar 2017 - Qiitaの第5日目です。
「こいつ、動くぞ！*1」自分の作ったものが動く！この喜びをいち早く体験させてくれたjQuery。
だが、HTML→CSS→jQueryという道を辿った方が「次」のステップに進むときに感じる「壁」があります。それはいったい何なのか。
JS（JavaScript）の中でのjQueryの位置付け、そして他のライブラリ、フレームワークとの違いを理解し、この「壁」を突破したい。
これは「脱jQuery」ではなく「卒jQuery」への道。愛するべき我が母校jQueryでの経験を糧に、JSという大空に羽ばたいていきませう！*2
目次：
※参考：JSライブラリ&フレームワークを試してみたシリーズまとめ
qiita.com
JSのライブラリとフレームワーク
jQueryの位置付け
jQueryとは何か。一言でいうとjQueryとは「JSライブラリ」です。
JSライブラリはjQuery以外にもいろいろあり、「ナントカJS」「ナントカ.js」などの名前が付いていることが多いです。
また、「ナントカJS」にはライブラリ以外に「JSフレームワーク」というものもあります。
なお、ライブラリやフレームワークを一切使わないJSのことを「生JS」（またはバニラJS）と呼んだりもします。*3
ライブラリ、フレームワークを使うメリット
では、ライブラリ、フレームワークとはいったい何か。簡単にいうとJSをパワーアップさせるツールです。JSにこれらを組み込むと「再利用性」や「拡張性」が上がります。
JSの基本-前編でも触れたように、生JSにはあらかじめ様々な機能（標準オブジェクト）が備わっており、それらを「関数」「変数」などで組み合わせてプログラミングできます。*4
しかしJSにライブラリやフレームワークを組み込めば、よく使う機能を１つにまとめた便利なメソッドが使えたり（再利用性）、生JSにはない拡張機能が使えたりします（拡張性）。
ライブラリとフレームワークの違い
それでは、ライブラリとフレームワークの違いは何か。
ざっくりといえば「ライブラリ＜フレームワーク」です。とりあえずライブラリよりフレームワークの方がスゴイ！と認識しておけばいいでしょう。
もう少し詳しくいうとライブラリは「部品」、フレームワークは「枠組み」というニュアンスになります。*5
- 主なライブラリ：jQuery、React、three.js など
- 主なフレームワーク：Anglar、Vue.js、Backbone.js など
これまでの内容を図にすると下記のようになります。
生JSとライブラリとフレームワークの関係
生JS、ライブラリ、フレームワークの関係を日常生活に例えると、下記のようなイメージになります。
- 生JS＝商店街
- ライブラリ＝ラーメン屋
- フレームワーク＝フードコート
どういうことだろうか。
生JS＝商店街
例えばあなたがお腹が空いたとします。今日はラーメンが食べたい気分。
自宅の近くの商店街（生JS）には八百屋、肉屋、魚屋などの店があります。あなたが八百屋に行って「ラーメンくださぁい」と言ってみるが案の定「ないよ」と言われてしまいます。
//生JS＝商店街 //あなた「ラーメンくださぁい」 anata.ramen(); //八百屋「ないよ！」
仕方がないのであなたは八百屋でネギ、肉屋で豚肉、などの具材（標準オブジェクト）を買い、自宅の台所で調理（関数）します。
ようやくラーメンを食べることができました。
//ラーメンレシピ（関数定義） function ramen() { //具材（標準オブジェクト） var oyu = mizu.wakasu(); var dashi = "torigara"; var tare = "shoyu"; var soup = oyu + dashi + tare; cyukaMen.yuderu(); negi.kizamu(); cyasyu.kiru(); ... } //ラーメンを調理（関数実行） anata.ramen(); //ラーメンを食べられた！
ライブラリ＝ラーメン屋
毎日自分で調理をするのは大変。そりゃあ疲れている日もあります。
そういう時は少し遠くのラーメン屋（ライブラリ）に行きましょう。「ラーメンくださぁい」と言えば「あいよ」とラーメンが出てきます。
//ライブラリ＝ラーメン屋 //あなた「ラーメンくださぁい」 anata.ramen(); //ラーメン屋「あいよ！」
なお、上記のramen()メソッドはhtml内にライブラリ（ramen.js）のファイルを読み込まないと実行されません。
<!--ラーメン屋に行く （ライブラリ読み込み）--> <script src="js/ramen.js"></script>
参考：HTMLの基本書式はこちら
【HTMLの基本】書ける前に読む！HTML、CSS、JSの書式-2
次の日、またお腹が空いた。今日はカレーが食べたい気分。
あなたはまたラーメン屋に行き「カレーくださぁい」と言ってみたものの、「ないよ」と言われてしまいました。
//（次の日） //あなた「カレーくださぁい」 anata.curry(); //ラーメン屋「ないよ！」
こういう時は仕方がないので、ラーメン屋を出てカレー屋（別のライブラリ）を探さなければいけません。
お、カレー屋が見つかりました！
<!--カレー屋に行く （ライブラリ読み込み）--> <script src="js/curry.js"></script>
ようやくカレーを食べることができました。
//別のライブラリ＝カレー屋 //あなた「カレーくださぁい」 anata.curry(); //カレー屋「あいよ！」
フレームワーク＝フードコート
もしあなたが郊外のショッピングセンターまで足を伸ばし、フードコート（フレームワーク）に行ったとします。なんということでしょう。
そこにはラーメン屋、カレー屋、ハンバーガー店、牛丼屋などいろんな店が揃っているじゃないか！
あなたがその日の気分に従って好きな物を注文をすれば「あいよ」と料理が出てきます。
//フレームワーク＝フードコート //あなた「ラーメンくださぁい」 anata.ramen(); //ラーメン屋「あいよ！」 //あなた「カレーくださぁい」 anata.curry(); //カレー屋「あいよ！」
なお、上記のramen()メソッド、curry()メソッドもhtml内にフレームワーク（foodcourt.js）のファイルを読み込まなければ実行されません。
<!--フードコートに行く （フレームワーク読み込み）--> <script src="js/foodcourt.js"></script>
こうして比べるとフレームワークが一番いいじゃないか、と思われるかもしれない。
しかし世の中には「俺は○○屋のラーメン以外は食いたくないんだ！」という方や「自炊派なんですー」という方もいます。
どういう方法を取るかはケースバイケースです。
※2019/02/11 追記 フレームワークの例をもっと具体的なイメージで例えてくださっているツイートがありましたのでご紹介。
…むにゃ🤔
— aka567000 (@aka567000) 2019年2月4日
フレームワークは起承転結やGridLayoutみたいな思考や実装の雛型。
ライブラリは単発で使う道具。
フードコートは単に種類が豊富なライブラリ…🤔？
強いて言えば「食券を買う→◯◯を食べる→片付ける」がフレームワーク。フレームワークの中で何のライブラリを使うかは自由…かな🤔 https://t.co/kzRtZdMFXu
jQueryの壁
さて、JSの中でのjQueryの位置付けはなんとなくイメージができたと思います。
ここからは冒頭に書いたjQueryの「壁」について触れていきます。
jQueryプラグイン
まず第一段階として、jQueryの中にも「壁」があります。
jQueryの拡張機能「プラグイン」を組み込んで済ませている方にとっては、jQueryの基本書式自体が「壁」です。どういうことか。
スライダーによく使われるプラグイン「bxSlider」のコードを見てみましょう。
まずは冒頭に$(function(){、最後に});を書く。
これは「チチンプイプイ」や「鏡よ鏡」みたいなもので、jQueryの「オマジナイ」と言われる決まり文句です。
//jQueryのオマジナイ $(function(){ //処理 });
その中にbxsliderプラグインの処理を書く。
//bxsliderプラグイン $(function(){ $(".slider").bxSlider(); });
$('.slider').bxSlider();で、class名sliderの要素にbxslider()メソッドを適用しています。たった1行。めちゃめちゃシンプル！
なお、bxslider()メソッドはhtml内にjqueryファイルとbxsliderプラグインのファイルを読み込んで初めて実行されます。
<!--jquery読み込み--> <script src="js/jquery.min.js"></script> <!--bxsliderプラグイン読み込み--> <script src="js/jquery.bxslider.min.js"></script>
この時、ファイルを読み込む順番が上下逆さまだとbxslider()メソッドは「そんなメソッドはないよ」と実行されない！
bxsliderプラグイン自体がjQueryの書式で書かれているため、その書式を定義するjQueryファイルを先に読み込まないとブラウザがメソッドを認識できないのです。
jQueryプラグインのオプション
bxsliderプラグインにオプション設定を加えたい場合は下記のようになります。
//プラグインのオプション $(function(){ $(".slider").bxSlider({ mode: 'fade', speed: 500, infiniteLoop: true } ); });
上から「切り替えをフェードに」「スピードを0.5秒に」「ループあり」という意味ですが、この書き方がまためちゃめちゃCSSっぽい！*6
/*CSSっぽいイメージ*/ .slider:bxSlider { mode: 'fade'; speed: 500; infiniteLoop: true; }
そのため、前後の「オマジナイ」さえ忘れなければ、あとはCSS感覚で「こいつ、動くぞ！」の喜びを味わうことができる。なんとも素敵すぎます！
参考：CSSの基本書式はこちら
【CSSの基本】書ける前に読む！HTML、CSS、JSの書式-3
jQueryの書式
プラグインのオプションで済んでいるうちはいいが、そのうち、やりたいことにバッチリと合うプラグインが見つからない時があります。
そういうなってくるとjQueryの書式でゼロから書きたくなってきます。
jQueryの書式ってどんなん？
jQueryを習得する上で、おそらく多くの方が読んだであろう「ドーナツ本」の著者、西畑さんによるjQuery解説記事からjQueryコードを引用します。
//jQueryの書式（アコーディオンパネル） $(function(){ $("dd:not(:first)").css("display","none"); $("dl dt").click(function(){ if($("+dd",this).css("display")=="none"){ $("dd").slideUp("slow"); $("+dd",this).slideDown("slow"); } }); });
先ほどのCSSっぽかったプラグインと比べるとグッとプログラミングチックになってきた。これがjQueryの第1の「壁」といえるでしょう。
それでもこれを習得すれば「生JS」に比べてかなりコンパクトなコード量で記述することができます！
なお、上記のcss()メソッドやslideDown()メソッドなどはhtml内にjQueryファイルを読み込まないと「そんなメソッドはないよ」と実行してくれません。
<!--jquery読み込み--> <script src="js/jquery.min.js"></script>
他のライブラリ
jQueryである程度のことが実現できるようになると、他のライブラリも使ってみたくなります。例えばブラウザで3D表現を実現するwebGLには「three.js」というライブラリがありますね。
HTML5Experts.jpにあるthree.js解説記事からthree.jsのコードを引用します。
//three.jsコード var main = function () { var scene = new THREE.Scene(); var width = 600; var height = 400; var fov = 60; var aspect = width / height; var near = 1; var far = 1000; var camera = new THREE.PerspectiveCamera( fov, aspect, near, far ); camera.position.set( 0, 0, 50 ); var renderer = new THREE.WebGLRenderer(); renderer.setSize( width, height ); document.body.appendChild( renderer.domElement ); var directionalLight = new THREE.DirectionalLight( 0xffffff ); directionalLight.position.set( 0, 0.7, 0.7 ); scene.add( directionalLight ); var geometry = new THREE.CubeGeometry( 30, 30, 30 ); var material = new THREE.MeshPhongMaterial( { color: 0xff0000 } ); var mesh = new THREE.Mesh( geometry, material ); scene.add( mesh ); ( function renderLoop () { requestAnimationFrame( renderLoop ); mesh.rotation.set( 0, mesh.rotation.y + .01, mesh.rotation.z + .01 ); renderer.render( scene, camera ); } )(); }; window.addEventListener( 'DOMContentLoaded', main, false );
参考：初心者でも絶対わかる、WebGLプログラミング＜three.js最初の一歩＞
jQueryに比べるとコード量がグッと増えてきましたね（汗）。ましてやjQueryプラグインだけで済んでいた方にとっては完全お手上げ状態ではないでしょうか。
実はjQuery以外のライブラリやフレームワークは基本的に「生JS」と同じ書式で書かれているのです。そのため生JSの理解は必須と考えていいでしょう。これがjQueryの第2の「壁」です！
なお、上記のPerspectiveCamera()メソッド、WebGLRenderer()メソッドなども、html内にthree.jsファイルを読み込まないと「そんなメソッドはないよ」と実行してくれません。
<!--three.jsファイル読み込み--> <script src="js/three.min.js"></script>
jQueryの「壁」をまとめると下記のようになります。
- CSS
- jQueryプラグイン（CSSに近い♪）
＝＝＝＝＝＝＝（第1の壁）＝＝＝＝＝＝＝ - jQuery（生JSよりコンパクト！）
＝＝＝＝＝＝＝（第2の壁）＝＝＝＝＝＝＝ - 他のライブラリ、フレームワーク（生JSに近い…）
- 生JS
jQueryを生JSの書式で読み解く
jQueryの「壁」を生JSという「ハシゴ」を使って乗り越える！
jQuery＝糖衣構文
jQueryが生JSや他のライブラリ、フレームワークと比べてコード量がコンパクトなのは「糖衣構文」（シンタックスシュガー）というコンセプトで作られているためです。
糖衣構文とは同じ処理をよりシンプルな書き方で実現するための構文。苦い薬を飲みやすくするために包む砂糖（糖衣）のようなイメージです。*7
では、糖衣構文であるjQueryは生JSとは全く違う言語なのだろうか。いや、そんなことはありません！
一つ一つの書式を読み解いていくと、実はjQueryも全て生JSの書式で書かれていることがわかります。
参考：JSの基本書式についてはこちら
【JSの基本-前編】書ける前に読む！HTML、CSS、JSの書式-4
【JSの基本-後編】書ける前に読む！HTML、CSS、JSの書式-5
jQueryの「オマジナイ」を読み解く
まず始めに、先ほど触れたjQueryの「オマジナイ」から読み解いてみましょう。こんなコード。
//jQueryのオマジナイ $(function(){ //処理 });
コードを読み解くコツは、カッコと閉じカッコを意識しながら、外側から内側に向かって順番に見ていくことです。
jQueryのオマジナイの一番外側は下記です。
//$( )メソッド
$(処理);
$( )メソッドは$が関数名で「ページの要素を全て読み込み終わってからカッコの中を処理する」という意味。
オブジェクトはページ全体で、ここでは省略されています。*8
これで万が一jQueryコードの中にエラーがあったとしても、HTMLページの読み込みは最後まで進みます。
なお、以下の書き方も同じことを意味します。
//jQuery( )メソッド //（$( )メソッドと同義） jQuery(処理);
他のライブラリ、フレームワークと併用する時に$という名前がバッティングする可能性はゼロではありません。
そんな時のために絶対にバッティングしなそうなjQueryという名前でも同じ挙動になるよう定義されています。
$( )メソッドのカッコの中には「JSの基本-前編」でも触れた「無名関数」が入っています。
//無名関数 function(){ブロック文}
両方合わせるとこうなる。もう「オマジナイ」ではなくコードの意味が理解できると思います。
//オマジナイ…じゃない！ $(function(){ //処理 });
「オマジナイ」のままにしていると、よくある無名関数の波カッコ{ }の閉じ忘れなどのエラーが起きてたとき、原因を突き止めることができません。
//エラー！な、なんで！？（汗） $(function(){ //処理 ); //（←無名関数の閉じカッコ「}」がない！）
プラグインのオプションを読み解く
次にプラグインのオプションを見てみましょう。
//プラグインのオプション $(function(){ $(".slider").bxSlider({ mode: 'fade', speed: 500, infiniteLoop: true }); });
先ほどの「オマジナイ」を抜いて中身を取り出すとこうなる。
$(".slider").bxSlider({ mode: 'fade', speed: 500, infiniteLoop: true } );
一番外側を見るとこうなる。
$(".slider").bxSlider( );
また$( )メソッドが出てきたが、カッコの中にCSSのセレクタを入れると「jQueryオブジェクト」といってオブジェクト化します。
jQueryオブジェクトのすぐ後にはbxSlider( )メソッドが繋がっています。
生JSの似た例では「DOM」があります。
//DOM document.querySelector(".link").getAttribute("href");
DOMもquerySelector( )はメソッドのようにカッコが付いているがオブジェクト化しており、後ろにメソッドを繋げることができる。
「.linkセレクタのhref属性を取得する」という意味になります。
さらにjQueryには「メソッドチェーン」という特徴があり、後ろにメソッドを連続で繋げることができます！
//メソッドチェーン $("セレクタA").メソッド1( ).メソッド2( ).メソッド3( ).メソッド4( );
「セレクタAをメソッド1し、メソッド2し、メソッド3し、メソッド4する」という意味。
通常は下記のような書き方になります。
//メソッドチェーンを使わない書き方 $("セレクタA").メソッド1( ); $("セレクタA").メソッド2( ); $("セレクタA").メソッド3( ); $("セレクタA").メソッド4( );
「セレクタAをメソッド1し、セレクタAをメソッド2し、セレクタAをメソッド3し、セレクタAをメソッド4する」という意味。
メソッドチェーンの方がコンパクトですね！
次にbxSlider( )メソッドのカッコ中を見ていきます。
//bxSlider( )のカッコの中 { mode: 'fade', speed: 500, infiniteLoop: true }
CSSチックで素敵なコードでしたね。
これは実は「JSの基本-前編」で触れた「連想配列」の書式です。
//連想配列の書式 {キー: 値, キー: 値, キー: 値}; //（改行を取るとこうなる） {mode: 'fade', speed: 500, infiniteLoop: true}
プラグインの中には連想配列（キーと紐づいた値）によって様々な「初期値」が設定されており、その中の変更したいキーの値だけを上書きしているわけです。
jQueryの基本書式を読み解く
最後にjQueryの基本書式を読み解いてみましょう。先ほどのコードはこう。
//jQueryの書式（アコーディオンパネル） $(function(){ $("dd:not(:first)").css("display","none"); $("dl dt").click(function(){ if($("+dd",this).css("display")=="none"){ $("dd").slideUp("slow"); $("+dd",this).slideDown("slow"); } }); });
これも一番外側の「オマジナイ」を抜くとこうなる。
$("dd:not(:first)").css("display","none"); $("dl dt").click(function(){ if($("+dd",this).css("display")=="none"){ $("dd").slideUp("slow"); $("+dd",this).slideDown("slow"); } });
上から見ていきましょう。まず1行目。
dd要素のセレクタとcss( )メソッドがある。
$("dd").css( );
セレクタ内のdd要素にはコロン:で指定が続いています。
//セレクタ $("dd:not( )")
:not( )は「カッコ内以外」を意味しています。ではカッコ内を見てみましょう。
//セレクタ $("dd:not(:first)")
カッコ内の:farstは「一番最初」という意味。
全体で「一番最初以外のdd要素」という意味になります。
次に.css( )メソッドのカッコの中はこんな書式。
//css( )メソッド
.css(第1引数, 第2引数);
カッコの中には引数が2つあり「CSSの第1引数（プロパティ）を第2引数（値）にする」を意味する。
実際の内容はこうです。
//css( )メソッド .css("display","none");
「CSSのdisplayプロパティの値をnoneにする」という意味になります。
全て合わせるとこうなる。
$("dd:not(:first)").css("display","none");
「一番最初以外のdd要素のCSSのdisplayプロパティの値をnoneにする」という意味になります。
次の行を見ます。
$("dl dt").click( 処理 );
click( )メソッドは「クリックした時にカッコ内の処理をする」というイベントです。
「dl要素内のdt要素をクリックした時にカッコ内の処理を実行する」という意味になります。
カッコの中には無名関数が入っています。
$("dl dt").click(function() { //処理 });
次に無名関数の中を見ていきます。
一番外側は「JSの基本-後編」で触れた「if文」です。
//if文 if(条件式){ブロック文}
if文の条件式の中を見ていきましょう。まずセレクタは下記のような書式。
//セレクタ $("+セレクタ", this)
$( ) メソッドの中に引数が2つある。第1引数はセレクタ名の前に「+」がついており、これは「次の」という意味。
第2引数はthis。これは無名関数の外のクリックしたセレクタ（dl dt）自体を意味します。
「（クリックしたセレクタの）次のセレクタ」という意味になります。
セレクタの後に続くcss( )メソッドを見てみましょう。
//css( )メソッド .css("プロパティ")=="値"
css( )メソッドのカッコの中にはプロパティが入り、カッコの後ろで値を比較演算子==が繋いでいます。
「CSSのプロパティが値と等しければ」という意味になる。
セレクタとcss( )メソッドを合わせるとこうなる。
//条件式の中身 $("+セレクタ", this).css("プロパティ")=="値"
「（クリックしたセレクタの）次のセレクタのCSSのプロパティが値と等しければ」という意味。
具体的な内容を入れるとこうなります。
//条件式の中身 $("+dd",this).css("display")=="none"
「（クリックしたdl dtの）次にあるdd要素のCSSのdisplayプロパティの値がnoneならば」という意味。
更にif文の条件式の中に入れるとこうなる。
//if文 if($("+dd",this).css("display")=="none"){ //ブロック文（処理内容） }
「もし（クリックしたdl dtの）次にあるdd要素のCSSのdisplayプロパティの値がnoneならばブロック文を処理する」という意味になります。
次にif文のブロック文の中身を見ていきます。1行目は下記です。
//ブロック文：1行目 $("dd").slideUp("slow");
「dd要素はslowのスピードでスライドして閉じる（slideUp）」という意味。
次の行を見ていきます。
//ブロック文：2行目 $("+dd",this).slideDown("slow");
「（クリックしたdl dtの）次のdd要素はslowのスピードでスライドして開く（slideDown）」という意味になります。
if文全体ではこうです。
//if文 if($("+dd",this).css("display")=="none"){ $("dd").slideUp("slow"); $("+dd",this).slideDown("slow"); }
「もし（クリックしたdl dtの）次のdd要素のCSSのdisplayプロパティの値がnoneならば、
dd要素はslowのスピードでスライドして閉じ、
（クリックしたdl dtの次の）dd要素はslowのスピードでスライドして開く」
という意味になります。
再び「オマジナイ」も含めたコード全体を見直すと…
//jQueryの書式（アコーディオンパネル） $(function(){ $("dd:not(:first)").css("display","none"); $("dl dt").click(function(){ if($("+dd",this).css("display")=="none"){ $("dd").slideUp("slow"); $("+dd",this).slideDown("slow"); } }); });
「（ページを読み込んだ直後に）
一番最初以外のdd要素のCSSのdisplayプロパティの値をnoneにする。
dl要素内のdt要素をクリックした時に、
もしdt要素の次のdd要素のCSSのdisplayプロパティの値がnoneならば、
dd要素はslowのスピードでスライドして閉じ、
クリックしたdl dtの次のdd要素はslowのスピードでスライドして開く」
という意味になります。
このように一見すると生JSとは違う書式に見えたjQueryも、実は生JSと同じ書式で書かれていたことがわかります。
jQueryも他のライブラリ、フレームワークも生JSも同じ仲間に見えてくる！
まとめ
jQueryは2006年に誕生し10年以上経ちます。当時の先人たちはきっとjQueryの糖衣構文によってJSが「楽」になった！と感じたと思います。
10年の時を経て生JSを知らない子供達（jQuerer）が現れました。jQueryerにとってjQuery以外のライブラリ、フレームワーク、そして元となる生JSは「壁」に感じてしまいます。
jQueryerが「次」のステップに進むためには、生JSの理解はやはり必須と思います。
まずはこれまで自分が書いてきたjQueryのコードを生JSの書式で読み解いてみるのはいかがでしょうか。
「自分はすでに生JSを書いてきた」と実感できることで「次」のステップに進みやすくなると思います。
jQueryerの皆さん、「卒jQuery」はjQueryを捨てる！捨てない！の二元論ではありません。
ただただ単純に「次」に進む、できることを増やす、幅を広げることです。共に「壁」を乗り越えていきませう！
そこにはjQueryと出会ったあの時（「こいつ、動くぞ！」）と同じような喜びが待っていると信じて。*9
参考：JSの基本
【JSの基本-前編】書ける前に読む！HTML、CSS、JSの書式-4
【JSの基本-後編】書ける前に読む！HTML、CSS、JSの書式-5
※参考：JSライブラリ&フレームワークを試してみたシリーズまとめ
qiita.com
*1:ガ○ダム大地に立つ！！
*2:「脱」には「脱会」「脱退」のような暗いイメージがあるが、jQueryに少なからず「こいつ、動くぞ！」的な喜びを体験させてもらった身としては、「卒業」の「卒」の字を付けたく思います！
*3:ガンダムの第1作目を「ファーストガンダム」と呼ぶようなもので、他との区別のためです。
*4:標準オブジェクトの中には「ビルトインオブジェクト」「ブラウザオブジェクト」「DOMオブジェクト」の3種類があります。
*5:ただし、機能が結構充実しているライブラリがフレームワークと紹介されることもあり、境界は必ずしも明確ではないようです。
*6:行末がセミコロンじゃなくてカンマ、そして一番最後の行末にはカンマがないのがCSSとの違い
*7:しかしながら、他のライブラリ、フレームワークも便利なメソッドが定義されており、そのメソッドで「再利用」や「拡張」を実現します。もしWebGLをthree.JSを使わずに生JSだけで書こうとしたら、やはり膨大なコード量になってしまいます！
*8:JSのwindowオブジェクトが省略されるのと似た考え方
*9:そしておそらくプログラム言語を1つ習得できれば2つ目以降のプログラミング言語も習得しやすくなると思っています。
