書式設定された JSON を表示する

  • [アーティクル]

JSON ビューアーを使用して、ブラウザー タブで JSON 応答とファイルを自動的に書式設定および構文強調表示します。

JSON ビューアーは、読みやすくするために返された JSON データを変更します。 WEB サーバーが、JSON としてエンコードされたデータを返すことによって HTTP 要求に応答する場合があります。 JSON データは、単一の長い連結されたテキスト行として書式設定されている場合、読み取りが困難になる場合があります。 これは、ディスクから JSON ファイルを開くときにも発生する可能性があります。

JSON ビューアーでは、いくつかの方法で JSON データの読みやすさが向上します。

  • JSON 構文は異なる色で強調表示されています。
  • オブジェクトのプロパティは、独自の行に表示され、インデントされます。
  • オブジェクトは折りたたんだり展開したりできます。
  • JSON ビューアーは、オペレーティング システムのダーク テーマまたはライト テーマと一致します。

サポートされるシナリオ

JSON ビューアーは、JavaScript メソッドを使用window.openして開かれたウィンドウではサポートされていません。 で window.open開かれたウィンドウでは、JSON データは、書式設定や構文の強調表示を行わずに、1 行のテキストとして表示されます。

再フォーマットされた JSON サーバーの応答を表示する

Web サーバーからの JSON 応答を再フォーマットされた JSON として表示するには:

  1. Microsoft Edge で新しいタブまたはウィンドウを開きます。

  2. アドレス バーに JSON データを返す URL を入力します。 たとえば、次のサンプル JSON 応答を使用します。 https://microsoftedge.github.io/Demos/json-dummy-data/256KB-min.json

    JSON 応答のその他のサンプルについては、「 MicrosoftEdge/Demos > json-dummy-data」を参照してください。

  3. Microsoft Edge は、返されたデータが JSON であることを検出し、自動的に書式設定します。

    JSON ビューアーによって書式設定され、構文が強調表示された Web サーバーによって返される JSON データ

再フォーマットされた JSON ファイルを表示する

デバイスに保存されている JSON ファイルを再フォーマットされた JSON として表示するには:

  1. Microsoft Edge で新しいタブまたはウィンドウを開きます。

  2. Windows および Linux の 場合は Ctrl + O キー、macOS の場合 は Command + O キーを押し、JSON ファイルを選択します。

  3. Microsoft Edge は、ファイルに JSON データが含まれていることを検出し、自動的に書式設定します。

    JSON ビューアーによって書式設定され、構文が強調表示されたローカル ファイルに格納された JSON データ

無効な JSON データを検出する

JSON データが無効な場合があります。 たとえば、JSON では次のパターンが無効です。

  • キー名を囲む二重引用符を省略します。
  • 最後のキーと値のペアの後に末尾のコンマを指定します。

JSON ビューアーは、構文の強調表示を無効な JSON に適用します。 ただし、 JSON ビューアー ではコンテンツの書式設定は行われず、オブジェクトを折りたたんだり展開したりすることはできません。

無効な構文に関する情報は、JSON ビューアーでエラーが報告されるコンソール ツールで確認できます。

無効な JSON データを表示するには:

  1. Microsoft Edge で新しいタブまたはウィンドウを開きます。

  2. アドレス バーで、無効な JSON データを返す URL に移動します。 たとえば、このサンプルの無効な JSON 応答を使用します。 https://microsoftedge.github.io/Demos/json-dummy-data/missing-colon.json

    JSON 応答の他の無効なサンプルは、 MicrosoftEdge/ Demos > json-dummy-data にあります。

  3. Microsoft Edge は、ファイルに無効な JSON データが含まれていることを検出し、JSON リストを色付けしますが、JSON リストをラップしたり、再フォーマットしたりしません。 JSON がラップされていないという事実は、形式が正しくない JSON があることを示しています。

  4. Ctrl + Shift + J (Windows、Linux) または Command + Option + J (macOS) を押してコンソール ツールを開きます。

    JavaScript エラーは、JSON 構文エラーが存在する場所を示します。

    コンソール ツールに構文エラーが表示され、書式設定されていないで強調表示された無効な JSON

  5. Microsoft Visual Studio Code などのコード エディターで、指定された列番号に移動して JSON を検査します。

    VS Code での列番号による形式の正しくない JSON の表示

JSON データをSearchする

JSON データ内のテキストを検索するには、次のように JSON ビューアーの 検索 機能を使用します。

  1. JSON ビューアーで JSON 応答またはファイルを表示します。

  2. 書式設定された JSON データ内の任意の場所をクリックして、JSON データにフォーカスを配置します。

  3. Ctrl + F (Windows、Linux) または Command + F (macOS) を押します。 検索ツール バーが JSON ビューアーの上部に表示されます。

    JSON ビューアーの検索ツール バー

  4. [ 検索 ] テキスト ボックスで、検索するテキストの入力を開始します。 入力すると、 JSON ビューアー によって、JSON データ内のテキスト文字列のすべての出現箇所が強調表示されます。

検索を停止するには、JSON ビューアーのツール バーの [キャンセル] ボタンをクリックします。

検索結果を移動する

次または前の検索結果に移動するには、結果が見つかったら、検索ツール バーの [次へ ] ボタンまたは [前へ ] ボタンをクリックします。 現在選択されている検索結果は、別の色で強調表示されています。

JSON ビューアーの検索ツール バーの [次へ] ボタンと [前へ] ボタン

検索ツール バーには、[大文字と小文字の区別]、[Regexp]、[By Word] チェック ボックスが表示され、検索の種類を変更できます。

検索の実行方法を変更する [大文字と小文字の区別]、[Regexp]、[by Word] チェック ボックス

既定では、検索では大文字と小文字が区別されません。 たとえば、検索ではhello、大文字と小文字が区別された文字を含む、または任意のhello文字列と一致HelloHELLOhelloします。

検索の大文字と小文字を区別するには、検索ツール バーの [ 大文字と小文字を区別 する] チェック ボックスをオンにします。

正規表現によるSearch

既定では、検索文字列はリテラル文字列として扱われます。

正規表現を使用して検索するには、検索ツール バーの [ Regexp ] チェック ボックスをオンにします。

単語全体によるSearchのみ

既定では、検索は、スペースで囲まれた分離された単語全体だけを見つけることに限定されません。 たとえば、 のhello検索は、または文字のシーケンスを含む任意の文字列とworld-hello一致hellohello-worldしますhello。

スペースで囲まれた文字列のみに一致するように検索を制限するには、検索ツール バーの [by Word] チェック ボックスをオンにします。