はじめに

転職活動や企業研究で OpenWork（旧Vorkers）を使っている方は多いと思います。
企業の「総合評価スコア」が一目でわかるのは非常に便利ですが、検索結果一覧を見ているときにふと気になることがありませんか？

「この高スコア、何人の回答に基づいているの？」
「平均年収はどのくらいなんだろう？」

スコアが 4.0 でも、回答者が 3人なのか 300人 なのかで、その信頼性は大きく異なります。
また、年収情報も企業選びの重要な判断材料ですが、現在のOpenWorkの検索結果画面（企業一覧）では、回答者数（口コミ数）も平均年収も 表示されません。詳細ページに飛ばないと確認できない仕様になっています。

これでは「良さそうな企業だと思ってクリックしたら、回答数が少なすぎて参考にならなかった…」「年収が想定より低かった…」ということが頻発し、効率が悪いです。

そこで、検索結果画面に「回答者数」と「平均年収」を自動で表示するChrome拡張機能 を自作しました。
本記事では、このツールの紹介と、実装にあたって工夫した 「スクレイピングの負荷対策（Rate Limiting）」 や 「パフォーマンス最適化（IntersectionObserver）」 の技術的なポイントを解説します。

ツール紹介

機能概要

この「OpenWork クイック検索」　拡張機能をインストールすると、OpenWorkの企業検索結果一覧において、総合スコアの横に （XX人）💰XXX万円 という形で回答者数と平均年収が自動的に追加表示されます。

(※イメージ: スコアの横にバッジが表示される)

もう一つの便利機能：右クリックで一発検索

求人サイト（GreenやWantedlyなど）を見ているときに、「この会社の評判どうなんだろう？」と思うことはありませんか？
通常なら 「社名をコピー」→「OpenWorkを開く」→「検索窓にペースト」→「検索」 という手順が必要で、地味に面倒です。

この拡張機能を入れると、社名を選択して右クリックするだけ で、直接OpenWorkの検索結果に飛べるようになります。

(※イメージ: 右クリックメニューに「OpenWorkで検索」が表示される)

主な特徴

自動表示: ページを開くだけで、各企業の詳細ページから回答者数を取得して表示します
右クリック検索: 任意のWebページでテキストを選択し、右クリックメニューから即座にOpenWork検索が可能です。
キャッシュ機能: 一度取得したデータは localStorage に保存されます。次回以降はAPIリクエスト（詳細ページへのアクセス）が発生しないため、高速かつサーバーに優しい設計です
サーバー負荷対策: 検索結果には数十件の企業が並びますが、一気に数十件のリクエストを送るとサーバーに負荷がかかり、最悪の場合IPBANされるリスクがあります。そのため、リクエストキュー（Queue） を実装し、一定間隔（例: 3秒に1回）でゆっくりデータを取得するようにしています

実装のポイント

Chrome拡張機能（Manifest V3）として実装しました。
特に「サーバーに迷惑をかけない」「ブラウザを重くしない」という点に注力しました。

1. Rate Limiting (リクエストキュー)

検索結果ページには多くの企業が表示されますが、Promise.all などで一斉に fetch すると、短期間に大量のアクセスが発生してしまいます。これを防ぐため、直列実行するキュー を作成しました。

// 簡易的な非同期キューの実装
class Queue {
  constructor(n = 1, delay = 3000) { 
    this.n = n;         // 同時実行数（今回は1）
    this.delay = delay; // 実行間隔（ms）
    this.busy = 0;
    this.q = [];
  }

  push(task) {
    this.q.push(task);
    this.run();
  }

  async run() {
    if (this.busy >= this.n || this.q.length === 0) return;
    this.busy++;
    const fn = this.q.shift();
    try {
      await fn();
    } finally {
      this.busy--;
      // 次のタスクまで指定時間待機
      setTimeout(() => this.run(), this.delay);
    }
  }
}

// 3秒に1回だけリクエストを実行するキュー
const queue = new Queue(1, 3000);

このようにすることで、ユーザーがスクロールして大量の企業が表示されても、バックグラウンドでは「3秒に1件ずつ」お行儀よくデータを取得しに行きます。

2. Lazy Loading (IntersectionObserver)

ページ下部の企業まで最初から取得する必要はありません。「ユーザーの画面に見えている企業だけ」 データを取得すれば十分です。
そこで IntersectionObserver を使い、要素が画面内に入ったタイミングでキューにタスクを追加するようにしました。

const observer = new IntersectionObserver(entries => {
  entries.forEach(e => {
    if (e.isIntersecting) {
      // 画面に入ったら処理開始
      handleCard(e.target);
      // 一度処理したら監視を解除
      observer.unobserve(e.target);
    }
  });
}, { rootMargin: "100px" }); // 少し手前で読み込み開始

// 検索結果の各カード要素を監視
document.querySelectorAll("li.box-15").forEach(c => observer.observe(c));

3. DOM解析の工夫

取得した詳細ページのHTMLから「回答者数」を抜き出す処理も、クラス名が変わってもある程度耐えられるように工夫しています。

function extractResponderCount(html) {
  const doc = new DOMParser().parseFromString(html, "text/html");

  // 1. まずは既知のCSSセレクタで探す
  const sel = '...'; // (省略)
  const el = doc.querySelector(sel);
  if (el) return parseNumber(el.textContent);

  // 2. 見つからない場合、TreeWalkerで「回答者」という文字を含むテキストノードを探す（兜底）
  const walker = doc.createTreeWalker(doc.body, NodeFilter.SHOW_TEXT);
  // ... (周辺の数字を探すロジック)
}

まとめ

今回は、OpenWorkの検索結果をより便利にするChrome拡張機能を紹介しました。
技術的には Queueによる流量制御 と IntersectionObserverによる遅延読み込み を組み合わせることで、実用性と安全性を両立させています。

もし「自分も使ってみたい！」という方がいれば、ぜひ試してみてください。（※自己責任でお願いします）

今後の展望

キャッシュの有効期限（TTL）の実装
取得状況（Loading/Error）のUI改善

※本記事は技術共有を目的としており、スクレイピングを推奨するものではありません。利用規約を遵守してご利用ください。