readystateとは？初心者向け解説と使い方の基本共起語・同意語・対義語も併せて解説！

この記事を書いた人

高岡智則

年齢：33歳性別：男性職業：Webディレクター（兼ライティング・SNS運用担当）居住地：東京都杉並区・永福町の1LDKマンション出身地：神奈川県川崎市身長：176cm 体系：細身〜普通（最近ちょっとお腹が気になる）血液型：A型誕生日：1992年11月20日最終学歴：明治大学・情報コミュニケーション学部卒通勤：京王井の頭線で渋谷まで（通勤20分）家族構成：一人暮らし、実家には両親と2歳下の妹恋愛事情：独身。彼女は2年いない（本人は「忙しいだけ」と言い張る）

readystateとは何か

readystate は web 開発で使われる用語で、読み込みの進行状況を表す目安です。主に二つの意味があり、ひとつは document.readyState、もうひとつは XMLHttpRequest readyState です。いずれも「今まさにどうなっているか」を知るための指標ですが、用途が少し異なります。

この記事では初心者の方にも分かりやすいように、まず document.readyState の基本、次に XMLHttpRequest readyState の意味と使い方、最後に実務での扱い方のコツを順を追って説明します。

document.readyState の状態と意味

ブラウザがページを読み込む過程での状態を 3つの段階で表します。loading は「まだページの読み込み中」です。全てが表示される前の途中状態です。
interactive は「ユーザーが操作できる準備が整いつつある状態」です。ここでボタンをクリックしても反応がある程度安定します。
complete は「読み込みが完了し、すべて表示され操作可能な状態」です。

XMLHttpRequest readyState の値 0 〜 4

AJAX のようなネットワーク通信では、readyState は 0 から 4 の5つの状態で管理されます。現在の通信状況を把握するのに便利です。

<th>状態番号

状態名	説明
0	UNSENT	まだ接続が初期化されていない状態
1	OPENED	サーバーへの接続が開かれた状態
2	HEADERS_RECEIVED	サーバーからのヘッダ情報が受信済み
3	LOADING	レスポンスの本体が受信中
4	DONE	レスポンスの受信が完了し処理可能

実務での使い方のコツ

実務では イベントリスナー を使って読み込みの変化を検知します。特に document.readyState を確認してから DOM 操作を行うと、エラーを減らせます。
また XMLHttpRequest を使う場合は readystatechange イベントを監視して readyState が 4 DONE になったら処理を開始します。
この考え方は現代の Fetch API でも概念的には同じで、完了を待つ設計のヒントになります。

よくある間違いと注意点

注意したいのは、readystatechange は非同期のイベントです。読み込み中でも DOM の状態は変わることがあるため、適切な時点で処理を開始する必要があります。
またブラウザによって微妙な挙動の違いがある場合があるので、テストを重ねることが大切です。

まとめ

readystate は読み込みの現在位置を知るためのヒントです。document.readyState はページ全体の読み込み状態、XMLHttpRequest readyState はネットワーク通信の進行状況を示します。初心者のうちは「今どうなっているのか」を気にしすぎず、イベントが発生した時に適切な処理を呼び出すことを目標にすると学習が進みます。

readystateの関連サジェスト解説

document.readystate とは: document.readystate とは、ウェブページを管理している JavaScript の世界で使われる“読み込み状態”を表す性質です。正確には document.readyState が正式名称ですが、検索や説明で document.readystate とはと書かれることも多いので、混乱しないようにしておくと良いです。状態には大きく三つあり、loading はページの読み込みがまだ続いている段階、interactive は DOM（文書の構造）が読み込まれ、スクリプトが操作できる状態、complete はページのすべての要素とリソースが読み込まれた状態を意味します。これらの状態を知っておくと、サイトを開いたときに「今、何が準備できているか」を判断できます。実際には、DOM が利用可能になるタイミングを知るために DOMContentLoaded イベントを使い、すべてのリソースが揃うタイミングには window.onload を使うのが基本です。使い分けのポイントは、どのタイミングで処理を始めたいかという点です。例として、DOM が準備できたら初期化するコードを挙げます。

readystateの同意語

未送信: リクエストをまだ送信していない初期の状態。これから接続が作成され、データの送信が始まる前の段階を指します。
オープン済み: リクエストが開始され、サーバーとの接続が成立した状態。これからデータの送受信が進む段階です。
ヘッダー受信済み: サーバーからレスポンスのヘッダーを受け取った時点の状態。まだ本体は受信中または未着の段階です。
ロード中: レスポンスの本体を受信中の状態。データのダウンロードが進行していることを意味します。
読み込み中: データを読み込んでいる最中の状態。画面表示にデータが反映される前の段階です。
待機中: サーバーからの応答を待っている状態。処理が一時的に保留されています。
進行中: 処理が進行中で、まだ完了していない状態です。
データ受信中: サーバーからデータを受け取り続けている状態。
完了: 全てのデータ受信・処理が完了した状態。次の処理へ移行します。
初期状態: 処理が始まる前の、まだ準備が整っていない状態。
準備完了: 処理を開始できる準備が整い、次のステップへ進める状態。
初期化済み: 初期化処理が完了し、リクエストを送信できる準備が整った状態。

readystateの対義語・反対語

未準備: まだ準備が整っておらず、読み取りを開始できない状態。
待機中: 次の処理を待っている状態。まだアクティブに読み取りを始めていない。
ローディング中: データを読み込んでいる最中。まだ結果が揃っていない状態。
処理中: 読み取りに関する処理が現在進行中。完了するまで待機している状態。
未開始: 読み取りの開始がまだ行われていない状態。これから開始される予定。
未接続: 接続が確立されていない状態。ネットワークやデータソースとの通信待ち。
ヘッダー未受信: サーバーからのヘッダー情報をまだ受信していない状態。
エラー: 通信エラーやその他の障害が発生し、読み取りを継続できない状態。
未完了: 処理が途中で終わっておらず、完了していない状態。
無応答: システムが応答しておらず、読み取りを進められない状態。
タイムアウト: 待機時間が長く、応答がなく読み取りが停止している状態。

readystateの共起語

XMLHttpRequest: ブラウザがサーバーと非同期に通信するためのオブジェクト。JavaScriptからサーバーへリクエストを送る窓口となる。
readyState: XMLHttpRequestの現在の状態を示す数値。0〜4の値で状態が変化する。
UNSENT: 0: 未送信。リクエストがまだ作成されていない状態。
OPENED: 1: リクエストが作成され、サーバーへの送信準備が整った状態。
HEADERS_RECEIVED: 2: サーバーからレスポンスのヘッダを受信した状態。
LOADING: 3: レスポンス本文のデータが受信され始め、受信中の状態。
DONE: 4: レスポンス本文の受信が完了した状態。
onreadystatechange: readyStateの値が変化するたびに呼ばれるイベントハンドラの名前。
AJAX: Asynchronous JavaScript and XMLの略。JavaScriptで非同期にサーバーと通信する技術の総称。
XHR: XMLHttpRequestの略。非同期通信を行うAPIの名称。
fetch: XHRとは別の、Promiseベースで非同期通信を行う現代的なAPI。
status: HTTPレスポンスのステータスコード。例: 200, 404 など。
statusText: HTTPレスポンスのステータスメッセージ。例: 'OK', 'Not Found'。
responseText: サーバーから返ってきたテキスト形式のレスポンス本文。
responseXML: サーバーから返ってきたXMLをXMLドキュメントとして扱える場合の本文。
headers: レスポンスヘッダの集合。getAllResponseHeadersやgetResponseHeaderで取得できる。
open: XMLHttpRequestのopenメソッド。リクエストの初期設定を行い、送信準備を整える。
send: XMLHttpRequestのsendメソッド。サーバーへ実際のデータを送信する。
withCredentials: クロスオリジンリクエスト時に認証情報（クッキー・認証ヘッダ）を送信するかを制御する設定。

readystateの関連用語

readyState: XMLHttpRequest の現在の状態を表す値で、0〜4 のいずれか。状態が変わると readystatechange イベントが発生します。
UNSENT: 0。まだサーバーへ接続を開始していない状態。
OPENED: 注意: 重複するキー名を避けるため、上記に同名のキーがある場合は実務上は1つのOPENEDだけを使用します。
HEADERS_RECEIVED: 2。サーバーからレスポンスのヘッダを受信した状態。
LOADING: 3。レスポンスの本文を受信中。データがまだ完全には揃っていません。
DONE: 4。レスポンスの受信と処理が完了した状態。
readystatechange: readyState が変わったときに発火するイベント。イベントハンドラで進行を知ることができます。
onreadystatechange: readyState の変化を検知するためのイベントリスナーを設定するプロパティ。
XMLHttpRequest: ブラウザとサーバーの間で非同期通信を行う古典的な JavaScript API。
fetch: XMLHttpRequest の代替として使われる新しい API。Promise を返し、readyState は直接扱いません。
responseText: サーバーから返ってきたレスポンスを文字列として取得するプロパティ。
responseXML: サーバーから返ってきたレスポンスを XML として取得するプロパティ。
getAllResponseHeaders: サーバーから返された全ヘッダをテキストで取得するメソッド。複数のヘッダを文字列として返します。
getResponseHeader: 特定のヘッダの値を取得するメソッド。ヘッダ名を引数として渡します。
status: HTTP ステータスコード。例: 200 は成功、404 は未検出、500 はサーバーエラー。
statusText: HTTP ステータスコードに対応する説明テキスト。
headers: レスポンスのヘッダ情報を取得する仕組みとして getAllResponseHeaders / getResponseHeader を使います。
open: XMLHttpRequest のリクエストを初期化するメソッド。メソッド、URL、非同期かどうかなどを設定します。
send: XMLHttpRequest のリクエストをサーバーへ送るメソッド。データを送る場合はボディとして渡します。
DOMContentLoaded: HTML の初期読み込みと解析が完了した時に発火するイベント。画像・外部リソースは待ちません。
window.onload: ページの全リソース（画像などを含む）が読み込まれた時に発火するイベント。
CORS: クロスオリジンリクエストを許可・制御する仕組み。別ドメイン間での通信時に重要です。
asynchronous: 非同期。処理が完了を待たずに次の処理へ進む設計。
synchronous: 同期。処理が完了するまで待つ設計。UI が固まることがあるので注意。