イイダリョウのブログ。Qiitaの第5日目です。「こいつ、動くぞ!*1」自分の作ったものが動く!この喜びをいち早く体験させてくれたjQuery。HTML→CSS→jQueryという道を辿った方が「次」のステップに進むときに感じる「壁」があります。それはいったい何なのか。JS(JavaScript)の中でのjQueryの位置付け、そして他のライブラリ、フレームワークとの違いを理解し、この「壁」を突破したい。これは「脱jQuery」ではなく「卒jQuery」への道。他のライブラリjQueryを生JSの書式で読み解くjQuery=糖衣構文jQueryの「オマジナイ」を読み解くプラグインのオプションを読み解くjQueryの基本書式を読み解くまとめJSのライブラリとフレームワークjQueryの位置付けjQueryとは何か。一言でいうとjQueryとは「JSライブラリ」です。JSライブラリはjQuery以外にもいろいろあり、「ナントカJS」「ナントカ.js」などの名前が付いていることが多いです。「ナントカJS」にはライブラリ以外に「JSフレームワーク」というものもあります。ライブラリやフレームワークを一切使わないJSのことを「生JS」(またはバニラJS)と呼んだりもします。*3ライブラリ、フレームワークを使うメリットでは、ライブラリ、フレームワークとはいったい何か。簡単にいうとJSをパワーアップさせるツールです。JSにこれらを組み込むと「再利用性」や「拡張性」が上がります。JSの基本-前編でも触れたように、生JSにはあらかじめ様々な機能(標準オブジェクト)が備わっており、それらを「関数」「変数」などで組み合わせてプログラミングできます。*4しかしJSにライブラリやフレームワークを組み込めば、よく使う機能を1つにまとめた便利なメソッドが使えたり(再利用性)、生JSにはない拡張機能が使えたりします(拡張性)。ライブラリとフレームワークの違いそれでは、ライブラリとフレームワークの違いは何か。いえば「ライブラリ<フレームワーク」です。ライブラリよりフレームワークの方がスゴイ!と認識しておけばいいでしょう。詳しくいうとライブラリは「部品」、フレームワークは「枠組み」というニュアンスになります。これまでの内容を図にすると下記のようになります。生JS、ライブラリ、フレームワークの関係を日常生活に例えると、下記のようなイメージになります。生JS=商店街ライブラリ=ラーメン屋フレームワーク=フードコートどういうことだろうか。あなたがお腹が空いたとします。今日はラーメンが食べたい気分。あなたが八百屋に行って「ラーメンくださぁい」と言ってみるが案の定「ないよ」と言われてしまいます。仕方がないのであなたは八百屋でネギ、肉屋で豚肉、などの具材(標準オブジェクト)を買い、自宅の台所で調理(関数)します。ラーメンを食べることができました。毎日自分で調理をするのは大変。そりゃあ疲れている日もあります。いう時は少し遠くのラーメン屋(ライブラリ)に行きましょう。「ラーメンくださぁい」と言えば「あいよ」とラーメンが出てきます。//ライブラリ=ラーメン屋//あなた「ラーメンくださぁい」anata.ramen();//ラーメン屋「あいよ!」なお、上記のramen()メソッドはhtml内にライブラリ(ramen.js)のファイルを読み込まないと実行されません。src="js/ramen.js"></script>参考:HTMLの基本書式はこちら【HTMLの基本】書ける前に読む!HTML、CSS、JSの書式-2次の日、またお腹が空いた。今日はカレーが食べたい気分。あなたはまたラーメン屋に行き「カレーくださぁい」と言ってみたものの、「ないよ」と言われてしまいました。//(次の日)//あなた「カレーくださぁい」anata.curry();//ラーメン屋「ないよ!」こういう時は仕方がないので、ラーメン屋を出てカレー屋(別のライブラリ)を探さなければいけません。src="js/curry.js"></script>ようやくカレーを食べることができました。//別のライブラリ=カレー屋//あなた「カレーくださぁい」anata.curry();//カレー屋「あいよ!」フレームワーク=フードコートもしあなたが郊外のショッピングセンターまで足を伸ばし、フードコート(フレームワーク)に行ったとします。なんということでしょう。そこにはラーメン屋、カレー屋、ハンバーガー店、牛丼屋などいろんな店が揃っているじゃないか!あなたがその日の気分に従って好きな物を注文をすれば「あいよ」と料理が出てきます。//フレームワーク=フードコート//あなた「ラーメンくださぁい」anata.ramen();//ラーメン屋「あいよ!」//あなた「カレーくださぁい」anata.curry();//カレー屋「あいよ!」なお、上記のramen()メソッド、curry()メソッドもhtml内にフレームワーク(foodcourt.js)のファイルを読み込まなければ実行されません。src="js/foodcourt.js"></script>こうして比べるとフレームワークが一番いいじゃないか、と思われるかもしれない。世の中には「俺は○○屋のラーメン以外は食いたくないんだ!」という方や「自炊派なんですー」という方もいます。いう方法を取るかはケースバイケースです。フレームワークの例をもっと具体的なイメージで例えてくださっているツイートがありましたのでご紹介。...むにゃ🤔フレームワークは起承転結やGridLayoutみたいな思考や実装の雛型。ライブラリは単発で使う道具。フードコートは単に種類が豊富なライブラリ...🤔?強いて言えば「食券を買う→◯◯を食べる→片付ける」がフレームワーク。2019年2月4日jQueryの壁さて、JSの中でのjQueryの位置付けはなんとなくイメージができたと思います。ここからは冒頭に書いたjQueryの「壁」について触れていきます。jQueryプラグインまず第一段階として、jQueryの中にも「壁」があります。jQueryの拡張機能「プラグイン」を組み込んで済ませている方にとっては、jQueryの基本書式自体が「壁」です。スライダーによく使われるプラグイン「bxSlider」のコードを見てみましょう。冒頭に$(function(){、最後に});を書く。これは「チチンプイプイ」や「鏡よ鏡」みたいなもので、jQueryの「オマジナイ」と言われる決まり文句です。//処理});その中にbxsliderプラグインの処理を書く。$(".slider").bxSlider();});$('.slider').bxSlider();で、class名sliderの要素にbxslider()メソッドを適用しています。シンプル!なお、bxslider()メソッドはhtml内にjqueryファイルとbxsliderプラグインのファイルを読み込んで初めて実行されます。src="js/jquery.bxslider.min.js"></script>この時、ファイルを読み込む順番が上下逆さまだとbxslider()メソッドは「そんなメソッドはないよ」と実行されない!bxsliderプラグイン自体がjQueryの書式で書かれているため、その書式を定義するjQueryファイルを先に読み込まないとブラウザがメソッドを認識できないのです。jQueryプラグインのオプションbxsliderプラグインにオプション設定を加えたい場合は下記のようになります。true;}そのため、前後の「オマジナイ」さえ忘れなければ、あとはCSS感覚で「こいつ、動くぞ!」の喜びを味わうことができる。なんとも素敵すぎます!参考:CSSの基本書式はこちら【CSSの基本】書ける前に読む!HTML、CSS、JSの書式-3jQueryの書式プラグインのオプションで済んでいるうちはいいが、そのうち、やりたいことにバッチリと合うプラグインが見つからない時があります。いうなってくるとjQueryの書式でゼロから書きたくなってきます。jQueryの書式ってどんなん?jQueryを習得する上で、おそらく多くの方が読んだであろう「ドーナツ本」の著者、西畑さんによるjQuery解説記事からjQueryコードを引用します。先ほどのCSSっぽかったプラグインと比べるとグッとプログラミングチックになってきた。これがjQueryの第1の「壁」といえるでしょう。それでもこれを習得すれば「生JS」に比べてかなりコンパクトなコード量で記述することができます!なお、上記のcss()メソッドやslideDown()メソッドなどはhtml内にjQueryファイルを読み込まないと「そんなメソッドはないよ」と実行してくれません。src="js/jquery.min.js"></script>他のライブラリjQueryである程度のことが実現できるようになると、他のライブラリも使ってみたくなります。ブラウザで3D表現を実現するwebGLには「three.js」というライブラリがありますね。HTML5Experts.jpにあるthree.js解説記事からthree.jsのコードを引用します。);参考:初心者でも絶対わかる、WebGLプログラミング<three.js最初の一歩>jQueryに比べるとコード量がグッと増えてきましたね(汗)。jQueryプラグインだけで済んでいた方にとっては完全お手上げ状態ではないでしょうか。実はjQuery以外のライブラリやフレームワークは基本的に「生JS」と同じ書式で書かれているのです。そのため生JSの理解は必須と考えていいでしょう。これがjQueryの第2の「壁」です!なお、上記のPerspectiveCamera()メソッド、WebGLRenderer()メソッドなども、html内にthree.jsファイルを読み込まないと「そんなメソッドはないよ」と実行してくれません。src="js/three.min.js"></script>jQueryの「壁」をまとめると下記のようになります。CSSjQueryプラグイン(CSSに近い♪)=======(第1の壁)=======jQuery(生JSよりコンパクト!)=======(第2の壁)=======他のライブラリ、フレームワーク(生JSに近い...)生JSjQueryを生JSの書式で読み解くjQueryの「壁」を生JSという「ハシゴ」を使って乗り越える!jQuery=糖衣構文jQueryが生JSや他のライブラリ、フレームワークと比べてコード量がコンパクトなのは「糖衣構文」(シンタックスシュガー)というコンセプトで作られているためです。糖衣構文とは同じ処理をよりシンプルな書き方で実現するための構文。苦い薬を飲みやすくするために包む砂糖(糖衣)のようなイメージです。*7では、糖衣構文であるjQueryは生JSとは全く違う言語なのだろうか。いや、そんなことはありません!一つ一つの書式を読み解いていくと、実はjQueryも全て生JSの書式で書かれていることがわかります。参考:JSの基本書式についてはこちら【JSの基本-前編】書ける前に読む!HTML、CSS、JSの書式-4【JSの基本-後編】書ける前に読む!HTML、CSS、JSの書式-5jQueryの「オマジナイ」を読み解くまず始めに、先ほど触れたjQueryの「オマジナイ」から読み解いてみましょう。//処理});コードを読み解くコツは、カッコと閉じカッコを意識しながら、外側から内側に向かって順番に見ていくことです。jQueryのオマジナイの一番外側は下記です。)メソッドは$が関数名で「ページの要素を全て読み込み終わってからカッコの中を処理する」という意味。オブジェクトはページ全体で、ここでは省略されています。*8これで万が一jQueryコードの中にエラーがあったとしても、HTMLページの読み込みは最後まで進みます。以下の書き方も同じことを意味します。)メソッドと同義)jQuery(処理);他のライブラリ、フレームワークと併用する時に$という名前がバッティングする可能性はゼロではありません。そんな時のために絶対にバッティングしなそうなjQueryという名前でも同じ挙動になるよう定義されています。)メソッドのカッコの中には「JSの基本-前編」でも触れた「無名関数」が入っています。//無名関数function(){ブロック文}両方合わせるとこうなる。「オマジナイ」ではなくコードの意味が理解できると思います。}の閉じ忘れなどのエラーが起きてたとき、原因を突き止めることができません。//(←無名関数の閉じカッコ「}」がない!)プラグインのオプションを読み解く次にプラグインのオプションを見てみましょう。});});先ほどの「オマジナイ」を抜いて中身を取り出すとこうなる。);一番外側を見るとこうなる。)メソッドが出てきたが、カッコの中にCSSのセレクタを入れると「jQueryオブジェクト」といってオブジェクト化します。)メソッドが繋がっています。生JSの似た例では「DOM」があります。)はメソッドのようにカッコが付いているがオブジェクト化しており、後ろにメソッドを繋げることができる。「.linkセレクタのhref属性を取得する」という意味になります。);「セレクタAをメソッド1し、メソッド2し、メソッド3し、メソッド4する」という意味。通常は下記のような書き方になります。);「セレクタAをメソッド1し、セレクタAをメソッド2し、セレクタAをメソッド3し、セレクタAをメソッド4する」という意味。)メソッドのカッコ中を見ていきます。true}CSSチックで素敵なコードでしたね。これは実は「JSの基本-前編」で触れた「連想配列」の書式です。true}プラグインの中には連想配列(キーと紐づいた値)によって様々な「初期値」が設定されており、その中の変更したいキーの値だけを上書きしているわけです。jQueryの基本書式を読み解く最後にjQueryの基本書式を読み解いてみましょう。先ほどのコードはこう。});});これも一番外側の「オマジナイ」を抜くとこうなる。}});上から見ていきましょう。