jsx-a11y/anchor-is-valid 正しさ
何を実行するか
正式に定義された HTML <a> 要素は、有効な href 属性を持つ場合、ハイパーリンクを表すとされています。 つまり、1つの HTML ドキュメントと他のドキュメントの間、または同じドキュメント内の1つの場所と別の場所の間のリンクです。
かつてはアングル要素にロジックを関連付けることが可能でしたが、JSX ライブラリの登場により、現在では任意の HTML 要素（アングルも含む）にロジックを関連付けることが容易になっています。
このルールは、ユーザーがアングルのクリック時にロジックを関連付けてしまうことを防ぐためのものであり、アングル要素に提供される href が有効であることも確認します。アングルにロジックが関連付けられている場合は、おそらくユーザーの意図は button にすることなので、それを推奨します。
アングル <a></a> 要素はナビゲーションに使用すべきであり、<button></button> はユーザー操作に使用すべきです。
以下の例を検討してください：
jsx
<>
<a href="javascript:void(0)" onClick={foo}>
挙動を実行
</a>
<a href="#" onClick={foo}>
挙動を実行
</a>
<a onClick={foo}>挙動を実行</a>
</>これらのアングルの実装すべては、要素が単に JavaScript コードを実行するために使われていることを示しています。上記すべては以下のように置き換えるべきです：
jsx
<button onClick={foo}>挙動を実行</button>なぜこれは問題なのか？
アングルにロジックを持たせ、正しい href 属性を持たせないのは、多くの理由から不適切です：
- ユーザーのナビゲーションフローを破壊する可能性がある。例えば、ユーザーがリンクを別のタブで開きたいのに、デフォルトの「クリック」動作が防止されている場合
- 無効なリンクの原因になり得る。クローラーがウェブサイトをナビゲートできず、SEOランキングにペナルティを与えるリスクがある
例
このルールに対する有効なコードの例：
jsx
<>
<a href={`https://www.javascript.com`}>ここに移動</a>
<a href={somewhere}>ここに移動</a>
<a {...spread}>ここに移動</a>
</>このルールに対する無効なコードの例：
jsx
<>
<a href={null}>ここに移動</a>
<a href={undefined}>ここに移動</a>
<a href>ここに移動</a>
<a href="javascript:void(0)">ここに移動</a>
<a href="https://example.com" onClick={something}>
ここに移動
</a>
</>参照
設定
このルールは、以下のプロパティを持つ設定オブジェクトを受け入れます：
validHrefs
型: string[]
デフォルト: []
有効な href 値として許容される文字列のリスト。
使い方
設定ファイルまたは CLI でこのルールを有効化するには、次のように使用できます：
json
{
"plugins": ["jsx-a11y"],
"rules": {
"jsx-a11y/anchor-is-valid": "error"
}
}bash
oxlint --deny jsx-a11y/anchor-is-valid --jsx-a11y-plugin