jQuery Academy · レッスン

カスタム疑似セレクターの構築

jQuery.expr[':']に独自のカスタム疑似セレクターを登録し、複雑な要素選択ロジックを簡略化してコードの可読性を高める方法を学びます。

「カスタム疑似セレクターの構築」はCoddyKit上の無料jQuery Academyレッスンです。これはレッスン1/3です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはjQuery Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 jQuery Academyコースには全3レッスンが含まれています。

カスタムセレクターを使う理由

jQueryに組み込まれているセレクターは非常に強力ですが、複雑または反復的な、特定のフィルタリングが必要になることがあります。

そのような場合に役立つのがカスタム疑似セレクターです。独自の専用フィルターを定義できるため、複雑な選択ロジックを簡潔にし、コードをより明確で読みやすくできます。

デフォルトのセレクターでは足りない場合

特定のクラスを持ち、さらにdata-status属性が「active」に設定されているすべての<div>要素を、頻繁に選択する必要があるとします。

標準セレクターを組み合わせることもできますが、ロジックが複雑になったり、アプリケーション全体で頻繁に適用したりする場合は、記述が長くなり、直感的に理解しにくくなる可能性があります。

jQuery.expr[':']について

jQuery.expr[':']は、カスタム疑似セレクターを登録するオブジェクトです。jQueryのコア選択エンジンを拡張するものと考えてください。

jQueryが:myCustomSelectorのようなセレクターに遭遇すると、このオブジェクトからmyCustomSelectorを検索します。キー（セレクター名）に関数を割り当てると、jQueryはその関数を各テスト対象要素に対して実行します。

:has-tooltipを定義する

title属性を持つ要素を特定する、単純なカスタムセレクター:has-tooltipを定義してみましょう。これがjQuery.expr[':']に追加する方法です。

指定する関数は、テスト対象の現在のDOMelemを受け取ります。要素が条件に一致する場合はtrueを、それ以外の場合はfalseを返します。

jQuery.expr[':'].hasTooltip = function(elem) {
  // Check if the element has a 'title' attribute
  return !!$(elem).attr('title');
};

カスタムセレクターを使用する

:has-tooltipセレクターを定義できたので、他のjQuery疑似セレクターと同じように使用できます。次の例を実行してみてください。

title属性を持つすべての要素が強調表示され、新しいカスタムフィルターの威力を確認できます。

<!DOCTYPE html>
<html>
<head>
<title>Custom Selector Demo</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
  .highlight {
    border: 2px solid green;
    background-color: #e0ffe0;
  }
</style>
</head>
<body>
  <p title="This is a tooltip">Paragraph with tooltip</p>
  <div id="no-tooltip">Just a div</div>
  <span title="Another tooltip here">Span with tooltip</span>

  <script>
    jQuery.expr[':'].hasTooltip = function(elem) {
      return !!$(elem).attr('title');
    };

    $(document).ready(function() {
      $('p:has-tooltip, span:has-tooltip').addClass('highlight');
    });
  </script>
</body>
</html>

elem、i、match引数

カスタムセレクター関数が実行されると、次の3つの重要な引数を受け取ります。

elem：テスト対象の現在のDOM要素です。
i：jQueryが現在反復処理している要素の集合内でのelemのインデックスです。
match：セレクターの解析に使用された正規表現の結果を含む配列です。引数を受け取るセレクターでは不可欠です。

単純なセレクターでは、主にelem引数を使用します。

データ属性に基づくセレクター

data-status属性が「active」と等しい要素を検索するセレクター:data-status(active)を作成してみましょう。ここではmatch引数の使い方を示します。

値「active」（括弧内の引数）はmatch[3]に格納されます。これにより、動的なセレクターを作成できます。

<!DOCTYPE html>
<html>
<head>
<title>Data Status Selector</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
  .active-item {
    background-color: lightgreen;
    padding: 5px;
    margin: 3px;
  }
</style>
</head>
<body>
  <div data-status="active">Item 1 (Active)</div>
  <div data-status="inactive">Item 2 (Inactive)</div>
  <p data-status="active">Item 3 (Active)</p>
  <span>Item 4 (No Status)</span>

  <script>
    jQuery.expr[':'].dataStatus = function(elem, i, match) {
      const expectedStatus = match[3]; // e.g., 'active' from :data-status(active)
      const actualStatus = $(elem).data('status');
      return actualStatus === expectedStatus;
    };

    $(document).ready(function() {
      $(':data-status(active)').addClass('active-item');
    });
  </script>
</body>
</html>

`match[3]`を理解する

match配列は、セレクター文字列をjQueryが内部で正規表現解析した結果です。:yourSelector(argument)のようなセレクターでは、通常、argumentの部分がmatch[3]に格納されます。

この仕組みは、パラメーターを受け取れる動的で柔軟なカスタムセレクターを作成するうえで重要です。これにより、さまざまな絞り込みの場面で、より再利用しやすく強力なセレクターを実現できます。

高度なロジック: `:containsExact`

より高度なセレクター、:containsExact(text)を作成してみましょう。jQuery標準の:contains()とは異なり、子要素を除いた要素全体のテキスト内容が、指定したテキストと完全に一致する要素だけを選択します。

この処理では、完全一致を確実にするために、$(elem).text().trim()を慎重に比較することがよくあります。

<!DOCTYPE html>
<html>
<head>
<title>Contains Exact Selector</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
  .exact-match {
    font-weight: bold;
    color: blue;
    background-color: #e0f0ff;
    padding: 5px;
    margin: 3px;
  }
</style>
</head>
<body>
  <div>Hello World</div>
  <div>Hello there!</div>
  <p>Hello</p>
  <span>World</span>

  <script>
    jQuery.expr[':'].containsExact = function(elem, i, match) {
      const searchText = match[3]; // The text inside the parentheses
      const elementText = $(elem).text().trim();
      return elementText === searchText;
    };

    $(document).ready(function() {
      $(':containsExact(Hello World)').addClass('exact-match');
    });
  </script>
</body>
</html>

カスタムセレクターのヒント

カスタムセレクターを作成するときは、次のベストプラクティスを意識してください。

パフォーマンス: 複雑なロジックは、特に大規模なDOMでパフォーマンスに影響する可能性があります。セレクター関数を最適化してください。
明確さ: コードを読む人が目的をすぐに理解できるよう、セレクターには明確な名前を付けてください。
再利用性: 特定の1つの場面だけでなく、さまざまな状況で役立つよう、十分に汎用的に設計してください。
競合の回避: 将来のjQueryセレクターや使用する他のプラグインと名前が衝突しないよう、固有の名前を選んでください。

カスタムセレクターの課題

テキスト内容がなく、子要素も持たない要素を選択するカスタムセレクター:is-emptyを作成したいとします。これはjQuery組み込みの:emptyセレクターに似ています。

次のコードスニペットのうち、このカスタム擬似セレクターを正しく定義しているものはどれですか。

復習: カスタムセレクター

このレッスンでは、jQuery.expr[':']を使って独自のカスタム擬似セレクターを作成し、jQueryの強力な選択機能を拡張する方法を学びました。

単純なセレクターの定義方法、match配列を介して引数を渡す方法、複雑な絞り込みロジックを簡潔に適用する方法を確認しました。これにより、jQueryコードがより読みやすく、保守しやすく、効率的になります。

よくある質問

「カスタム疑似セレクターの構築」レッスンは無料ですか？

はい。「カスタム疑似セレクターの構築」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、jQuery Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 jQuery Academyコースには全3レッスンが含まれています。

「カスタム疑似セレクターの構築」で何を学びますか？

jQuery.expr[':']に独自のカスタム疑似セレクターを登録し、複雑な要素選択ロジックを簡略化してコードの可読性を高める方法を学びます。ブラウザで直接実行するハンズオンコードでjQuery Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

jQuery Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのjQuery Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン1/3です。

「カスタム疑似セレクターの構築」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このjQuery Academyレッスンでコードを書いて実行できますか？

はい。すべてのjQuery Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← jQuery Academyに戻る