← Back to rules

unicorn/prefer-query-selector 細部にこだわる

🛠️ An auto-fix is available for this rule for some violations.

何をするか

.getElementById() ではなく .querySelector()、.getElementsByClassName() や .getElementsByTagName() ではなく .querySelectorAll() を使用することを推奨します。

なぜ悪いのか

• .querySelector() および .querySelectorAll() はより柔軟であり、より具体的なセレクタを使用できるようになります。
• 同じメソッドを使って DOM 要素を照合するほうが良いです。これにより一貫性が保たれ、将来の改善（例えば、より具体的なセレクタの使用）にもつながります。

例

このルールに違反する誤ったコードの例：

document.getElementById("foo");
document.getElementsByClassName("foo bar");
document.getElementsByTagName("main");
document.getElementsByClassName(fn());

このルールに従う正しいコードの例：

document.querySelector("#foo");
document.querySelector(".bar");
document.querySelector("main #foo .bar");
document.querySelectorAll(".foo .bar");
document.querySelectorAll("li a");
document.querySelector("li").querySelectorAll("a");

使い方

設定ファイルまたは CLI でこのルールを有効化するには、以下のようにします：

Config (.oxlintrc.json)

{
  "rules": {
    "unicorn/prefer-query-selector": "error"
  }
}

CLI

oxlint --deny unicorn/prefer-query-selector

参考資料

• ルールのソース