status・defaultStatusの使い方｜違いと注意点【JavaScript入門】

この記事は、2026年10月時点のMDN Web Docs「Window.status」「Window.defaultStatus」に基づいています。対象：特定のブラウザやバージョンを指定しない基本的な説明です。ブラウザのバージョンごとの動作差は確認対象に含めていません。

JavaScriptの status や defaultStatus を使って、画面下部のステータスバーに文字を表示したい人もいるでしょう。これらは、かつてブラウザの表示文字を設定するために使われた名前です。現在は表示されるとは限らないため、この記事では2つの歴史的な役割と、ページ内にメッセージを表示する方法を説明します。

結論：表示先によって使い分けます

status と defaultStatus は、ブラウザのステータスバーに表示する文字を設定するために使われた名前です。status はその時点の文字、defaultStatus は通常時の文字を設定する役割でした。ただし、現在のブラウザで設定した文字が表示されるとは限りません。

ここでいう window は、開いているページや、そのページを表示しているウィンドウに関係するものです。window.status のような書き方は、その中の設定項目を指定しています。

status と defaultStatus の違い

次の表は、2つの名前が従来どのような役割を表していたかをまとめたものです。これは歴史的な役割の説明であり、現在のブラウザでステータスバーを変える一般的な方法として紹介するものではありません。

この2つは、ページ内のメッセージ欄を書き換えるものではありません。画面に確実に出したい案内には、後半の代替例を使ってください。

表示先の違いを図にすると、次のようになります。ステータスバーに文字を設定する例と、ページ内の文章を書き換える例を比べています。

設定例と、表示を確かめる方法

この例では、ボタンを押したときに status へ文字を設定します。HTMLファイルを作成してブラウザで開けば、手順に沿って試せます。使用するブラウザやそのバージョンは指定していません。特定のブラウザやバージョンでの表示の違いも、この記事の確認対象には含めていません。

始める前に、文字を入力してファイルを保存できるアプリと、ホームページを開くブラウザを用意してください。次の順に進めます。

1. 下のコードをすべてコピーし、文字を入力できるアプリに貼り付けます。
2. ファイル名を status-example.html にして保存します。
3. 保存したファイルをブラウザで開きます。
4. 表示された「ステータスを設定」ボタンを押します。
5. ステータスバーの表示を確認します。文字が見えない場合もあります。

<!doctype html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>statusの例</title>
</head>
<body>
  <button id="statusButton" type="button">ステータスを設定</button>

  <script>
    const button = document.getElementById("statusButton");

    button.addEventListener("click", function () {
      window.status = "ボタンが押されました";
    });
  </script>
</body>
</html>

コードでは、document.getElementById が指定した名前の部品を探し、addEventListener がクリックされたときの処理を登録します。const は見つけたボタンを扱う名前を用意し、function の中にはクリック後に行う処理を書いています。

document はページの内容を扱うためのものです。ページの部品をJavaScriptから見つけたり書き換えたりできる仕組みをDOMといいます。また、クリックなどの操作や変化をイベントといい、addEventListener は指定した操作などが起きたときに処理を行うための命令です。

実行結果：ボタンを押すと、コードは window.status に「ボタンが押されました」を設定します。ただし、その文字がステータスバーに表示されるとは限りません。この例にはページ内の通知欄がないため、画面に変化が見えない場合があります。

画面内にメッセージを表示する代替例

利用者に伝えたいメッセージは、ページ内の文章を書き換えて表示できます。次の例では、ボタンを押すとページ内の文章が変わります。

このコードの textContent は、指定した部品の中に表示する文字を設定します。すでに表示されている文字がある場合は、新しい文字に置き換わります。

<!doctype html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>ページ内に通知を表示する例</title>
</head>
<body>
  <button id="messageButton" type="button">メッセージを表示</button>
  <p id="message">ここに結果が表示されます。</p>

  <script>
    const button = document.getElementById("messageButton");
    const message = document.getElementById("message");

    button.addEventListener("click", function () {
      message.textContent = "ボタンが押されました。";
    });
  </script>
</body>
</html>

実行結果：ボタンを押すと、「ここに結果が表示されます。」が「ボタンが押されました。」に変わります。ブラウザのステータスバーではなく、ページ内に結果が表示されます。

画面内に通知を出す別の方法は、【JavaScript入門】alertを使わずに通知を表示する方法｜モーダル・トースト・カスタムダイアログを初心者向けに解説でも紹介しています。

ブラウザで動かないときの確認ポイント

MDN Web Docsの Window.status と Window.defaultStatus の説明では、これらは標準化されていない機能として扱われています。設定した文字が画面に表示されない場合は、ページ内にメッセージを表示する代替例と、ステータスバーの表示を分けて考えてください。

MDN Web Docsの説明だけでは、ブラウザごとの制限理由や、バージョンごとの動作の違いを一律に説明できません。特定のブラウザやバージョンでの動作を調べる場合は、そのブラウザとバージョンを確かめたうえで、対応する公式資料を参照してください。この記事では、バージョンごとの比較は扱っていません。

まず、ステータスバーの表示とページ内表示を分けて確認しましょう。ページ内の代替例で文章が変わるかを確かめると、ボタン操作とページ内表示の流れを確認できます。

• コードをHTMLファイルとして保存し、ブラウザで開いているか確認する。
• ボタンを押しているか確認する。コードを置いただけでは、クリック時の処理は実行されません。
• ページ内の代替例で、文章が「ボタンが押されました。」に変わるか確認する。
• ページ内の文章は変わるのにステータスバーだけが変わらない場合は、設定した文字が表示されない環境の可能性があります。

公式情報で確認できること

ブラウザごとの細かな動作を調べるときは、対象のブラウザ名とバージョンを記録し、各ブラウザの公式資料を確認してください。MDN Web Docsでは、次のページで Window.status と Window.defaultStatus の説明を確認できます。この記事では、個別のブラウザやバージョンごとの差を確認した結果は示していません。

• MDN Web Docs：Window.status
• MDN Web Docs：Window.defaultStatus

資料に書かれた機能の説明と、特定のブラウザ版での画面表示は分けて考えましょう。この記事では特定のブラウザ版ごとの対応表は示していません。