ルール

svelte-vitals が行うチェックの一覧。カテゴリ別にまとめています。

svelte-vitals が報告するルールをカテゴリ別にまとめました。それぞれのルールから、何をチェックし、なぜ重要で、どう直すかを説明したページへ移動できます。

表に並ぶ重大度は初期値です。変えたり無効にしたりする方法は設定を参照してください。

SEO

検索エンジンが実際に目にするもの。解決後の <head> メタデータ、構造化データ、クロールのしやすさを見ます。

Performance

ルートが遅くなる原因。画像、レンダリングを妨げるアセット、import、読み込みのウォーターフォールを見ます。

Correctness

コンパイルは通るのに、思ったとおりに動かないコード。runes とライフサイクルの使い方を見ます。

Security

エスケープされない HTML、安全でない URL、サーバーでリクエストをまたいで漏れる状態を見ます。

Architecture

コードの形と置き場所のサイン。コンポーネントの大きさ、props の数、そしてプロジェクトが宣言した import の境界を見ます。

Accessibility

すべての人にとって使いやすいサイト。ARIA の妥当性、ランドマーク構造、アクセシブルネーム、セマンティック HTML を見ます。

SEO

ルール	重大度	概要
`seo/title-presence`	🔴 critical	どのルートでも <title> が空にならないようにしましょう。
`seo/canonical-url`	🟡 warning	すべてのルートに <link rel=“canonical”> タグを含めるべきです。
`seo/charset`	🟡 warning	文字エンコーディングは <meta charset> で宣言します。
`seo/description-presence`	🟡 warning	すべてのルートに <meta name=“description”> が必要です。
`seo/duplicate-description`	🟡 warning	meta description はルートごとに違う内容にしましょう。
`seo/duplicate-title`	🟡 warning	<title> はルートごとに違う内容にしましょう。
`seo/hreflang`	🟡 warning	hreflang の alternate には有効なコードを使いましょう。x-default はセレクター・リダイレクトページで推奨されます。
`seo/html-lang`	🟡 warning	app.html の <html> に lang 属性を設定しましょう。
`seo/image-alt`	🟡 warning	<img> には alt 属性を付けます。
`seo/json-ld-relative-url`	🟡 warning	JSON-LD の URL は絶対 URL で書きます。
`seo/json-ld-required-props`	🟡 warning	認識できる @type には、リッチリザルトに必要なプロパティを揃えましょう。
`seo/json-ld-validity`	🟡 warning	ページの JSON-LD は、@context と @type を備えた妥当な JSON である必要があります。
`seo/og-image`	🟡 warning	<meta property=“og”> タグはどのルートにも必要です。
`seo/og-title`	🟡 warning	<meta property=“og”> タグはどのルートにも必要です。
`seo/og-url`	🟡 warning	og には、そのページの正規アドレスを入れましょう。
`seo/robots-txt`	🟡 warning	プロジェクトに robots.txt を用意しましょう。
`seo/single-h1`	🟡 warning	<h1> は 1 ページにつき 1 つだけにしましょう。
`seo/sitemap-xml`	🟡 warning	プロジェクトに sitemap.xml を用意しましょう。
`seo/ssr-disabled`	🟡 warning	export const ssr = false にすると、JS を実行しないクローラーからコンテンツが見えなくなり、初回描画も遅くなります。
`seo/viewport`	🟡 warning	レスポンシブ表示のための viewport メタタグを宣言しましょう。
`seo/description-length`	🔵 info	meta description は 70〜160 文字に収めましょう。
`seo/heading-level-skip`	🔵 info	見出しのレベルは飛ばさずに使いましょう。
`seo/indexability`	🔵 info	ルートが誤って noindex になっていないか確認します。
`seo/json-ld`	🔵 info	どのルートにも JSON-LD 構造化データを入れましょう。
`seo/json-ld-date-format`	🔵 info	JSON-LD の日付プロパティは ISO-8601 形式で書きます。
`seo/json-ld-deprecated-type`	🔵 info	一部のスキーマ型は、Google のリッチリザルトが廃止または制限されました。
`seo/json-ld-placeholder`	🔵 info	JSON-LD にプレースホルダのまま残っている値がないか確認します。
`seo/og-description`	🔵 info	og はどのルートにも入れましょう。
`seo/sitemap-in-robots`	🔵 info	robots.txt から sitemap の場所をクローラーに伝えましょう。
`seo/title-length`	🔵 info	<title> は 30〜60 文字に収めましょう。
`seo/twitter-card`	🔵 info	X/Twitter で大きなカード表示にするため、twitter を宣言しましょう。

Performance

ルール	重大度	概要
`performance/font-preload-crossorigin`	🟡 warning	crossorigin を指定しないと、preload したフォントは使われません。
`performance/image-dimensions`	🟡 warning	<img> には width と height を明示します。
`performance/lcp-image`	🟡 warning	LCP になりそうな最初の画像は、遅延読み込みにしないでください。
`performance/load-waterfall`	🟡 warning	universal load で依存関係のある await が数珠つなぎになると、1 ホップごとにブラウザからのネットワーク往復が発生します。
`performance/minify-disabled`	🟡 warning	vite.config に build.minify が残っていると、ミニファイされていない JS/CSS がそのまま本番に配信されます。
`performance/preload-missing-as`	🟡 warning	<link rel=“preload”> には as 属性を指定します。
`performance/render-blocking-script`	🟡 warning	head の <script src> で HTML の解析を止めないようにしましょう。
`performance/heavy-import`	🔵 info	サイズが大きく、ツリーシェイクも効かないパッケージの import は避けましょう。
`performance/iframe-loading`	🔵 info	画面外の iframe は、スクリプト・フォント・メディアを含むサードパーティのドキュメント全体を先読みし、画面外の画像より高くつくのが普通です。loading=“lazy” で遅延できます。
`performance/image-loading-hint`	🔵 info	<img> には loading 属性を明示します。
`performance/namespace-import`	🔵 info	ツリーシェイクを効かせるため、import * as ではなく名前付き import を使いましょう。
`performance/preconnect`	🔵 info	ページが使うサードパーティのオリジンには、あらかじめ preconnect しておきましょう。
`performance/responsive-image`	🔵 info	大きな画像には srcset を用意しましょう。
`performance/sequential-awaits`	🔵 info	互いの結果を使わない await の逐次実行は無駄です。同時に開始しましょう。
`performance/state-raw`	🔵 info	再代入しかしないオブジェクト・配列の $state には、一度も使わない深いリアクティビティのコストがかかり続けます。$state.raw ならプロキシを省けます。

Correctness

ルール	重大度	概要
`correctness/orphan-effect`	🔴 critical	コンポーネント初期化の外で作られた $effect はランタイムで effect_orphan エラーになります。
`correctness/orphan-lifecycle`	🔴 critical	onMount や getContext などをコンポーネント初期化の外で呼ぶと、ランタイムで lifecycle_outside_component エラーになります。
`correctness/server-browser-global`	🔴 critical	モジュールスコープや load・ハンドラで window や document、localStorage を参照すると、SSR が ReferenceError で落ちます。
`correctness/autoplay-muted`	🟡 warning	ブラウザは音声付きの自動再生をブロックし、ブロックされてもエラーになりません。muted のない <video autoplay> は実際の訪問者の前で静かに再生されないままです。
`correctness/base-path-navigation`	🟡 warning	ルート相対リンクをハードコードすると kit.paths.base ではなくドメインのルートを指すため、base path の配下ではアプリの外に出てしまい、本番で 404 になります。
`correctness/checkable-bind-value`	🟡 warning	checkbox や radio の bind は DOM の value プロパティを見るため、チェックを切り替えても値が更新されません。
`correctness/each-index-key`	🟡 warning	{#each} のキーに index を使うと、要素の同一性が位置で決まります。キーを付けないのと同じバグが、見えにくい形で起こります。
`correctness/each-key`	🟡 warning	動的なデータを回す {#each} にはキーを付けましょう。
`correctness/effect-as-derived`	🟡 warning	状態を代入するだけの $effect は $derived に置き換えましょう。
`correctness/effect-as-onmount`	🟡 warning	reactive 値を読まない $effect は、イベントハンドラ、{@attach}、onMount のいずれかで書くべきです。
`correctness/instance-browser-global`	🟡 warning	インスタンススクリプトは SSR 時にサーバーでも実行されるため、トップレベルで window や document を参照するとレンダリングが落ちます。
`correctness/nonreactive-builtin-state`	🟡 warning	$state に入れた素の Map・Set・Date・URL・URLSearchParams はプロキシされないため、中身を変えても検知されず、気づかないうちに UI が更新されなくなります。
`correctness/prop-mutation`	🟡 warning	$bindable を宣言していない $props() の値は書き換えないでください。
`correctness/stale-prop-derivation`	🟡 warning	$derived を使わずに prop から計算した値は一度しか評価されず、気づかないうちに親の変更へ追従しなくなります。
`correctness/unmutated-state`	🔵 info	一度も変更しない $state は、const（または $state.raw）で十分です。

Security

ルール	重大度	概要
`security/handler-state-write`	🔴 critical	load 関数や action が、import したモジュールの状態に書き込んでいます。サーバーではこの状態を全リクエストで共有します。
`security/javascript-url`	🟡 warning	属性に javascript: URL を使わないでください。
`security/raw-html`	🟡 warning	{@html} は HTML をエスケープせずに描画します。値は必ずサニタイズしてください。
`security/server-module-state`	🟡 warning	ルートや hooks のファイルで、モジュールスコープの変数を関数の中から再代入しています。サーバーではこの変数を全リクエストで共有します。
`security/shared-state-import`	🟡 warning	server / universal ファイルが、モジュールスコープに $state を持つ .svelte.ts を import しています。サーバープロセスでは 1 つのインスタンスを全リクエストで共有します。

Architecture

ルール	重大度	概要
`architecture/component-size`	🔵 info	大きくなりすぎたコンポーネントは分割しましょう。
`architecture/directory-naming`	🔵 info	ディレクトリは、その場所に宣言した記法で名付けるべきです。
`architecture/doc-link-target`	🔵 info	コメントに書かれたドキュメントリンクは、実在する何かを指し続けている必要があります。
`architecture/private-scope-import`	🔵 info	プライベートなディレクトリ内のユニットを、その外から import すべきではありません。
`architecture/prop-count`	🔵 info	props が多すぎるコンポーネントは、担っている責務も多すぎます。
`architecture/reserved-directory-names`	🔵 info	ディレクトリの直下に置ける名前は、その位置に宣言した名前だけにすべきです。
`architecture/reserved-name-placement`	🔵 info	予約ディレクトリ名は、その名前について宣言した場所にしか現れてはいけません。
`architecture/route-component-import`	🔵 info	SvelteKit のルートエントリはフレームワークが描画するものであり、他のコンポーネントから import するものではありません。
`architecture/unit-entry-file`	🔵 info	ユニットとして宣言したディレクトリには、同名のファイルを置くべきです。

Accessibility

ルール	重大度	概要
`a11y/accessible-name`	🟡 warning	ボタン・リンク・画像ボタン・iframe には、アクセシブルネームを算出できる手がかりが必要です。
`a11y/aria-hidden-focus`	🟡 warning	キーボードでフォーカスできる要素を aria-hidden=“true” で支援技術から隠してはいけません。
`a11y/disallowed-aria-props`	🟡 warning	要素の role が対応しない aria-* 属性は無視され、role が禁止する属性、たとえば素の div への名前付けは、公開されない名前になります。
`a11y/disallowed-element`	🟡 warning	プロジェクトが「使わない」と宣言した要素の出現をすべて報告します。宣言するまでは何もしません。
`a11y/duplicate-landmark`	🟡 warning	1つのルートに main・banner・contentinfo ランドマークはそれぞれ1つまでにしましょう。
`a11y/id-duplication`	🟡 warning	ルート内の id はすべて一意にしましょう。
`a11y/interactive-nesting`	🟡 warning	インタラクティブな要素を、別のインタラクティブな要素の内側に置いてはいけません。
`a11y/invalid-aria-value`	🟡 warning	aria-* 属性の値は、その属性に WAI-ARIA 仕様が定める型と一致させます。
`a11y/invalid-role`	🟡 warning	role 属性には、タイポでも抽象ロールでもない、具体的な WAI-ARIA ロールを指定します。
`a11y/label-has-control`	🟡 warning	label をフィールドと関連付けるには for 属性かラップされたコントロールが必要です。
`a11y/no-accesskey`	🟡 warning	accesskey 属性はページレベルのショートカットキーを割り当てますが、実際のキーの組み合わせはブラウザと OS によって異なり、ユーザーには発見できず、支援技術のキーバインドと衝突します。
`a11y/no-autofocus`	🟡 warning	autofocus はページ読み込み時にユーザーの意図と無関係にフォーカスを移動させます。スクリーンリーダーのユーザーは組み立てていたページの文脈を失い、キーボードのユーザーはページの途中に放り出されます。
`a11y/no-missing-id-ref`	🟡 warning	id参照は、合成後のルートのどこかに存在する id を指している必要があります。
`a11y/permitted-contents`	🟡 warning	すべての要素は、HTML のコンテンツモデル上、親要素に許可されたコンテンツでなければなりません。
`a11y/placeholder-label-option`	🟡 warning	required かつ単一選択の select には、値を選ばせずに送信できてしまわないよう空の先頭 option が必要です。
`a11y/positive-tabindex`	🟡 warning	0 より大きい tabindex はその要素をページ内の自然順のすべての要素より前に置き、たった1つの tabindex=“1” がページ全体のキーボードナビゲーション順を組み替えてしまいます。
`a11y/required-aria-props`	🟡 warning	state や property 属性を要求するロールには、ネイティブなホスト要素のセマンティクスで代替されない限り、それらの属性が必要です。
`a11y/required-element`	🟡 warning	すべてのルートがプロジェクトの宣言する要素を含まなければなりません。合成されたルートで判定するので、レイアウトの <main> も数えます。
`a11y/top-level-landmark`	🟡 warning	banner・main・complementary・contentinfo ランドマークは、他のランドマークの内側に置いてはいけません。
`a11y/unknown-aria-attribute`	🟡 warning	aria-* 属性には、タイポではない実在の WAI-ARIA 属性名を指定します。
`a11y/abbr-title`	🔵 info	title のない <abbr> は読者に展開形を提供しません。晴眼ユーザーにはツールチップが出ず、支援技術には展開するものがありません。
`a11y/deprecated-aria`	🔵 info	ARIA 1.3 が全体として、または置かれた role 上で非推奨にした role や aria-* 属性は、いまも動くが、そこではもう定義されていません。
`a11y/deprecated-attr`	🔵 info	HTML spec データがその要素で非推奨と記す属性は、標準ではなくレガシー互換によって挙動が決まっています。
`a11y/deprecated-element`	🔵 info	HTML 標準の obsolete features に挙げられた要素は非適合であり、適合する代替要素があります。
`a11y/doctype`	🔵 info	src/app.html の先頭は <!doctype html> で始めましょう。
`a11y/no-duplicate-dt`	🔵 info	1つの dl 要素の中で、同じ名前の dt 要素は複数あるべきではありません。重複した用語はたいてい、2つの説明が1つの dt を共有するはずだったコピペミスです。
`a11y/pattern-title`	🔵 info	input に pattern を指定するときは、期待する形式を説明する title を含めるべきと仕様が述べています。それがないと、送信に失敗しても「値が違う」ことしか伝わりません。
`a11y/require-datetime`	🔵 info	time 要素のテキストは機械可読であるか、datetime 属性で機械可読な値を補う必要があります。
`a11y/unverified-id-ref`	🔵 info	オプトイン: 合成が完全には解決していないルート上で、検証できない id 参照を検出します。
`a11y/use-list`	🔵 info	プレーンテキストに入力された行頭記号は、本物のリスト要素に置き換えるべきです。