JavaScriptでブラウザのオンライン・オフライン状態を検出する方法
Webアプリケーションを開発していると、ユーザーが現在インターネットに接続しているかどうかを判定したい場面があります。JavaScriptでは、navigator.onLineプロパティを使うことで、ブラウザがオンライン状態かオフライン状態かを簡単に検出できます。
navigator.onLine プロパティとは
navigator.onLineは、ブラウザの接続状態を真偽値（boolean）で返すプロパティです。
- インターネットに接続している場合：
true - オフラインの場合：
false
このプロパティをボタンのクリックイベントなどと組み合わせることで、ユーザーの接続状況に応じた処理を実装できます。
実装例：オンライン・オフライン判定のサンプルコード
以下は、ボタンをクリックすると接続状態をチェックして結果を表示するシンプルなサンプルコードです。
<!DOCTYPE html>
<html>
<body>
<h1>JavaScriptによるオンライン・オフライン判定の例</h1>
<h2>下のボタンをクリックして、現在オンラインかどうかを確認してみましょう</h2>
<button onclick="checkOnlineOffline()">オンライン/オフラインを確認</button>
<h2 class="sample"></h2>
<script>
function checkOnlineOffline() {
if (navigator.onLine === true) {
document.querySelector('.sample').innerHTML = "インターネットに接続されています";
} else {
document.querySelector('.sample').innerHTML = "インターネットに接続されていません";
}
}
</script>
</body>
</html>
コードの解説
- checkOnlineOffline() 関数： ボタンがクリックされると呼び出される関数です。
- navigator.onLine === true： 接続状態がオンライン（true）かどうかを条件分岐で判定します。
- document.querySelector('.sample')： 判定結果のメッセージを、クラス名「sample」を持つ要素に表示しています。
実行結果
上記のコードを実行すると、まず次のような画面が表示されます。
「オンライン/オフラインを確認」ボタンをクリックすると、以下のように接続状態の結果が表示されます。
補足：より正確な接続判定を行うには
navigator.onLineはOSやブラウザのネットワークアダプターの状態を反映するため、Wi-Fiには接続しているものの実際にはインターネットに到達できないケースではtrueを返すことがあります。より確実に通信可能かを確認したい場合は、fetch()などで実際にサーバーへリクエストを送り、応答の有無で判定する方法が推奨されます。
また、接続状態の変化をリアルタイムに検知したい場合は、onlineイベントおよびofflineイベントをwindowオブジェクトに登録することで対応できます。
-
JavaScriptでボタンがクリックされたかどうかを判定する方法
JavaScriptを使えば、ボタンがクリックされたかどうかを簡単に判定できます。最も一般的な方法は、addEventListener()メソッドでクリックイベントを監視することです。以下に、ボタンのクリックを検出し、クリックされた回数を画面に表示するサンプルコードを紹介します。 サンプルコード <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8 /> <meta name=viewport content=width=device-width, initial-scale=1
-
JavaScriptで画面解像度を検出する方法を解説！window.screenの使い方
はじめにWebアプリケーションを開発する際、ユーザーの画面解像度（スクリーンサイズ）を検出したいケースは多くあります。例えば、レスポンシブデザインの調整や、表示領域に応じたコンテンツの出し分けなどが挙げられます。JavaScriptでは、window.screenオブジェクトを使うことで、簡単に画面の解像度情報を取得できます。この記事では、その具体的な方法をサンプルコードとともにわかりやすく解説します。window.screenオブジェクトとはwindow.screenは、ユーザーが使用しているディスプレイ（画面）に関する情報を保持しているオブジェクトです。このオブジェクトのプロパティを参照す