Chromeの開発者ツールのコンソールタブで`$`が使える（jQueryがインストールされていないのに）

2020-05-27JavaScript

はじめに

ChromeでjQueryを使用していないページを開デバッグしている時の話です。
開発者ツールの「コンソール」パネルを開きながら $ を入力すると、何やらオートコンプリート機能により候補がでてきます。

$("body") と入力するとオブジェクトが取得できています。

ずっと不思議に思ってはいたのですが、調べてみました。

検証環境

Version 81.0.4044.138 (Official Build) (64-bit)

Chromeの開発者ツール独自の機能だった

Chromeの開発者ツール、特にコンソールページに関するドキュメントサイトにかかれていました。

上記のサイトを参考に $ に関わる機能を見ていきます。

$_

$_ は最後に評価された式の値を返却する変数です。

「コンソール」パネルに 2+2 と入力し、Enterキーを押しましょう。
式が 4 と評価されていることがわかります。

この直後に $_ と入力し、Enterキーを押しましょう。
$_ 入力直前の式の実行結果である 4 が表示されます。

2*3 と入力し、Enterキーを押しましょう。 6 と評価されます。
$_ の評価結果は先程の 4 から 6 に変わっていることがわかります。

ただの数値に対して利用した場合には便利さがわかりませんが、例えば事前に配列を取得した結果、その長さを確認するといった場合に便利です。

$0 - $4

「要素」パネル上でDOM要素が選択できますが、このDOM要素の選択履歴を5つまでさかのぼって参照することができる変数です。

例えば、事前に「要素」パネルを開き、任意の要素を選択（クリック）します。

その後「コンソール」パネルを開き、 $0 変数を参照すると、先程クリックしたDOM要素のHTMLが格納されていることがわかります。

ちなみに、 $1 を参照すると <body> 要素が格納されています。僕が事前に <body> 要素をクリックしていたためにこのような結果となっています。

$0 - $4 に対して、プロパティの参照( ex$0.id 、 $0.style )を行うこともできます。

$(selector, [startNode])

document.querySelector() メソッドのエイリアスです。

セレクタで指定したDOM要素を検索し、 最初に見つかった要素だけを返却 します。

ここでは img タグ要素を取得してみます。

注意しないといけないのは、jQueryの $ とは異なるという点です。

jQueryの $ はセレクタに該当する全てのDOM要素を返却しますが、こちらは 最初に見つかった要素 のみとなっています。
また、jQueryとは別物であり、 $("img").each(function () { console.log(this) } のような記述はできません。

$$(selector, [startNode])

document.querySelectorAll() メソッドのエイリアスです。

セレクタで指定したDOM要素を検索し、 見つかった全ての要素を返却 します。

img タグ要素をすべて取得してみます。

取得できた要素に添え字を適用することもできます。

注意しないといけないのは、jQueryの $ とは異なるという点です。

jQueryの $ に似ていますが、こちらもやはりjQueryとは別物であり、 $("img").each(function () { console.log(this) } のような記述はできません。

各要素に対して処理を実行したい場合には、 for of 構文を利用します。

// 全てのimgタグのsrc属性情報を出力
for (let img of $$("img")) {
    console.log(img.src)
}

ひとこと

$ で下手にjQueryっぽい動作をするのでかえって混乱しました。

2020-05-27JavaScript