編集履歴

回答編集履歴

変な表現している文章があったので修正

2018/02/14 07:36

投稿

スコア21158

test CHANGED Viewed

@@ -2,21 +2,29 @@
-似たような変数候補になる記号として`_`も用意されていますが、変数や引数として宣言はするけど使わず捨てる事を明示したいケースでの慣習する他、[Underscore.js](http://underscorejs.org/)や、その改良版ともいえる[Lodash](https://lodash.com/docs/4.17.5)というライブラリが占拠しています。
+似たような変数候補になる記号として`_`も用意されていますが、変数や引数として宣言はするけど使わず捨てる事を明示したいケースでの慣習として利用される他、[Underscore.js](http://underscorejs.org/)や、その改良版ともいえる[Lodash](https://lodash.com/docs/4.17.5)というライブラリが占拠しています。
-まぁ、要するに1行目は`$`という変数に向かって`()`で関数実行、
+まぁ、要するに1行目は`$`という変数を関数と決め打ちして`()`で関数実行、
 引数に`"#ajax-tab-container-" + blockId + "-" + tagId`という文字列を指定していると和訳できます。
-で、誰がグローバル変数領域の`$`を占拠してるねん…となった時、
+で、誰がグローバル変数の`$`を占拠してるねん？…となりますが、
+これは有名ライブラリのjQueryがjQuery関数の別名(エイリアス)として採用しています。
+この辺の知識を元に、フロントエンジニアの方に質問すれば「まぁjQueryでしょうね」という回答が帰ってきます。
+当時はprototype.jsも変数`$`を利用するライブラリとして有名でしたが、
+ネイティブのJSの動作に影響を及ぼす程の改変を施すので嫌われており、最近では殆ど見かけません。
-フロントエンドエンジニアには`$`は一般的にjQueryのエイリアスとして認識されているので、まぁjQueryなんじゃね？という風に連想されます。
+後発のライブラリもjQueryとの干渉を避けて`$`を使いませんので、実質jQueryが`$`を独占している状況です。
-大穴としてprototype.jsも変数`$`を占拠しているライブラリですが、多くのネイティブのJSの動作を汚すので嫌われており、最近では殆ど見かけなくなりました。
@@ -40,13 +48,13 @@
-当時は`getElementById`等の貧弱なメソッドしかなく、クラス名で合致するDOMをつかむ事も不可能でした。
+当時は`getElementById`等の貧弱なメソッドしかなく、クラス名でDOMを検索することも不可能でした。
-クラス名で検索したければ、DOMツリー構造をルートから全て総当りで検索するしかありません。
+DOMツリー構造をルートから全て総当りで調査する…という事をやる必要がありました。
-これも今は`querySelectorAll`等の便利なメソッドを使って、CSSセレクタを使ってDOMを掴んで操作出来ます。
+今は`querySelectorAll`等の便利な機能が実装されたので、無理にjQueryを使う必要はなくなっています。
@@ -58,15 +66,21 @@
 まず素のJSはHTML上にscriptタグがある場所で即発火する仕様なので、
-DOMが全て描画される前に実行し、ボタンクリックでイベント仕込みたいけどないから諦めようみたいな糞な挙動をします。
+DOMが全て描画される前に実行し、「イベント仕込む対象のボタンが描画されてないから諦めた」と言い始めます
+そのために`addEventListener`という機能があり、
-そのために`addEventListener`という機能があり、DOMが全て描画されるのを待ってからJSを実行するようにするのが定跡です。
+DOMが全て描画されるのを待ってからJSを実行するようにするのが定跡です。
+しかし、当時は全てのブラウザが`addEventListener`を用意しているわけではありません。
-当時は`addEventListener`がなくて代わりに`attachEvent`使ってねというマジかよ…な状況でした。
+IEでは代わりに`attachEvent`という似た役目の機能が用意されていました。
-DOM描画を待ってから実行するように書きたいだけで何行にも及ぶおまじないが必要でした。
+つまり、jQueryが無ければあれやらこれやらのおまじないをif文で繋げる必要があり、相当な時間を浪費していました。
@@ -104,7 +118,7 @@
 当時貧弱であったJSのDOM検索機能を補う為に、
-jQueryは「そうだ、CSSセレクタと同じ書き方でDOMを検索出来るようにすれば便利なんじゃね？」という事で実装されました。
+jQueryは「そうだ、CSSセレクタと同じ書き方でDOMを検索出来るようにすれば便利なんじゃね？」という発想で実装されました。
@@ -120,11 +134,11 @@
+どうですか？
-どうですか？子セレクタや子孫セレクタにも対応している本格的なCSSセレクタが使えますね。
+子セレクタや子孫セレクタにも対応しており、ほぼネイティブなCSSセレクタで検索出来ます。
-デザイナ向けとして流行った理由がわかりますね。
-とはいえ所詮エミュレータですので、擬似クラスや属性セレクタになってくると多少差異があります。
+しかし所詮エミュレータですので、擬似クラスや属性セレクタというレベルになると少しずつ差異が生まれます。
 ガチで使うならドキュメントを読み込んだり、検証はしっかりしてくださいね。
@@ -132,15 +146,17 @@
 jQueryの登場初期はJSにはクラス指定を検索する機能が存在しませんでしたので、
-内部的にはDOMツリーを全て再帰的に検索するという力技等を駆使していました。
+内部的にはDOMツリーを再帰的に検索するという力技を駆使していました。
-最近では`querySelector`等の機能が登場しましたので、利用出来るケースでは利用しながらサボる感じで動作するようです。
+最近では`querySelector`等の機能が登場しましたので、利用出来るケースでは利用しながら最小の機能で動作するようです。
+取得してきたDOMツリーはJS純正のNodeインスタンスとは違い、
+jQueryオブジェクトという独自のインスタンスを返します。
-取得してきたDOMツリーはJS純正のNodeインスタンスとは違い、jQueryオブジェクトという独自のインスタンスを返しますので、変数名の頭に`$`を付ける事が慣習となっています。
+そのためにフロントエンドエンジニアは変数名の頭に`$`を付ける事が慣習となっています。
-なんかPHPみたいですね。
@@ -164,6 +180,8 @@
 DOM描画後に引数として渡した関数を実行するようにjQueryがよしなにやってくれます。
+今は全てのモダンブラウザが`addEventListener`を採用しているのでそこまで便利ではありませんけどね。
 > Ajax
@@ -208,7 +226,7 @@
 まじかよ、タグの中にメモとか説明書きとか書きたいじゃん。
-こう描いておけばめっちゃ便利でしょ！？！？！？
+こう書けばめっちゃ便利でしょ！？！？！？
@@ -230,7 +248,7 @@
-HTML5では条件付きですが完全開放されました。
+HTML5では条件付きで開放されました。
 接頭語として`data-`をつければ何定義してもOK

おまけ追加

2018/02/14 07:36

投稿

miyabi-sun

スコア21158

test CHANGED Viewed

@@ -160,9 +160,9 @@
-これで解決です。
+たったのこれだけ。
-DOM描画後に引数として渡した関数を実行するようにjQueryがよしなにやってくれます
+DOM描画後に引数として渡した関数を実行するようにjQueryがよしなにやってくれます。
@@ -183,3 +183,103 @@
 - [jQuery.ajax - 英語の公式サイト(最新)](https://api.jquery.com/jQuery.ajax/)
 - [jQuery.ajax - 日本語リファレンス(1.9)](http://js.studio-kingdom.com/jquery/ajax/ajax)
+---
+【おまけ】 dataに関して
+HTMLではタグの属性に値を埋め込む事が可能です。
+`<div class="ここの部分！"></div>`
+この属性(アトリビュート)ですが、W3CというHTMLの仕様を作ってる団体曰く、
+HTMLの仕様で定義された属性名しか宣言しちゃ駄目！と言っています。
+まじかよ、タグの中にメモとか説明書きとか書きたいじゃん。
+こう描いておけばめっちゃ便利でしょ！？！？！？
+```HTML
+<table name="items">
+  <tr id="item-1" name="モンハンワールド" price="9800">
+    <th>モンハンワールド</th>
+    <td>￥ 9,800 -</td>
+  </tr>
+</table>
+```
+HTML5では条件付きですが完全開放されました。
+接頭語として`data-`をつければ何定義してもOK
+```HTML
+<table name="items">
+  <tr id="item-1" data-id="1" data-name="モンハンワールド" data-price="9800">
+    <th>モンハンワールド</th>
+    <td>￥ 9,800 -</td>
+  </tr>
+</table>
+```
+前置きが長くなりましたが、ここからjQueryのターンです。
+jQueryでは、DOMを掴んでこの`data-`の属性を自由に操作することができます。
+```JavaScript
+// 値を取り出す
+var price = $('#item-1').data('price');
+// 値を格納
+$('#item-1').data('price', 8800);
+```
+[この記事](https://qiita.com/Kta-M/items/2eda39750abd10df9801)等を見る限り微妙に曰く付きだったりするのですが…
+例えばdataはJSの世界でアクセスすると、数値だった場合は勝手にNumber型として扱います。
+普通に属性としてアクセスした場合は、数値っぽいものも全て文字列、その関係で混在させるとうまく動いたり動かなかったりします。
+自分でコード書く時は注意してみてくださいね。

DOM検索周りを強化

2018/02/09 02:30

投稿

miyabi-sun

スコア21158

test CHANGED Viewed

@@ -102,25 +102,37 @@
-```JavaScript
-var $hoge = $('.hoge');
-var $piko = $('#piko');
-```
 当時貧弱であったJSのDOM検索機能を補う為に、
 jQueryは「そうだ、CSSセレクタと同じ書き方でDOMを検索出来るようにすれば便利なんじゃね？」という事で実装されました。
+```JavaScript
+var $hoge = $('.hoge');
+var $piko = $('#piko > div');
+var $items = $('ul.hoge li');
+```
+どうですか？子セレクタや子孫セレクタにも対応している本格的なCSSセレクタが使えますね。
+デザイナ向けとして流行った理由がわかりますね。
+とはいえ所詮エミュレータですので、擬似クラスや属性セレクタになってくると多少差異があります。
+ガチで使うならドキュメントを読み込んだり、検証はしっかりしてくださいね。
 jQueryの登場初期はJSにはクラス指定を検索する機能が存在しませんでしたので、
-DOMツリーを全て再帰的に検索するという力技等を駆使していました。
+内部的にはDOMツリーを全て再帰的に検索するという力技等を駆使していました。
 最近では`querySelector`等の機能が登場しましたので、利用出来るケースでは利用しながらサボる感じで動作するようです。