JSにとっては$
は変数として利用可能な文字の候補でしかありません。
似たような変数候補になる記号として_
も用意されていますが、変数や引数として宣言はするけど使わず捨てる事を明示したいケースでの慣習として利用される他、Underscore.jsや、その改良版ともいえるLodashというライブラリが占拠しています。
まぁ、要するに1行目は$
という変数を関数と決め打ちして()
で関数実行、
引数に"#ajax-tab-container-" + blockId + "-" + tagId
という文字列を指定していると和訳できます。
で、誰がグローバル変数の$
を占拠してるねん?…となりますが、
これは有名ライブラリのjQueryがjQuery関数の別名(エイリアス)として採用しています。
この辺の知識を元に、フロントエンジニアの方に質問すれば「まぁjQueryでしょうね」という回答が帰ってきます。
当時はprototype.jsも変数$
を利用するライブラリとして有名でしたが、
ネイティブのJSの動作に影響を及ぼす程の改変を施すので嫌われており、最近では殆ど見かけません。
後発のライブラリもjQueryとの干渉を避けて$
を使いませんので、実質jQueryが$
を独占している状況です。
jQueryは与えられた引数の数や型により動作が全然違う、予備知識無しで触るにはエグいライブラリです。
なので調べ物が捗るように、簡単な解説だけします。
jQueryの何が便利かを語る前に、
jQuery登場時点(2006年)のJavaScriptがどれだけ糞なのかを知っておくべきですね。
DOM検索
当時はgetElementById
等の貧弱なメソッドしかなく、クラス名でDOMを検索することも不可能でした。
DOMツリー構造をルートから全て総当りで調査する…という事をやる必要がありました。
今はquerySelectorAll
等の便利な機能が実装されたので、無理にjQueryを使う必要はなくなっています。
DOM描画を待つ
JSはDOM操作を行って画面を自在に操作する為の言語です。
まず素のJSはHTML上にscriptタグがある場所で即発火する仕様なので、
DOMが全て描画される前に実行し、「イベント仕込む対象のボタンが描画されてないから諦めた」と言い始めます
そのためにaddEventListener
という機能があり、
DOMが全て描画されるのを待ってからJSを実行するようにするのが定跡です。
しかし、当時は全てのブラウザがaddEventListener
を用意しているわけではありません。
IEでは代わりにattachEvent
という似た役目の機能が用意されていました。
つまり、jQueryが無ければあれやらこれやらのおまじないをif文で繋げる必要があり、相当な時間を浪費していました。
Ajax
Ajax機能を利用したい場合も最悪です。
MS社が何のために使うか分からんけど、XMLHttpRequest
という機能があれば便利かもしれないからIEに入れておこうというノリで入れられた(この評価は単に私の想像)ような機能があります。
2003年にその機能をフル活用したGoogle Mapが登場した事でAjaxというバズワードを授かりエンジニアが殺到しましたが、その難解さというか用途が違う気がしてならないコイツの前に数多くのエンジニアが膝をつきました…
JSONをやり取りしたいんですが?XMLとか全く関係ないじゃん!とか言っても無駄です。
これも今はFetch APIが使われ始めていますので、完全に普及すればjQueryがなくても簡単にAjax通信が出来るようになります。
そこでjQueryの登場です。
DOM検索
当時貧弱であったJSのDOM検索機能を補う為に、
jQueryは「そうだ、CSSセレクタと同じ書き方でDOMを検索出来るようにすれば便利なんじゃね?」という発想で実装されました。
JavaScript
1var $hoge = $('.hoge');
2var $piko = $('#piko > div');
3var $items = $('ul.hoge li');
どうですか?
子セレクタや子孫セレクタにも対応しており、ほぼネイティブなCSSセレクタで検索出来ます。
しかし所詮エミュレータですので、擬似クラスや属性セレクタというレベルになると少しずつ差異が生まれます。
ガチで使うならドキュメントを読み込んだり、検証はしっかりしてくださいね。
jQueryの登場初期はJSにはクラス指定を検索する機能が存在しませんでしたので、
内部的にはDOMツリーを再帰的に検索するという力技を駆使していました。
最近ではquerySelector
等の機能が登場しましたので、利用出来るケースでは利用しながら最小の機能で動作するようです。
取得してきたDOMツリーはJS純正のNodeインスタンスとは違い、
jQueryオブジェクトという独自のインスタンスを返します。
そのためにフロントエンドエンジニアは変数名の頭に$
を付ける事が慣習となっています。
DOM描画を待つ
JavaScript
1$(function () {
2 // ここに処理を書く
3});
たったのこれだけ。
DOM描画後に引数として渡した関数を実行するようにjQueryがよしなにやってくれます。
今は全てのモダンブラウザがaddEventListener
を採用しているのでそこまで便利ではありませんけどね。
Ajax
これは本筋ではないので割愛します。
jQueryは結構後方互換を保つ言語なので、英語が得意なら上がオススメですが、
あまり得意でなければ両方を見比べる感じで良いと思います。
【おまけ】 dataに関して
HTMLではタグの属性に値を埋め込む事が可能です。
<div class="ここの部分!"></div>
この属性(アトリビュート)ですが、W3CというHTMLの仕様を作ってる団体曰く、
HTMLの仕様で定義された属性名しか宣言しちゃ駄目!と言っています。
まじかよ、タグの中にメモとか説明書きとか書きたいじゃん。
こう書けばめっちゃ便利でしょ!?!?!?
HTML
1<table name="items">
2 <tr id="item-1" name="モンハンワールド" price="9800">
3 <th>モンハンワールド</th>
4 <td>¥ 9,800 -</td>
5 </tr>
6</table>
HTML5では条件付きで開放されました。
接頭語としてdata-
をつければ何定義してもOK
HTML
1<table name="items">
2 <tr id="item-1" data-id="1" data-name="モンハンワールド" data-price="9800">
3 <th>モンハンワールド</th>
4 <td>¥ 9,800 -</td>
5 </tr>
6</table>
前置きが長くなりましたが、ここからjQueryのターンです。
jQueryでは、DOMを掴んでこのdata-
の属性を自由に操作することができます。
JavaScript
1// 値を取り出す
2var price = $('#item-1').data('price');
3// 値を格納
4$('#item-1').data('price', 8800);
この記事等を見る限り微妙に曰く付きだったりするのですが…
例えばdataはJSの世界でアクセスすると、数値だった場合は勝手にNumber型として扱います。
普通に属性としてアクセスした場合は、数値っぽいものも全て文字列、その関係で混在させるとうまく動いたり動かなかったりします。
自分でコード書く時は注意してみてくださいね。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/02/09 04:07
2018/02/09 04:26
2018/02/09 07:35
2018/02/14 07:19