JSONをHTMLに変換

関連おすすめ

JSON→HTML と HTML テーブルについて

ユースケース

• フロントエンド開発：API から返された JSON データを HTML テーブルにすばやくレンダリングし、管理画面やドキュメントページに埋め込む
• Tailwind / Bootstrap プロジェクト：「table class 名」入力に Tailwind または Bootstrap クラスを直接入力し、既存のスタイルシステムとシームレスに統合
• レスポンシブ Web ページ：デフォルトの横スクロールラップでモバイルテーブルがページレイアウトを崩さない
• データ可視化表示：ブログ / ドキュメント / Confluence / Notion など HTML 埋め込みをサポートするプラットフォームにスタイル付きテーブルを貼り付け
• レポート生成：バックエンドからエクスポートされた JSON データを HTML メールレポートにすばやく変換し、業務担当者に送信
• フロントエンドプロトタイピング：デザインフェーズで実データを使ってテーブルスタイルをプレビューし、納品前にプロダクト / デザインと整合
• CMS システム：WordPress / Drupal などの CMS 向けに静的 HTML テーブルスニペットを作成し、テンプレートエンジンの複雑さを回避
• テストとデバッグ：ブラウザコンソールの JSON.stringify 出力を貼り付けて、複雑なネストデータの 2次元構造をすばやくプレビュー
• メールテンプレート：テーブル HTML を HTML メールにインライン化（Outlook 互換性のテストが必要）
• API ドキュメント作成：Markdown / Swagger / Redoc に HTML テーブルを埋め込み、デフォルトの JSON サンプルを置き換え
• 教育シナリオ：データ構造の授業で、学生から提出されたネスト JSON 課題をテーブルに変換し、一括採点表示
• データクレンジングレポート：データベースからエクスポートされたネスト JSON を平坦化モードでテーブルに変換し、フィールド比較を容易化

使い方

1. 左側のエディタに JSON 配列（推奨）または単一オブジェクトを貼り付けるか、「Sample」をクリックして 3つの商品サンプルをロード、「Upload」をクリックして .json / .txt ファイルをロード
2. ツールバーでネスト処理モードを選択（推奨：「平坦化」）。ネストオブジェクトは `user.name` などのドット区切りキーに自動展開
3. 「Convert」ボタンをクリック（または Enter キーを押す）して変換を実行。入力時には 500ms のデバウンス保護あり
4. 右側の Code タブで構文ハイライト付き HTML テーブルコードを確認、Preview タブで iframe のリアルタイム描画を確認
5. ツールバーでスタイルオプション（ゼブラストライプ / ボーダー / ホバー / コパクト / レスポンシブ）をチェックし、カスタム table class を入力、null プレースホルダーを設定。ライブプレビューが自動更新
6. 満足したら「Copy」をクリックして HTML コードをコピー、または「Download」をクリックして table.html としてダウンロード。リセットする場合は Reset をクリック

特徴

• ネストオブジェクト自動平坦化: `{user:{name,age}}` を `user.name`、`user.age` などのドット記法キーに再帰展開（区切り文字設定可能）、手動の平坦化スクリプト不要
• 3つのネスト処理モード: 平坦化（推奨、6階層まで自動展開）/ トップレベルキー（ネストオブジェクトを単一列に）/ 文字列（ネストオブジェクトをJSON文字列でプレビュー）
• カスタムCSS classフック: `<table>` とオプションの外側 `<div>` に任意の class 文字列を注入し、Tailwind / Bootstrap / Bulma などのスタイルシステムとシームレスに統合
• レスポンシブ横スクロール: デフォルトで外側を `overflow-x:auto` コンテナでラップし、狭幅画面で自動的に横スクロールバーが表示され、ページレイアウトを崩さない
• 6つのスタイルトグル: ゼブラストライプ、ボーダー、行ホバー、ハイライト、コンパクトモード、最初のインデックス列（#）、テーブルキャプション — ツールバーチェックボックスで即時反映
• Code + iframe プレビューの2タブ: Code タブは構文ハイライト付き HTML ソース、Preview タブはサンドボックス iframe で実際のテーブルをリアルタイム描画
• タイプ認識ハイライト: null は灰色イタリック（プレースホルダーテキストカスタマイズ可）、ブール値は緑/赤、数値は青、ネストオブジェクトはホバーで完全 JSON を確認
• 行数制限保護: デフォルト 1000 行上限（1-10000 で調整可）、超過時は自動切り詰めと「切り詰め済み」通知で巨大 DOM レンダリングのブラウザ負荷を防止
• 生成統計フィードバック: 右パネルに「X行×Y列 生成済み」+ 切り詰めバッジをリアルタイム表示し、長大 JSON デバッグ時にデータ規模を一目で把握
• 1クリックコピー / ダウンロード: Code モードで HTML ソースをクリップボードにコピー、または table.html ファイルとしてダウンロードして任意の Web サイトにそのまま利用
• サンプルデータ + ファイルアップロード: 3つの商品サンプル（Laptop / Mouse / Desk Chair）を 1クリックでロード、.json / .txt ファイルのドラッグ&ドロップまたはクリックアップロードも対応
• 1クリックリセット: ツールバー右の Reset ボタンで 14項目の設定を一括デフォルトに戻し、高速な試行錯誤に最適
• ローカル履歴: localStorage ベースで最新 200 件の入力を永続保存、リフレッシュや誤ってタブを閉じても復元可能
• 完全ブラウザローカル処理: すべての JSON 解析、HTML 生成、コピー、ダウンロードはブラウザ内で行われ、データは一切サーバーに送信されません

コード例

// 1) GitHub API を呼び出してユーザーリストを取得
async function fetchUsers() {
  const res = await fetch('https://api.github.com/users?per_page=10');
  return await res.json();
}

// 2) ネスト平坦化関数（本ツールの平坦化ロジックと等価）
function flattenObject(obj, prefix = '', sep = '.', result = {}) {
  for (const [k, v] of Object.entries(obj || {})) {
    const key = prefix ? `${prefix}${sep}${k}` : k;
    if (v && typeof v === 'object' && !Array.isArray(v)) {
      flattenObject(v, key, sep, result);
    } else {
      result[key] = v;
    }
  }
  return result;
}

// 3) 平坦化されたデータを HTML テーブルに変換、Tailwind class を注入
function generateHtmlTable(rows) {
  const flat = rows.map(r => flattenObject(r));
  const cols = [...new Set(flat.flatMap(r => Object.keys(r)))];
  const thead = cols.map(c => `<th class="px-4 py-2 text-left">${c}</th>`).join('');
  const tbody = flat.map(r =>
    `<tr class="border-b hover:bg-gray-50">${cols.map(c => `<td class="px-4 py-2">${r[c] ?? 'N/A'}</td>`).join('')}</tr>`
  ).join('');
  return `<table class="min-w-full text-sm">
  <thead class="bg-gray-100"><tr>${thead}</tr></thead>
  <tbody>${tbody}</tbody>
</table>`;
}

// 4) ページに注入
const users = await fetchUsers();
const html = generateHtmlTable(users);
document.getElementById('table-container').innerHTML = html;
console.log(users.length + '行、' + (Object.keys(flattenObject(users[0])).length) + '列を生成しました');

from flask import Flask, jsonify, render_template_string
import json

app = Flask(__name__)

TEMPLATE = """
<!doctype html><html><body>
<div class="overflow-x-auto">{{ table_html | safe }}</div>
</body></html>
"""

def flatten(obj, prefix='', sep='.', result=None):
    """ネストオブジェクトを再帰的に平坦化"""
    if result is None:
        result = {}
    for k, v in (obj or {}).items():
        key = f"{prefix}{sep}{k}" if prefix else k
        if isinstance(v, dict):
            flatten(v, key, sep, result)
        else:
            result[key] = v
    return result

def json_to_html_table(data, table_class='min-w-full border-collapse',
                        max_rows=1000, responsive=True):
    if isinstance(data, dict):
        data = [data]
    if not data:
        return "<p>データなし</p>"

    # 行切り詰め
    truncated = False
    if len(data) > max_rows:
        data = data[:max_rows]
        truncated = True

    # 各行を平坦化
    flat_rows = [flatten(row) for row in data]

    # すべての列名を収集（set で重複排除、挿入順序を保持）
    columns = []
    for row in flat_rows:
        for k in row.keys():
            if k not in columns:
                columns.append(k)

    # thead を生成
    thead = "".join(f'<th class="px-4 py-2 text-left bg-gray-100">{c}</th>' for c in columns)

    # テーブル行を生成
    rows = []
    for i, row in enumerate(flat_rows):
        bg = "bg-gray-50" if i % 2 == 1 else ""
        tds = "".join(
            f'<td class="px-4 py-2 {bg}">{("N/A" if row.get(c) is None else row.get(c, ""))}</td>'
            for c in columns
        )
        rows.append(f'<tr class="hover:bg-blue-50">{tds}</tr>')

    html = f'<table class="{table_class}"><thead><tr>{thead}</tr></thead><tbody>{"".join(rows)}</tbody></table>'
    if responsive:
        html = f'<div class="overflow-x-auto">{html}</div>'

    if truncated:
        html = f'<p class="text-amber-600 text-sm">データを最初の {max_rows} 行に切り詰めました</p>{html}'

    return html


@app.route('/api/users')
def users():
    data = json.load(open('users.json'))
    return jsonify(data)

@app.route('/users.html')
def users_html():
    import requests
    data = requests.get('http://localhost:5000/api/users').json()
    return render_template_string(TEMPLATE, table_html=json_to_html_table(data))


if __name__ == '__main__':
    app.run(debug=True)

# 1) jq を使用してネストログを集計し、ドット区切りキーに平坦化
cat app.log | jq -s '
  group_by(.response.status_code) |
  map({
    status: .[0].response.status_code,
    count: length,
    "first_request.method": .[0].request.method,
    "last_request.url": .[-1].request.url,
    "first_seen": min_by(.timestamp).timestamp,
    "last_seen": max_by(.timestamp).timestamp
  })
' > stats.json

# 2) stats.json を本ツールに貼り付け
#    ツールバーで「平坦化（推奨）」モードを選択
#    「ゼブラストライプ + レスポンシブラップ + ボーダー」をチェック
#    table class 名に min-w-full text-sm border-collapse を入力
#    null プレースホルダーを - に設定（欠損フィールドを - と表示）
#    Caption を 2026-07 本番エラーログ統計 に設定
#    Convert をクリックして table.html をダウンロード

# 3) S3 / OSS 静的サイトにアップロード
aws s3 cp table.html s3://my-bucket/reports/2026-07.html --acl public-read

# または Confluence / Notion / VuePress ドキュメントに埋め込み
sed -i '' 's/min-w-full/min-w-full shadow-md/g' table.html

# または HTML メールとして送信
mutt -e "set content_type=text/html" -s "2026-07 エラーログ" your@email.com < table.html

よくある質問

トラブルシューティング

用語集

HTML テーブル (HTML Table)

W3C 標準の構造化データ表示要素。table / thead / tbody / tr / th / td / caption などのセマンティックタグで構成されます。本ツールが生成するコードはこの構造に厳密に従います。

JSON 配列

角括弧 [...] で囲まれたオブジェクトの集合。本ツールは配列の各オブジェクトをテーブルの 1行として使用します。空配列の場合はテーブルを生成しません（通知を表示）。

JSON オブジェクト

中括弧 {} で囲まれたキーと値のペアの集合。本ツールはオブジェクトの各キーをテーブルヘッダーとして、値をセルとして使用します。単一オブジェクトは自動的に 1行テーブルとしてラップされます。

ネスト平坦化 (Flatten)

ネストされたオブジェクトをドット区切りのフラットキーに再帰的に展開します。例：{user:{name:'A'}} → 'user.name'。本ツールは 6階層までの自動平坦化をサポートし、区切り文字はカスタマイズ可能です。

thead / tbody

HTML テーブルの 2つのセマンティック区分：thead はヘッダー行（th）をラップし、tbody はデータ行（td）をラップします。本ツールが生成するコードはこれら 2つの部分を厳密に区別します。

Caption

テーブルタイトルタグで、テーブルの内部最初の行にあります。本ツールはカスタムキャプションテキストをサポートし、有効にすると指定されたタイトルがテーブル上部に表示され、SEO とアクセシビリティの両方に役立ちます。

ゼブラストライプ (Zebra Striping)

奇数行と偶数行が異なる背景色を交互に使用するビジュアルパターン。一般的に #fff / #f9fafb の組み合わせが使用されます。本ツールでは「ゼブラストライプ」チェックボックスで有効化し、長いテーブルの可読性を大幅に向上させます。

インラインスタイル (Inline Style)

外部スタイルシートを参照するのではなく、HTML タグの style 属性で直接 CSS を記述すること。本ツールはデフォルトでスタイルをすべてインライン style として出力するため、追加の CSS ファイルなしでコードをそのまま使用できます。

CSS class フック

本ツールの差別化機能：`<table>` タグに任意の class 文字列（Tailwind クラスなど）を注入し、既存の CSS フレームワークとシームレスに統合。これは競合に対する重要なアップグレードです。

iframe sandbox

HTML タグ iframe のセキュアサンドボックスモード。スクリプト実行やフォーム送信を制限できます。本ツールは sandbox="allow-same-origin" の iframe を使用して生成 HTML をプレビューし、偶発的なスクリプト実行を防止します。

タイプ認識ハイライト

本ツールの差別化機能：セル値の JS タイプ（null / boolean / number / object / string）に応じて異なる色を適用し、API データのデバッグをより直感的にします。

localStorage 履歴

ブラウザが提供するローカルキーバリューストレージ（容量約 5-10MB）。本ツールは localStorage を使用して最新 200 件の入力を永続保存し、リフレッシュや誤ってタブを閉じた後にすばやく復元できます。

レスポンシブラップ (Responsive Wrapper)

テーブルの外側を `<div style="overflow-x:auto;max-width:100%;">` でラップし、狭幅画面で自動的に横スクロールバーが表示されるようにします。本ツールはデフォルトで有効化しており、ツールバーでオフにできます。

デバウンス (Debounce)

フロントエンドパフォーマンス最適化テクニック：高頻度イベント（入力など）のコールバックを最後のトリガー後に 1 回実行するようにマージ。本ツールは 500ms のデバウンスを設定し、大規模ファイル解析によるラグを回避します。

W3C HTML5

World Wide Web Consortium（W3C）が策定した HTML 標準仕様。本ツールが生成するコードは HTML5 仕様に準拠し、すべてのモダンブラウザで正しくレンダリングされます。

3つのネスト処理モード比較表

ツールバーは異なるネストシナリオに対応する 3つのモードを提供します。JSON 構造の複雑さに基づいて選択してください：

ツールバー 14 設定オプション早見表

ツールバーの 14 の設定オプションとその視覚的差分を一覧化し、迅速な組み合わせ選択を可能にします：

セルタイプ認識ハイライトルール早見表

本ツールは JSON 値の JavaScript タイプに基づいて異なる色を自動適用し、データタイプの素早い識別を可能にします：

Privacy & Security

本 JSON→HTML ツールは、すべての JSON 解析、ネスト平坦化、HTML 生成、コピー、ダウンロード操作を JavaScript によってブラウザ内のみで実行します。入力された JSON データと生成された HTML コードはサーバーにアップロードされず、ログ記録、キャッシュ、クラウド保存も一切行われません。未公開の API レスポンスや内部ビジネスフィールドを含む機密 JSON でも安心して使用でき、ページを閉じるとすべてのデータが消去されます。

Authoritative References

• MDNMDN - HTML <table> 要素
• MDNMDN - HTML テーブル基礎
• W3CW3C HTML5 仕様 - table 要素
• MDNMDN - iframe sandbox 属性
• MDNMDN - JSON.parse / JSON.stringify
• TailwindTailwind CSS - テーブルスタイル
• BootstrapBootstrap - テーブル