JavaScriptなしでサイトをテストする:何を、なぜ行うのか

Mar 27, 2026 · 3 min read

ほとんどのフロントエンド開発者は、JavaScriptが常に利用可能であると想定しています。通常はその通りです。しかし、その想定は静かにあなたの構築方法を形作り、予期しない方法で壊れやすいアプリケーションにつながる可能性があります。

JavaScriptなしでサイトをテストすることは、意図的にスクリプトを無効にする稀なユーザーに対応するためではありません。これは診断ツールです。コアとなるユーザージャーニーがクライアントサイドの実行に完全に依存しているかどうかを明らかにし、その実行が失敗したときに何が起こるかを真剣に考えることを強いるものです。

重要なポイント

JavaScriptは予想以上に頻繁に静かに失敗します — CDNの障害、ブラウザ拡張機能、CSPの設定ミス、ネットワークタイムアウトなど、すべてがスクリプトの実行を妨げる可能性があります。
開発中にJavaScriptを無効にすることは、非セマンティックなナビゲーション、クライアントのみのフォーム、空のHTMLシェルなど、脆弱なアーキテクチャ上の決定を露呈する迅速な監査です。
プログレッシブエンハンスメントとは、堅固なHTMLの基盤を最初に構築し、その上にJavaScriptを重ねることを意味します — 2つの別々の体験を維持することではありません。
Next.js、Remix、Astroなどの最新フレームワークは、クライアントサイドのコードが実行される前に機能的なHTMLを提供するサーバーレンダリングをサポートしています。

JavaScriptが予想以上に頻繁に失敗する理由

JavaScriptが静かに失敗することは、ほとんどの開発者が認識しているよりも一般的です。低速なモバイルネットワークではスクリプトがタイムアウトします。uBlock OriginやNoScriptなどのブラウザ拡張機能は、サードパーティのスクリプトをブロックします — 時にはあなたのスクリプトも一緒にです。CDNの障害、Content Security Policyの設定ミス、type="module"の不一致、ランタイムエラーなど、すべてがアプリケーションの正しい初期化を妨げる可能性があります。

JavaScriptがナビゲーションの提供、コンテンツのレンダリング、フォームの送信を行う唯一のメカニズムである場合、これらの失敗のいずれかが空白の画面または壊れたインターフェースを生成します。ユーザーはエラーメッセージを受け取りません。ただ離脱するだけです。

JavaScriptなしでのテストが実際に明らかにすること

開発中にJavaScriptを無効にすることは、HTMLファーストの基盤を迅速かつ正直に監査する方法です。一般的に見つかるものは以下の通りです:

非セマンティック要素から構築されたナビゲーション。 クリックハンドラーに接続された<div>や<span>は完全に機能しなくなります。適切な<a href="/page">は依然として機能します。
クライアントサイドでのみ検証されるフォーム。 フォームが完全にJavaScript検証に依存し、サーバーエンドポイントを指すaction属性がない場合、スクリプトなしでは何もしません。
ハイドレーション後にのみ存在するコンテンツ。 多くのReactやVue SPAでは、サーバーはほぼ空のHTMLシェルを送信します。JavaScriptがなければ、ユーザーは何も見えません。
純粋にスクリプトで実装されたUIコントロール。 セマンティックHTMLやネイティブブラウザの動作なしで構築されたアコーディオン、モーダル、タブパネルは完全に壊れます。

これらはエッジケースではありません。時間とともに複合するアーキテクチャ上の決定です。

JavaScriptなしでサイトをテストする方法

最も迅速な方法はChrome DevToolsを使用することです:

DevToolsを開き、Cmd+Shift+P(Mac)またはCtrl+Shift+P(Windows)を押します。
Disable JavaScriptと入力してEnterを押します。
ページをリロードします。

または、DevTools設定(歯車アイコン)を開き、Debuggerに移動してDisable JavaScriptにチェックを入れます — これはリロード間で持続します。

プログレッシブエンハンスメントで堅牢なフロントエンドアプリケーションを構築する

目標は2つの別々の体験を構築することではありません。堅固なHTMLの基盤を持つ1つの体験を構築し、その上にJavaScriptを重ねることです。

最新のフレームワークはこれをますますサポートしています。Next.js、Remix、Astroはすべて、クライアントサイドのコードが実行される前に実際のHTMLを提供するサーバーレンダリングを提供します。actionとmethod属性を持つHTMLフォームは、ハイドレーションが完了する前に正しく送信されます。ネイティブブラウザ機能 — アコーディオン用の<details>、モーダル用の<dialog>、タブのようなパターン用のCSS :target — は、かつて完全にJavaScriptを必要としていたインタラクションを処理します。

パターンは次のようになります:機能するセマンティックHTMLから始めます。次に、改善としてJavaScriptを追加します。

<!-- JSなしで動作:実際のリンク、キーボードアクセス可能 -->
<a href="/dashboard" id="nav-dashboard">Dashboard</a>

<script>
  // 拡張:JSが利用可能な場合のみインターセプト
  document.getElementById('nav-dashboard')
    ?.addEventListener('click', (e) => {
      e.preventDefault();
      router.push('/dashboard');
    });
</script>

<!-- サーバーがエンドポイントを処理する場合、フォームはJSなしで動作 -->
<form action="/contact" method="post">
  <label for="message">メッセージ</label>
  <textarea id="message" name="message" required></textarea>
  <button type="submit">送信</button>
</form>

ここでサーバーサイド検証は譲れません。クライアントサイド検証のみに依存しないでください。

結論

JavaScriptなしでのテストは、それを無効にするユーザーをサポートすることではありません。自分自身のアーキテクチャを理解することです。JavaScriptを無効にするとサイト全体が壊れる場合、あなたは脆弱なものを構築しています — そして脆弱なものは、最悪のタイミングで本番環境で失敗します。

Web開発へのHTMLファーストアプローチは、アプリケーションをより堅牢で、よりアクセシブルで、保守しやすくします。JavaScriptは機能する体験を改善すべきであり、それが存在する唯一の理由であってはなりません。

よくある質問

Chrome DevToolsを通じてJavaScriptを無効にすると、ページレベルのスクリプト実行のみが停止します。すでに登録されているService Workerは、キャッシュされたレスポンスを提供し続ける可能性があり、ブラウザ拡張機能は独自のコンテキストで動作します。クリーンなテストのためには、DevToolsのJavaScriptトグルと共に、拡張機能を無効にしたシークレットウィンドウを使用してください。

はい、ただしアプローチは複雑さによって異なります。RemixやNext.jsのようなフレームワークは、ルートをサーバーレンダリングし、クライアント上でハイドレートすることで重労働を処理します。JavaScriptなしですべてのインタラクティブ機能を複製できないかもしれませんが、ナビゲーション、コンテンツ表示、フォーム送信などのコアフローは、HTMLのみで機能させることができます。

いいえ。JavaScriptを無効にすると、欠落したリンクや壊れたフォームなどの構造的なHTML問題が明らかになりますが、スクリーンリーダーの動作、フォーカス管理、色のコントラスト、ARIA属性の使用はテストされません。axeやLighthouseなどのツールを使用した専用のアクセシビリティ監査と並行して、テストの1つの層として扱ってください。

新しいページ、ルート、または重要なユーザーフローを追加するたびに、JavaScriptなしのチェックを実行してください。DevToolsで数秒で済み、アーキテクチャの退行を早期に捉えます。テスト構成でJavaScriptを無効にできるPlaywrightなどのツールを使用して、コードレビューチェックリストやCIパイプラインに統合すると、プロセスが一貫したものになります。

Understand every bug

Uncover frustrations, understand bugs and fix slowdowns like never before with OpenReplay — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data. Check our GitHub repo and join the thousands of developers in our community.