JavaScript 無効チェック：初心者でも分かる5つの方法とサンプルコード

2024-04-05

JavaScriptが無効になっているかどうかを検出する方法

document.write()を使用する

これは、最も単純な方法の一つです。document.write()を使用して、JavaScriptが有効かどうかを確認するメッセージをページに出力します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 無効チェック</title>
</head>
<body>
  <script>
    document.write("JavaScriptは有効です。");
  </script>
  <noscript>
    JavaScriptが無効です。
  </noscript>
</body>
</html>

このコードの場合、JavaScriptが有効であれば、ページに「JavaScriptは有効です。」というメッセージが表示されます。JavaScriptが無効であれば、何も表示されません。

window.onloadイベントを使用して、JavaScriptが有効かどうかを確認することもできます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 無効チェック</title>
</head>
<body>
  <script>
    window.onload = function() {
      if (document.getElementById("js-enabled")) {
        document.getElementById("js-enabled").innerHTML = "JavaScriptは有効です。";
      }
    };
  </script>
  <p id="js-enabled"></p>
</body>
</html>

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 無効チェック</title>
</head>
<body>
  <script>
    if (typeof window.addEventListener === "function") {
      document.getElementById("js-enabled").innerHTML = "JavaScriptは有効です。";
    } else {
      document.getElementById("js-enabled").innerHTML = "JavaScriptが無効です。";
    }
  </script>
  <p id="js-enabled"></p>
</body>
</html>

navigator.javaEnabled()プロパティを使用して、Javaが有効かどうかを確認することもできます。ただし、これはJavaScriptが有効かどうかを直接確認するものではありません。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 無効チェック</title>
</head>
<body>
  <script>
    if (navigator.javaEnabled()) {
      document.getElementById("js-enabled").innerHTML = "JavaScriptは有効です。";
    } else {
      document.getElementById("js-enabled").innerHTML = "JavaScriptが無効です。";
    }
  </script>
  <p id="js-enabled"></p>
</body>
</html>

サーバーサイドでチェックする

JavaScriptが有効かどうかをサーバーサイドでチェックすることもできます。これは、ユーザーがJavaScriptを無効にしていても、ページにコンテンツを表示したい場合に役立ちます。

<?php
if (isset($_SERVER['HTTP_USER_AGENT']) && preg_match('/(no|disabled)\s*javascript/i', $_SERVER['HTTP_USER_AGENT'])) {
  echo "JavaScriptが無効です。";
} else {
  echo "JavaScriptは有効です。";
}
?>

このコードの場合、ユーザーエージェント文字列に「no javascript」または「disabled javascript」が含まれている場合は、ページに「JavaScriptが無効です。」というメッセージが表示されます。

どの方法を使うべきかは、状況によって異なります。最も簡単な方法は、document.write()を使用する方法です。ただし、この方法は、JavaScriptが完全に無効になっている



JavaScript 無効チェックサンプルコード

document.write()を使用する

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 無効チェック</title>
</head>
<body>
  <script>
    document.write("JavaScriptは有効です。");
  </script>
  <noscript>
    <p>JavaScriptが無効です。</p>
  </noscript>
</body>
</html>

window.onloadイベントを使用する

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 無効チェック</title>
</head>
<body>
  <script>
    window.onload = function() {
      if (document.getElementById("js-enabled")) {
        document.getElementById("js-enabled").innerHTML = "JavaScriptは有効です。";
      }
    };
  </script>
  <p id="js-enabled"></p>
</body>
</html>

JavaScriptの機能を使用する

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 無効チェック</title>
</head>
<body>
  <script>
    if (typeof window.addEventListener === "function") {
      document.getElementById("js-enabled").innerHTML = "JavaScriptは有効です。";
    } else {
      document.getElementById("js-enabled").innerHTML = "JavaScriptが無効です。";
    }
  </script>
  <p id="js-enabled"></p>
</body>
</html>

navigator.javaEnabled()を使用する

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 無効チェック</title>
</head>
<body>
  <script>
    if (navigator.javaEnabled()) {
      document.getElementById("js-enabled").innerHTML = "JavaScriptは有効です。";
    } else {
      document.getElementById("js-enabled").innerHTML = "JavaScriptが無効です。";
    }
  </script>
  <p id="js-enabled"></p>
</body>
</html>

サーバーサイドでチェックする

<?php
if (isset($_SERVER['HTTP_USER_AGENT']) && preg_match('/(no|disabled)\s*javascript/i', $_SERVER['HTTP_USER_AGENT'])) {
  echo "JavaScriptが無効です。";
} else {
  echo "JavaScriptは有効です。";
}
?>


JavaScript 無効チェックのその他の方法

document.querySelector()を使用する

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 無効チェック</title>
</head>
<body>
  <script>
    if (document.querySelector("noscript")) {
      document.getElementById("js-disabled").innerHTML = "JavaScriptが無効です。";
    } else {
      document.getElementById("js-enabled").innerHTML = "JavaScriptは有効です。";
    }
  </script>
  <p id="js-enabled"></p>
  <noscript>
    <p id="js-disabled"></p>
  </noscript>
</body>
</html>

このコードの場合、noscript要素が存在するかどうかを確認します。存在する場合は、JavaScriptが無効であると判断し、「JavaScriptが無効です。」というメッセージが表示されます。

addEventListenerイベントを使用する

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 無効チェック</title>
</head>
<body>
  <script>
    window.addEventListener("DOMContentLoaded", function() {
      if (document.getElementById("js-enabled")) {
        document.getElementById("js-enabled").innerHTML = "JavaScriptは有効です。";
      }
    });
  </script>
  <p id="js-enabled"></p>
</body>
</html>

このコードの場合、DOMContentLoadedイベントを使用して、ページの読み込みが完了したことを確認します。読み込みが完了したら、js-enabled要素が存在するかどうかを確認します。存在する場合は、JavaScriptが有効であると判断し、「JavaScriptは有効です。」というメッセージが表示されます。

画像の読み込みエラーを使用する

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 無効チェック</title>
</head>
<body>
  <script>
    var img = new Image();
    img.onload = function() {
      document.getElementById("js-enabled").innerHTML = "JavaScriptは有効です。";
    };
    img.onerror = function() {
      document.getElementById("js-disabled").innerHTML = "JavaScriptが無効です。";
    };
    img.src = "data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==";
  </script>
  <p id="js-enabled"></p>
  <p id="js-disabled"></p>
</body>
</html>

try...catchを使用する

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 無効チェック</title>
</head>
<body>
  <script>
    try {
      document.getElementById("js-enabled").innerHTML = "JavaScriptは有効です。";
    } catch (e) {
      document.getElementById("js-disabled").innerHTML = "JavaScriptが無効です。";
    }
  </script>
  <p id="js-enabled"></p>
  <p id="js-disabled"></p>
</body>
</html>

JavaScriptが無効かどうかを確認するには、さまざまな方法があります。どの方法を使うべきかは、状況によって異なります。


javascript html css

表の空白にさようなら！ CSSで空のセルの罫線をスマートに表示する

方法以下のコードをHTMLファイルに追加します。上記のコードでは、table 要素に border-collapse: collapse; プロパティを設定しています。これは、テーブルのセル間の余白をなくすために必要です。次に、td 要素に border: 1px solid black; プロパティを設定しています。これは、すべてのセルの罫線を1pxの黒線で表示します。...

 
css 表の空白にさようなら！ CSSで空のセルの罫線をスマートに表示する

【徹底解説】jQuery を使って HTML 入力ボックスで数値のみを入力する方法

このチュートリアルを始める前に、以下のものが必要です。HTML ファイルjQuery ライブラリHTML ファイルに jQuery ライブラリを追加します。入力ボックスに keypress イベントを追加します。コード解説keypress イベントは、キーが押されたときに発生します。...

 
jquery html validation 【徹底解説】jQuery を使って HTML 入力ボックスで数値のみを入力する方法

【超便利】HTMLフォームでチェックボックスの「未選択」も送信！隠しフィールド、JavaScript、ライブラリ徹底比較

この方法は、未選択のチェックボックスに対応する隠しフィールドを作成し、その値を常に0などに設定しておくことで実現します。チェックボックスが選択されると、この値が上書きされます。上記の場合、checkbox1 が選択されていない場合は、checkbox1 と checkbox1_hidden の両方が送信され、それぞれ "" と "0" の値になります。一方、checkbox1 が選択されている場合は、checkbox1_hidden の値は上書きされずに "0" のまま送信されます。...

 
html forms post 【超便利】HTMLフォームでチェックボックスの「未選択」も送信！隠しフィールド、JavaScript、ライブラリ徹底比較

ReactJSでBase64エンコードを使用して画像を表示する方法

Reactプロジェクトでは、一般的に public フォルダ内に静的なファイルを保存します。画像もその例外ではありません。public フォルダ内のファイルは、ビルド後にそのまま出力ディレクトリにコピーされます。public フォルダ内の画像をReactコンポーネントで参照するには、以下の方法があります。...

 
javascript reactjs ReactJSでBase64エンコードを使用して画像を表示する方法

JavaScript 開発者必見！npx と npm の違いを徹底解説

npm (Node Package Manager) は、Node. js エコシステムのパッケージを管理するためのツールです。主な機能は以下の通りです。パッケージのインストールとアンインストール: npm を使用して、JavaScript ライブラリ、フレームワーク、ツールなど、必要なパッケージをプロジェクトにインストールできます。...

 
javascript reactjs npm JavaScript 開発者必見！npx と npm の違いを徹底解説

SQL SQL SQL SQL Amazon で見る