--- title: ルール description: svelte-vitals が行うチェックの一覧。カテゴリ別にまとめています。 --- svelte-vitals が報告するルールをカテゴリ別にまとめました。それぞれのルールから、何をチェックし、なぜ重要で、どう直すかを説明したページへ移動できます。 表に並ぶ重大度は初期値です。変えたり無効にしたりする方法は [設定](/ja/guides/configuration) を参照してください。 {/* rules-index:start */} 検索エンジンが実際に目にするもの。解決後の <head> メタデータ、構造化データ、クロールのしやすさを見ます。 ルートが遅くなる原因。画像、レンダリングを妨げるアセット、import、読み込みのウォーターフォールを見ます。 コンパイルは通るのに、思ったとおりに動かないコード。runes とライフサイクルの使い方を見ます。 エスケープされない HTML、安全でない URL、サーバーでリクエストをまたいで漏れる状態を見ます。 コードの形と置き場所のサイン。コンポーネントの大きさ、props の数、そしてプロジェクトが宣言した import の境界を見ます。 すべての人にとって使いやすいサイト。ARIA の妥当性、ランドマーク構造、アクセシブルネーム、セマンティック HTML を見ます。 ## SEO | ルール | 重大度 | 概要 | | ---------------------------------------------------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------------ | | [`seo/title-presence`](/ja/rules/seo/title-presence) | 🔴 critical | どのルートでも <title> が空にならないようにしましょう。 | | [`seo/canonical-url`](/ja/rules/seo/canonical-url) | 🟡 warning | すべてのルートに <link rel="canonical"> タグを含めるべきです。 | | [`seo/charset`](/ja/rules/seo/charset) | 🟡 warning | 文字エンコーディングは <meta charset> で宣言します。 | | [`seo/description-presence`](/ja/rules/seo/description-presence) | 🟡 warning | すべてのルートに <meta name="description"> が必要です。 | | [`seo/duplicate-description`](/ja/rules/seo/duplicate-description) | 🟡 warning | meta description はルートごとに違う内容にしましょう。 | | [`seo/duplicate-title`](/ja/rules/seo/duplicate-title) | 🟡 warning | <title> はルートごとに違う内容にしましょう。 | | [`seo/hreflang`](/ja/rules/seo/hreflang) | 🟡 warning | hreflang の alternate には有効なコードを使いましょう。x-default はセレクター・リダイレクトページで推奨されます。 | | [`seo/html-lang`](/ja/rules/seo/html-lang) | 🟡 warning | app.html の <html> に lang 属性を設定しましょう。 | | [`seo/image-alt`](/ja/rules/seo/image-alt) | 🟡 warning | <img> には alt 属性を付けます。 | | [`seo/json-ld-relative-url`](/ja/rules/seo/json-ld-relative-url) | 🟡 warning | JSON-LD の URL は絶対 URL で書きます。 | | [`seo/json-ld-required-props`](/ja/rules/seo/json-ld-required-props) | 🟡 warning | 認識できる @type には、リッチリザルトに必要なプロパティを揃えましょう。 | | [`seo/json-ld-validity`](/ja/rules/seo/json-ld-validity) | 🟡 warning | ページの JSON-LD は、@context と @type を備えた妥当な JSON である必要があります。 | | [`seo/og-image`](/ja/rules/seo/og-image) | 🟡 warning | <meta property="og:image"> タグはどのルートにも必要です。 | | [`seo/og-title`](/ja/rules/seo/og-title) | 🟡 warning | <meta property="og:title"> タグはどのルートにも必要です。 | | [`seo/og-url`](/ja/rules/seo/og-url) | 🟡 warning | og:url には、そのページの正規アドレスを入れましょう。 | | [`seo/robots-txt`](/ja/rules/seo/robots-txt) | 🟡 warning | プロジェクトに robots.txt を用意しましょう。 | | [`seo/single-h1`](/ja/rules/seo/single-h1) | 🟡 warning | <h1> は 1 ページにつき 1 つだけにしましょう。 | | [`seo/sitemap-xml`](/ja/rules/seo/sitemap-xml) | 🟡 warning | プロジェクトに sitemap.xml を用意しましょう。 | | [`seo/ssr-disabled`](/ja/rules/seo/ssr-disabled) | 🟡 warning | export const ssr = false にすると、JS を実行しないクローラーからコンテンツが見えなくなり、初回描画も遅くなります。 | | [`seo/viewport`](/ja/rules/seo/viewport) | 🟡 warning | レスポンシブ表示のための viewport メタタグを宣言しましょう。 | | [`seo/description-length`](/ja/rules/seo/description-length) | 🔵 info | meta description は 70〜160 文字に収めましょう。 | | [`seo/heading-level-skip`](/ja/rules/seo/heading-level-skip) | 🔵 info | 見出しのレベルは飛ばさずに使いましょう。 | | [`seo/indexability`](/ja/rules/seo/indexability) | 🔵 info | ルートが誤って noindex になっていないか確認します。 | | [`seo/json-ld`](/ja/rules/seo/json-ld) | 🔵 info | どのルートにも JSON-LD 構造化データを入れましょう。 | | [`seo/json-ld-date-format`](/ja/rules/seo/json-ld-date-format) | 🔵 info | JSON-LD の日付プロパティは ISO-8601 形式で書きます。 | | [`seo/json-ld-deprecated-type`](/ja/rules/seo/json-ld-deprecated-type) | 🔵 info | 一部のスキーマ型は、Google のリッチリザルトが廃止または制限されました。 | | [`seo/json-ld-placeholder`](/ja/rules/seo/json-ld-placeholder) | 🔵 info | JSON-LD にプレースホルダのまま残っている値がないか確認します。 | | [`seo/og-description`](/ja/rules/seo/og-description) | 🔵 info | og:description はどのルートにも入れましょう。 | | [`seo/sitemap-in-robots`](/ja/rules/seo/sitemap-in-robots) | 🔵 info | robots.txt から sitemap の場所をクローラーに伝えましょう。 | | [`seo/title-length`](/ja/rules/seo/title-length) | 🔵 info | <title> は 30〜60 文字に収めましょう。 | | [`seo/twitter-card`](/ja/rules/seo/twitter-card) | 🔵 info | X/Twitter で大きなカード表示にするため、twitter:card を宣言しましょう。 | ## Performance | ルール | 重大度 | 概要 | | ---------------------------------------------------------------------------------------- | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | [`performance/font-preload-crossorigin`](/ja/rules/performance/font-preload-crossorigin) | 🟡 warning | crossorigin を指定しないと、preload したフォントは使われません。 | | [`performance/image-dimensions`](/ja/rules/performance/image-dimensions) | 🟡 warning | <img> には width と height を明示します。 | | [`performance/lcp-image`](/ja/rules/performance/lcp-image) | 🟡 warning | LCP になりそうな最初の画像は、遅延読み込みにしないでください。 | | [`performance/load-waterfall`](/ja/rules/performance/load-waterfall) | 🟡 warning | universal load で依存関係のある await が数珠つなぎになると、1 ホップごとにブラウザからのネットワーク往復が発生します。 | | [`performance/minify-disabled`](/ja/rules/performance/minify-disabled) | 🟡 warning | vite.config に build.minify:false が残っていると、ミニファイされていない JS/CSS がそのまま本番に配信されます。 | | [`performance/preload-missing-as`](/ja/rules/performance/preload-missing-as) | 🟡 warning | <link rel="preload"> には as 属性を指定します。 | | [`performance/render-blocking-script`](/ja/rules/performance/render-blocking-script) | 🟡 warning | head の <script src> で HTML の解析を止めないようにしましょう。 | | [`performance/heavy-import`](/ja/rules/performance/heavy-import) | 🔵 info | サイズが大きく、ツリーシェイクも効かないパッケージの import は避けましょう。 | | [`performance/iframe-loading`](/ja/rules/performance/iframe-loading) | 🔵 info | 画面外の iframe は、スクリプト・フォント・メディアを含むサードパーティのドキュメント全体を先読みし、画面外の画像より高くつくのが普通です。loading="lazy" で遅延できます。 | | [`performance/image-loading-hint`](/ja/rules/performance/image-loading-hint) | 🔵 info | <img> には loading 属性を明示します。 | | [`performance/namespace-import`](/ja/rules/performance/namespace-import) | 🔵 info | ツリーシェイクを効かせるため、import \* as ではなく名前付き import を使いましょう。 | | [`performance/preconnect`](/ja/rules/performance/preconnect) | 🔵 info | ページが使うサードパーティのオリジンには、あらかじめ preconnect しておきましょう。 | | [`performance/responsive-image`](/ja/rules/performance/responsive-image) | 🔵 info | 大きな画像には srcset を用意しましょう。 | | [`performance/sequential-awaits`](/ja/rules/performance/sequential-awaits) | 🔵 info | 互いの結果を使わない await の逐次実行は無駄です。同時に開始しましょう。 | | [`performance/state-raw`](/ja/rules/performance/state-raw) | 🔵 info | 再代入しかしないオブジェクト・配列の $state には、一度も使わない深いリアクティビティのコストがかかり続けます。$state.raw ならプロキシを省けます。 | ## Correctness | ルール | 重大度 | 概要 | | ------------------------------------------------------------------------------------------ | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | [`correctness/orphan-effect`](/ja/rules/correctness/orphan-effect) | 🔴 critical | コンポーネント初期化の外で作られた $effect はランタイムで effect_orphan エラーになります。 | | [`correctness/orphan-lifecycle`](/ja/rules/correctness/orphan-lifecycle) | 🔴 critical | onMount や getContext などをコンポーネント初期化の外で呼ぶと、ランタイムで lifecycle_outside_component エラーになります。 | | [`correctness/server-browser-global`](/ja/rules/correctness/server-browser-global) | 🔴 critical | モジュールスコープや load・ハンドラで window や document、localStorage を参照すると、SSR が ReferenceError で落ちます。 | | [`correctness/autoplay-muted`](/ja/rules/correctness/autoplay-muted) | 🟡 warning | ブラウザは音声付きの自動再生をブロックし、ブロックされてもエラーになりません。muted のない <video autoplay> は実際の訪問者の前で静かに再生されないままです。 | | [`correctness/base-path-navigation`](/ja/rules/correctness/base-path-navigation) | 🟡 warning | ルート相対リンクをハードコードすると kit.paths.base ではなくドメインのルートを指すため、base path の配下ではアプリの外に出てしまい、本番で 404 になります。 | | [`correctness/checkable-bind-value`](/ja/rules/correctness/checkable-bind-value) | 🟡 warning | checkbox や radio の bind:value は DOM の value プロパティを見るため、チェックを切り替えても値が更新されません。 | | [`correctness/each-index-key`](/ja/rules/correctness/each-index-key) | 🟡 warning | {#each} のキーに index を使うと、要素の同一性が位置で決まります。キーを付けないのと同じバグが、見えにくい形で起こります。 | | [`correctness/each-key`](/ja/rules/correctness/each-key) | 🟡 warning | 動的なデータを回す {#each} にはキーを付けましょう。 | | [`correctness/effect-as-derived`](/ja/rules/correctness/effect-as-derived) | 🟡 warning | 状態を代入するだけの $effect は $derived に置き換えましょう。 | | [`correctness/effect-as-onmount`](/ja/rules/correctness/effect-as-onmount) | 🟡 warning | reactive 値を読まない $effect は、イベントハンドラ、{@attach}、onMount のいずれかで書くべきです。 | | [`correctness/instance-browser-global`](/ja/rules/correctness/instance-browser-global) | 🟡 warning | インスタンススクリプトは SSR 時にサーバーでも実行されるため、トップレベルで window や document を参照するとレンダリングが落ちます。 | | [`correctness/nonreactive-builtin-state`](/ja/rules/correctness/nonreactive-builtin-state) | 🟡 warning | $state に入れた素の Map・Set・Date・URL・URLSearchParams はプロキシされないため、中身を変えても検知されず、気づかないうちに UI が更新されなくなります。 | | [`correctness/prop-mutation`](/ja/rules/correctness/prop-mutation) | 🟡 warning | $bindable を宣言していない $props() の値は書き換えないでください。 | | [`correctness/stale-prop-derivation`](/ja/rules/correctness/stale-prop-derivation) | 🟡 warning | $derived を使わずに prop から計算した値は一度しか評価されず、気づかないうちに親の変更へ追従しなくなります。 | | [`correctness/unmutated-state`](/ja/rules/correctness/unmutated-state) | 🔵 info | 一度も変更しない $state は、const（または $state.raw）で十分です。 | ## Security | ルール | 重大度 | 概要 | | ------------------------------------------------------------------------ | ----------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | [`security/handler-state-write`](/ja/rules/security/handler-state-write) | 🔴 critical | load 関数や action が、import したモジュールの状態に書き込んでいます。サーバーではこの状態を全リクエストで共有します。 | | [`security/javascript-url`](/ja/rules/security/javascript-url) | 🟡 warning | 属性に javascript: URL を使わないでください。 | | [`security/raw-html`](/ja/rules/security/raw-html) | 🟡 warning | {@html} は HTML をエスケープせずに描画します。値は必ずサニタイズしてください。 | | [`security/server-module-state`](/ja/rules/security/server-module-state) | 🟡 warning | ルートや hooks のファイルで、モジュールスコープの変数を関数の中から再代入しています。サーバーではこの変数を全リクエストで共有します。 | | [`security/shared-state-import`](/ja/rules/security/shared-state-import) | 🟡 warning | server / universal ファイルが、モジュールスコープに $state を持つ .svelte.ts を import しています。サーバープロセスでは 1 つのインスタンスを全リクエストで共有します。 | ## Architecture | ルール | 重大度 | 概要 | | ------------------------------------------------------------------------------------------ | ------- | ---------------------------------------------------------------------------------------------------------------------- | | [`architecture/component-size`](/ja/rules/architecture/component-size) | 🔵 info | 大きくなりすぎたコンポーネントは分割しましょう。 | | [`architecture/directory-naming`](/ja/rules/architecture/directory-naming) | 🔵 info | ディレクトリは、その場所に宣言した記法で名付けるべきです。 | | [`architecture/doc-link-target`](/ja/rules/architecture/doc-link-target) | 🔵 info | コメントに書かれたドキュメントリンクは、実在する何かを指し続けている必要があります。 | | [`architecture/private-scope-import`](/ja/rules/architecture/private-scope-import) | 🔵 info | プライベートなディレクトリ内のユニットを、その外から import すべきではありません。 | | [`architecture/prop-count`](/ja/rules/architecture/prop-count) | 🔵 info | props が多すぎるコンポーネントは、担っている責務も多すぎます。 | | [`architecture/reserved-directory-names`](/ja/rules/architecture/reserved-directory-names) | 🔵 info | ディレクトリの直下に置ける名前は、その位置に宣言した名前だけにすべきです。 | | [`architecture/reserved-name-placement`](/ja/rules/architecture/reserved-name-placement) | 🔵 info | 予約ディレクトリ名は、その名前について宣言した場所にしか現れてはいけません。 | | [`architecture/route-component-import`](/ja/rules/architecture/route-component-import) | 🔵 info | SvelteKit のルートエントリはフレームワークが描画するものであり、他のコンポーネントから import するものではありません。 | | [`architecture/unit-entry-file`](/ja/rules/architecture/unit-entry-file) | 🔵 info | ユニットとして宣言したディレクトリには、同名のファイルを置くべきです。 | ## Accessibility | ルール | 重大度 | 概要 | | -------------------------------------------------------------------------- | ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | [`a11y/accessible-name`](/ja/rules/a11y/accessible-name) | 🟡 warning | ボタン・リンク・画像ボタン・iframe には、アクセシブルネームを算出できる手がかりが必要です。 | | [`a11y/aria-hidden-focus`](/ja/rules/a11y/aria-hidden-focus) | 🟡 warning | キーボードでフォーカスできる要素を aria-hidden="true" で支援技術から隠してはいけません。 | | [`a11y/disallowed-aria-props`](/ja/rules/a11y/disallowed-aria-props) | 🟡 warning | 要素の role が対応しない aria-\* 属性は無視され、role が禁止する属性、たとえば素の div への名前付けは、公開されない名前になります。 | | [`a11y/disallowed-element`](/ja/rules/a11y/disallowed-element) | 🟡 warning | プロジェクトが「使わない」と宣言した要素の出現をすべて報告します。宣言するまでは何もしません。 | | [`a11y/duplicate-landmark`](/ja/rules/a11y/duplicate-landmark) | 🟡 warning | 1つのルートに main・banner・contentinfo ランドマークはそれぞれ1つまでにしましょう。 | | [`a11y/id-duplication`](/ja/rules/a11y/id-duplication) | 🟡 warning | ルート内の id はすべて一意にしましょう。 | | [`a11y/interactive-nesting`](/ja/rules/a11y/interactive-nesting) | 🟡 warning | インタラクティブな要素を、別のインタラクティブな要素の内側に置いてはいけません。 | | [`a11y/invalid-aria-value`](/ja/rules/a11y/invalid-aria-value) | 🟡 warning | aria-\* 属性の値は、その属性に WAI-ARIA 仕様が定める型と一致させます。 | | [`a11y/invalid-role`](/ja/rules/a11y/invalid-role) | 🟡 warning | role 属性には、タイポでも抽象ロールでもない、具体的な WAI-ARIA ロールを指定します。 | | [`a11y/label-has-control`](/ja/rules/a11y/label-has-control) | 🟡 warning | label をフィールドと関連付けるには for 属性かラップされたコントロールが必要です。 | | [`a11y/no-accesskey`](/ja/rules/a11y/no-accesskey) | 🟡 warning | accesskey 属性はページレベルのショートカットキーを割り当てますが、実際のキーの組み合わせはブラウザと OS によって異なり、ユーザーには発見できず、支援技術のキーバインドと衝突します。 | | [`a11y/no-autofocus`](/ja/rules/a11y/no-autofocus) | 🟡 warning | autofocus はページ読み込み時にユーザーの意図と無関係にフォーカスを移動させます。スクリーンリーダーのユーザーは組み立てていたページの文脈を失い、キーボードのユーザーはページの途中に放り出されます。 | | [`a11y/no-missing-id-ref`](/ja/rules/a11y/no-missing-id-ref) | 🟡 warning | id参照は、合成後のルートのどこかに存在する id を指している必要があります。 | | [`a11y/permitted-contents`](/ja/rules/a11y/permitted-contents) | 🟡 warning | すべての要素は、HTML のコンテンツモデル上、親要素に許可されたコンテンツでなければなりません。 | | [`a11y/placeholder-label-option`](/ja/rules/a11y/placeholder-label-option) | 🟡 warning | required かつ単一選択の select には、値を選ばせずに送信できてしまわないよう空の先頭 option が必要です。 | | [`a11y/positive-tabindex`](/ja/rules/a11y/positive-tabindex) | 🟡 warning | 0 より大きい tabindex はその要素をページ内の自然順のすべての要素より前に置き、たった1つの tabindex="1" がページ全体のキーボードナビゲーション順を組み替えてしまいます。 | | [`a11y/required-aria-props`](/ja/rules/a11y/required-aria-props) | 🟡 warning | state や property 属性を要求するロールには、ネイティブなホスト要素のセマンティクスで代替されない限り、それらの属性が必要です。 | | [`a11y/required-element`](/ja/rules/a11y/required-element) | 🟡 warning | すべてのルートがプロジェクトの宣言する要素を含まなければなりません。合成されたルートで判定するので、レイアウトの <main> も数えます。 | | [`a11y/top-level-landmark`](/ja/rules/a11y/top-level-landmark) | 🟡 warning | banner・main・complementary・contentinfo ランドマークは、他のランドマークの内側に置いてはいけません。 | | [`a11y/unknown-aria-attribute`](/ja/rules/a11y/unknown-aria-attribute) | 🟡 warning | aria-\* 属性には、タイポではない実在の WAI-ARIA 属性名を指定します。 | | [`a11y/abbr-title`](/ja/rules/a11y/abbr-title) | 🔵 info | title のない <abbr> は読者に展開形を提供しません。晴眼ユーザーにはツールチップが出ず、支援技術には展開するものがありません。 | | [`a11y/deprecated-aria`](/ja/rules/a11y/deprecated-aria) | 🔵 info | ARIA 1.3 が全体として、または置かれた role 上で非推奨にした role や aria-\* 属性は、いまも動くが、そこではもう定義されていません。 | | [`a11y/deprecated-attr`](/ja/rules/a11y/deprecated-attr) | 🔵 info | HTML spec データがその要素で非推奨と記す属性は、標準ではなくレガシー互換によって挙動が決まっています。 | | [`a11y/deprecated-element`](/ja/rules/a11y/deprecated-element) | 🔵 info | HTML 標準の obsolete features に挙げられた要素は非適合であり、適合する代替要素があります。 | | [`a11y/doctype`](/ja/rules/a11y/doctype) | 🔵 info | src/app.html の先頭は <!doctype html> で始めましょう。 | | [`a11y/no-duplicate-dt`](/ja/rules/a11y/no-duplicate-dt) | 🔵 info | 1つの dl 要素の中で、同じ名前の dt 要素は複数あるべきではありません。重複した用語はたいてい、2つの説明が1つの dt を共有するはずだったコピペミスです。 | | [`a11y/pattern-title`](/ja/rules/a11y/pattern-title) | 🔵 info | input に pattern を指定するときは、期待する形式を説明する title を含めるべきと仕様が述べています。それがないと、送信に失敗しても「値が違う」ことしか伝わりません。 | | [`a11y/require-datetime`](/ja/rules/a11y/require-datetime) | 🔵 info | time 要素のテキストは機械可読であるか、datetime 属性で機械可読な値を補う必要があります。 | | [`a11y/unverified-id-ref`](/ja/rules/a11y/unverified-id-ref) | 🔵 info | オプトイン: 合成が完全には解決していないルート上で、検証できない id 参照を検出します。 | | [`a11y/use-list`](/ja/rules/a11y/use-list) | 🔵 info | プレーンテキストに入力された行頭記号は、本物のリスト要素に置き換えるべきです。 | {/* rules-index:end */}