jsでわからないところがあります

こんにちは。下記のコードでわからない部分があります。

js
1var isSP = false;
2function loadTag(pager, blockId, tagId, offset, func, pathinfo) {
3	$("#ajax-tab-container-" + blockId + "-" + tagId).data('loaded', 1);
4	var url = '/view_interface.php';
5	pathinfo = pathinfo || null;
6	$.ajax({
7		type: "GET",
8		url: url,
9		data : {
10			 'cmd' : 'loadTag'
11			,'blockId' : blockId
12			,'offset' : offset
13			,'tagId' : tagId
14			,'pathinfo' : pathinfo
15			,'ut' : parseInt((new Date)/1000)
16		},
17		crossDomain: false,
18		async: false,
19		dataType : 'json',
20		scriptCharset: 'utf-8',
21		beforeSend: function(xhr) {
22     		xhr.setRequestHeader('Pragma', 'no-cache');
23			xhr.setRequestHeader('Cache-Control', 'no-cache');
24			xhr.setRequestHeader('If-Modified-Since', 'Thu, 01 Jun 1970 00:00:00 GMT');
25		},
26	}).success(function(response){
27		eval(func + "(pager, response);");
28	}).fail(function(XMLHttpRequest, textStatus, errorThrown){
29		alert(errorThrown);
30	});
31}

このうち、今躓いているのはこの部分です。
まず、＄マークの意味がよくわかりません。
たぶん特定のプログラムの読み出し的なものではないかと思うのですが・・・。
「#ajax-tab-container-というものを読みだしてそのblockIDとタグIDの内から特定のデータを読みだしてちょ」
というようなことを言っている気がします。
blockID？tagID？htmlのidのことでしょうか？

js
1$("#ajax-tab-container-" + blockId + "-" + tagId).data('loaded', 1);

また、.dataが何をさしているのかわかりません。
https://api.jquery.com/data/　を見る限り、関数で設定したキーワードと値を取り出すっぽいことをしているのではと思うのですが。

まだまだわからないところがいっぱいあるのでまた質問するかもしれません。
よろしくお願いいたします。

----追記-----
今更な質問なのですが、
上記のjsは下記のページのどの部分の技術として
使われているのでしょうか？
https://www.jetro.go.jp/

行動規範の内容に同意します

回答3件

ベストアンサー

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 02:04

編集2018/02/14 07:36

miyabi-sun

総合スコア21158

takane

2018/02/09 04:07

丁寧なお答えありがとうございます！＞＞前置きが長くなりましたが、ここからjQueryのターンです。 jQueryでは、DOMを掴んでこのdata-の属性を自由に操作することができます。 jQuery便利ですねえ・・・ jsメインで勉強したいんですがちょくちょくjQeryがでてくるんでもういっそそっちを勉強した方がいい気がしてきました・・・

miyabi-sun

2018/02/09 04:26

jQueryは便利ですが、ネイティブJSの方がこれからの時代は求められますよ。 jQueryはDOMを手作業で操作するものです。大規模アプリでSPA(シングルページアプリケーション)を作ろうとなった時、 jQueryだとあっちもこっちも更新することになるから、DOM操作とか人間がする作業じゃないと感じますね。 Vue.jsみたいなJSフレームワークはテンプレートを作って、JS世界の変数を変更したら勝手にDOMが追従して更新されます。そうなるとjQueryはほどほどで、素のJSを鍛えてよかったわと思えるはずです。

miyabi-sun

2018/02/09 07:35

最後の追記部分は仕事の丸投げですよ、自分でやらないなら金払ってください。 Chromeでページを開いてF12、デベロッパーツールを開きます。 Networkタブ→XHRタブの順にクリック、この状態で再度F5でページを更新すれば具体的にどんなAjax通信のやり取りを見たかがわかります。その通信の内容を見ればなんとなく察しが付くでしょう。しかしloadTagとはなんとも、、、SIer臭を感じますね。金貰わなきゃやりたくないですね。

takane

2018/02/14 07:19

すみません。右も左もわからないもので・・・自分で調べる癖をつけますね。

行動規範の内容に同意します