jQueryを入れなくても$が使えます。これはdocument.querySelectorですか？

chromeやsafariのコンソールで$を使うとjQueryを読み込んでないサイトにも関わらずノード検索ができます。

この仕様に関して検索してもまともに出てこないのですが、なぜ$が利用できるのですか？この$はdocument.querySelectorの省略記法なのでしょうか。

また$$を利用するとquerySelectorAllを利用した時と似たような挙動をするように感じています。

話は変わりまして、世間ではjQueryを使わない流れが発生していると感じておりますが、個人的に今まで$で済んでいたものがdocument.querySelectorAllのように長文になってしまうのはタイピングのうっとおしさに加え可読性の悪さを感じているためjQueryを使わない方が良いということを理解しつつもその気軽さが故にjQueryを使用しております。

全てのプロジェクトでvar $ = document.querySelectorAll;のようなコードを最初に記述すればいいじゃないか。という考え方もあると思うのですが、そういった文化が無いのであれば、そのようなオレオレ実装は避けたいと思っています。

最近の一般的なブラウザではjQueryを導入しなくても$や$$でquerySelectorが利用できるのでしょうか？

また、利用できない場合、$でquerySelectorを利用するように書き換えるライブラリや文化など存在するのでしょうか？

ぜひ意見をお聞かせください。

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

回答3件

ベストアンサー

Chromeのコンソールで使用できる$が何者なのかを調べるために、Chromeでconsole.log($)と入力すると、以下のように表示されました。

ƒ $(selector, [startNode]) { [Command Line API] }

Command Line APIという名前が出てきたのでぐぐってみるとこのようなページが。

https://developers.google.com/web/tools/chrome-devtools/console/command-line-reference?hl=ja

ここにあるとおり、$はquerySelectorのエイリアス、$$はquerySelectorAllのエイリアスであると書かれています。
Safariでも同様の方法で正体が知れるのではないでしょうか。

追記

世間ではjQueryを使わない流れが発生していると感じておりますが

あなたは**「なぜ」世間がjQueryを使わない流れになりつつあるかを理解しておられますか？
私もそこまで最先端に詳しくないのですが、世の中はReactやVue等のVirtualDOMを活用したシングルページレンダリングの実装に移り変わりつつあります。VirtualDOMの考え方と、jQueryの「レンダリング後のDOMをいじる」という考え方が競合してしまい、不都合が起きやすいからjQueryを使わなくなっている、という流れを感じます。だからと言ってjQueryが完全に廃れるかと言われたら、私はまだまだjQueryの役目はあると思っています。実際私の現在製作しているサイトはReactとjQueryが同居していますので、バリバリ現役でjQueryを使っています。
なにがなんでもjQueryを除外するというのはそれぞれの仕組みの理解の足りない者のすること**だと私は考えています。あくまでjQueryにはjQueryの強みがありますので、住み分けの問題かと思います。

今まで$で済んでいたものがdocument.querySelectorAllのように長文になってしまう

気持ちは非常にわかります。ただ、jQueryを一切使わないと決め、社内でも全員がその認識になれば$をquerySelectorAllのエイリアスにしてしまうことは有りかと思います。ただし、そのコードは一般的とは呼べなくなるので、公開される場合は注意が必要になるかと思います。

投稿2017/10/05 02:21

編集2017/10/05 02:44

masaya_ohashi

総合スコア9206

masaya_ohashi

2017/10/05 02:48

ちなみに私がjQueryを同居させている理由は「jQuery実装の数多のUI系プラグインの資産が便利だから」です。もちろんjQueryを抜いたPure Javascript対応されたUI系プラグインも数多くありますので、そちらに乗り換えていけるならjQueryを外してもよいと考えています。React等の実装に慣れてくると、jQueryのセレクタを使った処理はむしろ混乱を招くことになるので結構気を使います。

hojo

2017/10/05 22:37

すみません、長文を入力したのですが投稿に失敗し、メッセージが失われてしまいました。改めて投稿させていただきます。

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

検索すると出てきますね。

Web開発でよく使う、特に使えるChromeデベロッパー・ツールの機能
http://www.buildinsider.net/web/chromedevtools/01

$0で選択したノードを選ぶというようなことはよくやっているかと思います。
あくまでもデベロッパーツール上で使えるというだけで、外部スクリプトなどに書いても動かないので注意してください。
これはChromeの情報ですが、ほかのブラウザでも同様です。
https://developers.google.com/web/tools/chrome-devtools/console/command-line-reference?hl=en
https://developer.mozilla.org/ja/docs/Tools/Web_Console/Helpers

投稿2017/10/05 02:25

編集2017/10/05 02:41

x_x

総合スコア13749

ES3の仕様書に

7.6 Identifiers

The dollar sign ($) and the underscore (_) are permitted anywhere in an identifier. The dollar sign is intended for use only inmechanically generated code.
Microsoft Word - Ecma-262.doc - ECMA-262, 3rd edition, December 1999.pdf

とあります。「機械的に作られたコードのみに用いる」ということですから、厳密に言うとjQueryは仕様違反になるのではないかと。
現在の仕様には含まれていないはずですが、慣習的に$から始める変数には特別な意味を持たせていることが多いような気がします。

投稿2017/10/05 03:05