JavaScript を使用して JSON を読み取り可能な形式で表示する方法

JavaScript を使用して JSON を読み取り可能な形式で表示する方法
Mia Chevalier
2024年7月2日火曜日 19:55:53
JavaScript

JavaScript による JSON の可読性の向上

JSON (JavaScript Object Notation) は、サーバーと Web アプリケーションの間で情報を送信するために使用される一般的なデータ形式です。 JSON は機械にとっては効率的に解析できますが、適切な形式が設定されていないと、人間にとって JSON を読み取るのは困難になる可能性があります。インデント、空白、さらには色やフォントなどの文体要素によっても、読みやすさに大きな違いが生じる可能性があります。

この記事では、JavaScript を使用して JSON をきれいに印刷するためのさまざまなテクニックを検討します。 API 応答をデバッグしている開発者であっても、単にデータをより明確に表示する必要があるだけであっても、これらのメソッドは人間に優しい JSON 表示を実現するのに役立ちます。

指示 説明
JSON.stringify(json, undefined, 4) JavaScript オブジェクトを、読みやすいように 4 スペースのインデントを含む JSON 文字列に変換します。
json.replace(/&/g, '<').replace(//g, '>') JSON 文字列内の特殊文字を置き換えて、HTML インジェクションを防ぎます。
return '<span class="' + cls + '">' + match + '</span>' 一致した JSON 要素を Span タグでラップし、構文を強調表示するために特定のクラスを使用します。
document.body.innerHTML = '<pre>' + syntaxHighlight(json) + '</pre>' ドキュメント本文の内部 HTML を設定して、きれいに印刷された JSON を表示します。
const http = require('http') Web サーバーを作成するための HTTP モジュールを Node.js スクリプトに含めます。
http.createServer((req, res) =>http.createServer((req, res) => { ... }).listen(3000) 受信リクエストをポート 3000 でリッスンする HTTP サーバーを作成します。
res.writeHead(200, {'Content-Type': 'application/json'}) コンテンツ タイプが JSON であることを示す応答 HTTP ヘッダーを設定します。
res.end(JSON.stringify(jsonData, null, 4)) きれいに印刷された JSON データを応答としてクライアントに送信します。

Pretty-Print JSON スクリプトの仕組み

最初のスクリプトでは、JavaScript を使用して JSON をフォーマットし、より読みやすい方法で表示します。関数 syntaxHighlight JSON オブジェクトを入力として受け取り、それを次の文字列に変換します。 JSON.stringify、4 スペースのインデントを適用します。次に、この関数は特殊文字を置き換えて、HTML インジェクションを防止します。 json.replace。また、正規表現を使用して文字列、数値、ブール値、null 値などのさまざまな JSON 要素を照合し、一致した各要素をラップします。 <span> タグと構文強調表示用の適切なクラス。最後に、私たちが使用するのは、 document.body.innerHTML フォーマットされた JSON を Web ページに挿入します。

2 番目のスクリプトは、Node.js を使用したサーバー側の JSON 形式を示します。ここでは、以下を要求することから始めます。 http HTTP サーバーを作成するモジュール。サンプルの JSON オブジェクトを定義し、ポート 3000 でリッスンするようにサーバーを設定します。リクエストを受信すると、サーバーは JSON 文字列で応答します。を使用しております res.writeHead コンテンツ タイプが JSON であることを示す応答ヘッダーを設定します。次に、JSON オブジェクトは、次を使用してきれいに印刷された文字列に変換されます。 JSON.stringify 4 スペースのインデントを使用してクライアントに送り返されます。 res.end。このアプローチにより、Web ページに表示される場合でも、サーバーから受信された場合でも、JSON データが簡単に読み取れるようになります。

JavaScript での読みやすさを向上させるための JSON のフォーマット

インデントと構文強調表示を使用して JSON をきれいに印刷する JavaScript フロントエンド スクリプト

// Function to pretty-print JSON with colors and indentation
function syntaxHighlight(json) {
    json = JSON.stringify(json, undefined, 4);
    json = json.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>');
    return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?)|(\b(true|false|null)\b)|(\b-?\d+(\.\d*)?([eE][+-]?\d+)?\b)/g, function (match) {
        var cls = 'number';
        if (/^"/.test(match)) {
            if (/:$/.test(match)) {
                cls = 'key';
            } else {
                cls = 'string';
            }
        } else if (/true|false/.test(match)) {
            cls = 'boolean';
        } else if (/null/.test(match)) {
            cls = 'null';
        }
        return '<span class="' + cls + '">' + match + '</span>';
    });
}
// Example usage
var json = { "name": "John", "age": 30, "city": "New York" };
document.body.innerHTML = '<pre>' + syntaxHighlight(json) + '</pre>';

Node.js を使用したサーバー側の JSON フォーマット

インデントを使用して JSON を整形表示する Node.js バックエンド スクリプト

// Required module
const http = require('http');
// Sample JSON data
const jsonData = { "name": "Alice", "age": 25, "city": "Wonderland" };
// Server setup
http.createServer((req, res) => {
    res.writeHead(200, {'Content-Type': 'application/json'});
    // Pretty-print JSON with 4-space indentation
    res.end(JSON.stringify(jsonData, null, 4));
}).listen(3000, () => {
    console.log('Server running at http://localhost:3000/');
});

JavaScript で JSON をきれいに印刷するための高度なテクニック

基本的なインデントと構文の強調表示は JSON データを読みやすくするために不可欠ですが、高度な技術を使用するとプレゼンテーションをさらに強化できます。そのような手法の 1 つは、Highlight.js や Prism.js などのサードパーティ ライブラリを使用することです。これらのライブラリは広範な構文強調表示機能を提供し、開発者がさまざまなコード形式に一貫性のある魅力的なスタイルを適用できるようにします。これらのライブラリを統合すると、JSON をフォーマットできるだけでなく、色やスタイルが全体的なデザイン言語と一致していることを確認できます。さらに、これらのライブラリは、アプリケーションや Web サイトの特定の美的ニーズに合わせたカスタマイズ オプションを提供します。

もう 1 つの高度な方法には、インタラクティブな JSON ビューアの作成が含まれます。これらのビューアを使用すると、ユーザーは JSON データのセクションを折りたたんだり展開したりできるため、大規模なデータセット間の移動が容易になります。 JSONEditor や Ace Editor などのライブラリは、この目的に最適です。これらは、ツリー ビュー、コード ビュー、さらには JSON スキーマ検証をサポートするテキスト エディターなどの機能を提供します。インタラクティブなビューアを実装すると、特に複雑な JSON 構造やネストされた JSON 構造を扱う場合に、ユーザー エクスペリエンスを大幅に向上させることができます。

JSON のプリティプリントに関するよくある質問

  1. JSON のきれいな印刷とは何ですか?
  2. JSON の整形印刷とは、人間が読みやすいように、インデントと空白を使用して JSON データをフォーマットすることを指します。
  3. きれいに印刷される JSON が重要なのはなぜですか?
  4. JSON をきれいに印刷することは、可読性を高め、開発者がデータ構造をより効率的にデバッグして理解するのに役立つため、重要です。
  5. JavaScript で JSON をきれいに印刷するにはどうすればよいですか?
  6. 使用できます JSON.stringify JavaScript で JSON データをフォーマットするためのインデント パラメーターを含むメソッド。
  7. 高度な JSON フォーマット用のライブラリにはどのようなものがありますか?
  8. Highlight.js、Prism.js、JSONEditor、および Ace Editor は、高度な JSON フォーマットと表示用の人気のあるライブラリです。
  9. きれいに印刷された JSON にカスタム スタイルを適用できますか?
  10. はい、Highlight.js やカスタム CSS などのライブラリを使用すると、JSON データのさまざまな部分に特定の色やスタイルを適用できます。
  11. インタラクティブな JSON ビューアを作成することはできますか?
  12. はい、JSONEditor や Ace Editor などのライブラリを使用してインタラクティブな JSON ビューアを作成でき、ユーザーは JSON データのセクションを折りたたんだり展開したりできます。
  13. の目的は何ですか json.replace スクリプト内のメソッド?
  14. の json.replace メソッドは、HTML インジェクションを防ぐために JSON 文字列内の特殊文字をエスケープするために使用されます。
  15. 大規模な JSON データセットをどのように処理しますか?
  16. 大規模な JSON データセットの場合、インタラクティブなビューアとツリー構造は、ユーザーがデータをより効果的にナビゲートして理解するのに役立ちます。
  17. JSON をきれいに印刷するためにサーバー側スクリプトを使用できますか?
  18. はい、Node.js などのサーバー側スクリプト言語を使用して、整形された JSON データをフォーマットして提供できます。

JSON フォーマット手法に関する最終的な考え

JSON をきれいに印刷することは、特にデバッグ中や開発中に、データの読みやすさと使いやすさを向上させるために非常に重要です。 JavaScript とさまざまなライブラリを使用すると、適切なインデント、空白、さらには色を使用して JSON を簡単にフォーマットできます。インタラクティブ ビューアなどの高度な技術を実装すると、ユーザー エクスペリエンスがさらに向上し、複雑な JSON 構造の移動と理解が容易になります。結局のところ、これらの方法とツールは、JSON データを扱う開発者にとって非常に貴重です。