HTML noscriptタグ：JavaScript無効時の代替コンテンツ
HTML <noscript> には、ブラウザがスクリプトを使用できない場合の代替コンテンツが含まれています。JavaScript のダウンロード失敗や実行時エラーは検出できないため、エラーメッセージは別途実装する必要があります。
スクリプトの無効化と実行失敗は異なります
ブラウザがスクリプトを実行するように設定されている場合、noscript 内のコンテンツは通常のページコンテンツとして表示されません。ファイルが存在しない、構文エラー、または実行時例外が発生しても、ページが自動的に noscript に切り替わることはありません。機能が失敗した場合に読者にガイダンスを提供する必要がある場合は、基本的な HTML 内にメッセージを提供し、スクリプトが成功した後にのみそれを更新することを検討してください。
完全な例: 成功した実行とエラーを比較
次の文書を noscript-demo.html として保存し、ブラウザで開いてください。JavaScript が有効になっている場合、初期メッセージは成功メッセージに変わります。この例では外部ライブラリやサーバーリクエストは使用していません。
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>noscriptの動作比較</title>
</head>
<body>
<h1>スクリプトの状態を確認</h1>
<p id="status">スクリプトはまだこの案内を更新していません。</p>
<noscript>
<p>現在スクリプトを使用できません。下の基本案内をお読みください。</p>
</noscript>
<p>基本案内：このページはスクリプトなしでも本文を読めます。</p>
<script>
if (new URLSearchParams(location.search).has('fail')) {
throw new Error('実習用の実行エラー');
}
document.getElementById('status').textContent = 'スクリプトが実行されました。';
</script>
</body>
</html>- スクリプトを有効にしてドキュメントを開きます。ページには「
スクリプトが実行されました。」と基本的な案内が表示され、noscriptメッセージは非表示のままです。 - アドレスに
?fail=1を追加してもう一度開きます。デモエラーにより最初のメッセージはそのまま残りますが、スクリプトが有効のためnoscriptメッセージは表示されません。開発者ツールのコンソールでデモエラーを確認できます。 - ブラウザの設定または開発者ツールを使用してこのページのJavaScriptを無効にし、再読み込みして
noscriptメッセージを表示します。単にscript要素を削除するのは別のテストです。 - 演習の後、元のJavaScript設定を復元し、アドレスからクエリ文字列を削除してページを再読み込みします。
環境がファイルアドレスでのクエリ文字列を制限している場合は、比較のためにローカルウェブサーバーを通じて同じファイルを提供してください。スクリプト無効化のメニューや範囲はブラウザやデベロッパーツールによって異なるため、関連する設定を確認してください。変更は演習ページに一時的に適用し、ブラウザ全体でスクリプトを無効にするのではなく、後で元に戻してください。
bodyに基本コンテンツと案内を残す
例のように、通常の代替文やリンクはbody内に置きます。head内のnoscriptでは許可される内容が限られるため、段落やボタンを入れないでください。noscriptを別の同じ要素内に入れ子にしてはいけません。
JavaScriptがすべての必須の説明や連絡オプションを生成する場合、JavaScriptが実行されないと読者はアクセスを失う可能性があります。可能な限り、初期HTMLにコンテンツを提供し、その後、インタラクションが必要な部分を段階的に強化してください。これにより、フォールバックメッセージだけに依存することを減らせます。noscriptがエラー回復やセキュリティ機能を提供するものと仮定しないでください。MDNのnoscript要素リファレンスには、その表示条件が説明されています。
