jQueryセレクターオプティマイザー

Last Updated 11月 28, 2023

jQueryは、エッジケースにのみ使用する必要があります

jQueryはできるだけ使用しないようにすることをお勧めします。ウェブアプリケーションは絶えず変化しており、UIとページ構造への小さな更新は、使用されるjQueryを破壊する可能性があります。

WalkMeは、すぐに使用できるエレメント選択で、jQueryを使用せずに、基盤となるアプリケーションの変更に適応します。

概要

ほとんどのWalkMeアイテムでは、jQueryセレクターを自由に入力してエレメントを選択できます。 jQueryライブラリはかなり前から存在していましたが、その構文とセレクターの書き方は時間の経過とともに変化してきました。

最新の構文に慣れていないユーザーにとっては、昔ながらのjQueryセレクターの書き方を使用している場合、評価時間が長くなってしまうこともあります。これが問題になるのは、ユーザーが昔ながらのセレクターでコンテンツを多く持っている場合です。

WalkMeのページ上でのエレメント探しのパフォーマンスを向上させ、より効率的なセレクターの書き方ができるようにしたいと考えています。

「jQueryオプティマイザー」は、書いた特定のセレクターを、より高速に評価できる最新の構文で書き換えることができるかどうかを検出します。その際には、変更を手動で元に戻すオプションを残したまま、最適化されたセレクターでフィールドの値を自動的に更新します。

jQueryチートシート

jQueryのヒントと例については、jQueryチートシートを参照してください

この機能は、特定のデプロイ可能アイテムの設定内で、「要素を識別する方法を定義する」オプションがあるデプロイ可能アイテムに対して、自動的に利用可能となります：

最適化前	最適化後
[class="foo"]	.foo
[class="foo bar"]	.foo.bar
[id="foo"]	#foo
[class="foo bar"] [id="foo"]	.foo #bar
[class="foo"].bar:not([class="foo-bar"])	.foo.bar:not(.foo-bar)
[class="foo"][class="bar"]:not([class="foo-bar"])	.foo.bar:not(.foo-bar)

選択した要素があるいずれかのデプロイ可能アイテムを開きます
［Selected Element（選択した要素）］タブをクリックします。
「Define how to identify the element（要素を識別する方法を定義）」セクションの［jQuery selector（jQueryセレクター）］を選択します。
たとえば、[class="foo bar"]という昔ながらの方法で書かれた値を入力し、入力フィールドの外をクリックします。
セレクターが最適化されていく魔法をご覧ください。