質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

89.52%

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

解決済

回答 3

投稿

  • 評価
  • クリップ 0
  • VIEW 1,223

hojo

score 189

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

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

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

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

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

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

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

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

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 3

checkベストアンサー

+12

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 11:48

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

    キャンセル

  • 2017/10/06 07:37

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

    キャンセル

+7

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

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

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

+4

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 12:27 編集

    な、なんと!
    驚きました。まさかjQueryの$が仕様違反だったとは...
    umbrella.jsが$の代わりにuを使うのも納得できる気がします。
    となるとunderscore.jsやlodash.jsも使用違反になりますね。

    キャンセル

  • 2017/10/05 13:29

    この仕様が当てはまるのは、$記号だけです。引用分かりにくくてすみません。

    キャンセル

  • 2017/10/05 14:13

    なるほど、勘違いしました。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 89.52%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる