JSON整形ツールの作り方｜エラー表示＆ハイライト機能付き！HTMLとJavaScriptで簡単実装

「JSONのエラーって、どこが間違っているのか分かりにくい…」
「ただの整形ツールじゃなくて、エラー箇所まで教えてくれる便利なツールがあったらいいのに！」

そんな悩みを解決できるのが、エラー位置を表示し、ハイライトして教えてくれるJSON整形ツールです。
実はこれ、HTMLとJavaScriptを使えば初心者でも簡単に作成できるんです！

この記事では、ブラウザ上で動作するJSON整形ツールの作り方を、初心者の方にもわかりやすいように解説します。
基本的なHTMLファイルの作成方法から、JSONのパース処理、エラー位置の特定＆ハイライト表示の実装方法まで、
実際に手を動かしながら学べる内容となっています。

完成イメージの確認｜作るものの概要

まずは、これから作成するJSON整形ツールの完成イメージを確認しておきましょう。
「どんなツールができあがるのか？」をイメージしておくと、学習のモチベーションも上がります！

作成するツールの主な機能

JSONデータを見やすく整形する（インデント付き表示）
エラー箇所があれば位置を表示し、該当部分を赤くハイライト
結果をコピーボタンでコピーできる
HTMLとJavaScriptだけで実現（追加ライブラリ不要）
スマホ対応のシンプルで見やすいデザイン

完成イメージ

【実際にJSON整形ツールを使って、実際に動かしてみたい方はこちら！】▼

: JSON整形ツール｜エラー位置表示＆ハイライト付き！ブラウザで簡単無料利用
「このJSON、どこが間違ってるの…？」エラー箇所がわからず、何度も手作業で修正を試みた経験はありませんか？そんなお悩みを解決するのが、このJSON整形ツールです。ブラウザ上で簡単にJSONを整形で ...

HTMLファイルを作って動かしてみよう

ツールの動作を確認するには、まずはHTMLファイルを作成してブラウザで開いてみることから始めましょう。
難しい設定は一切不要。以下の手順通りに進めれば、すぐにツールが動きます。

【手順】

メモ帳やVisual Studio Codeなどのテキストエディタを開きます。
以下で紹介するサンプルをコピーして、エディタに貼り付けます。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>JSON整形ツール</title>
</head>
<body>
    <h1>こんにちは！</h1>
</body>
</html>

<!DOCTYPE html>

<head>

<title>JSON整形ツール</title>

</head>

<body>

<h1>こんにちは！</h1>

</body>

</html>

3.ファイル名を 「json-formatter.html」 として保存します。
　※ファイル名は自由に変更してOKですが、必ず拡張子は .html にすること。
4.保存したファイルをダブルクリックすれば、Webブラウザでツールが起動します。
　ブラウザに「こんにちは！」と表示されれば成功です。

【うまく表示されないときは？】

ファイルの拡張子が .txt になっていないか確認しましょう。
ブラウザのキャッシュが原因の場合は、ページの再読み込み（Ctrl + F5）を試してみてください。

実際に作ってみよう｜サンプルコード解説

それでは、実際にJSON整形ツールのコードを書いていきましょう！
初心者の方でも理解しやすいように、まずは完成版のコードを全文載せて、
その後でポイントごとに分けて詳しく解説します。

完成版コード

以下が、今回作成するJSON整形ツールの完成コードです。
まずは全体像をざっと確認し、動かしてみましょう。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>JSON整形ツール</title>
    <style>
        body {
            font-family: "Segoe UI", "Helvetica Neue", sans-serif;
            background: #f4f4f9;
            color: #333;
            padding: 20px;
        }
        h1 {
            text-align: center;
            color: #4a90e2;
        }
        label {
            font-weight: bold;
            margin-top: 10px;
            display: block;
        }
        textarea, input[type="text"] {
            width: 100%;
            font-size: 16px;
            padding: 10px;
            margin-top: 5px;
            margin-bottom: 15px;
            border: 1px solid #ccc;
            border-radius: 6px;
            box-sizing: border-box;
        }
        textarea {
            height: 150px;
        }
        button {
            padding: 10px 20px;
            margin-right: 10px;
            font-size: 16px;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            background-color: #4a90e2;
            color: white;
            transition: background-color 0.3s;
        }
        button:hover {
            background-color: #357ab8;
        }
        .copy-button {
            background-color: #50c878;
            margin-top: 15px;
        }
        .copy-button:hover {
            background-color: #3ca867;
        }
        #resultArea {
            margin-top: 20px;
            padding: 15px;
            background: #fff;
            border: 1px solid #ddd;
            border-radius: 6px;
            min-height: 100px;
            max-height: 300px; /* 最大高さを設定 */
            overflow-y: auto;  /* 縦方向にスクロールを許可 */
            white-space: pre-wrap;
            word-wrap: break-word;
        }
        .error {
            color: red;
            font-weight: bold;
        }
        .error-highlight {
            background-color: #ffdddd;
            color: red;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <h1>JSON整形ツール</h1>

    <label>JSONデータを入力：</label>
    <textarea id="inputJSON" placeholder='例：{"name": "John", "age": 30}'></textarea>

    <button onclick="formatJSON()">整形する</button>
    <button onclick="clearFields()">クリア</button>

    <h2>整形結果：</h2>
    <div id="resultArea"></div>
    <button class="copy-button" onclick="copyResult()">結果をコピー</button>

    <script>
    function formatJSON() {
        const input = document.getElementById('inputJSON').value;
        const resultArea = document.getElementById('resultArea');

        try {
            const parsed = JSON.parse(input);
            const formatted = JSON.stringify(parsed, null, 4);
            resultArea.innerHTML = `<pre>${formatted}</pre>`;
            resultArea.classList.remove("error");
        } catch (e) {
            const errorMessage = e.message;
            const match = errorMessage.match(/position (\d+)/);
            if (match) {
                const position = parseInt(match[1]);
                let highlighted = "";

                for (let i = 0; i < input.length; i++) {
                    if (i === position) {
                        highlighted += `<span class="error-highlight">${input[i]}</span>`;
                    } else {
                        highlighted += `<span style="color: black;">${input[i]}</span>`;
                    }
                }

                resultArea.innerHTML = `⚠️ 入力が正しいJSONではありません（${position}文字目付近）。<br><br><pre>${highlighted}</pre>`;
            } else {
                resultArea.innerHTML = "⚠️ 入力が正しいJSONではありません。";
            }
            resultArea.classList.add("error");
        }
    }

    function clearFields() {
        document.getElementById('inputJSON').value = "";
        document.getElementById('resultArea').innerHTML = "";
        document.getElementById('resultArea').classList.remove("error");
    }

    function copyResult() {
        const resultArea = document.getElementById('resultArea');
        const text = resultArea.innerText;
        if (!text) {
            alert("コピーする内容がありません。");
            return;
        }
        navigator.clipboard.writeText(text)
            .then(() => alert("整形結果をコピーしました！"))
            .catch(() => alert("コピーに失敗しました。"));
    }
    </script>
</body>
</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

<!DOCTYPE html>

<head>

<title>JSON整形ツール</title>

<style>

body {

font-family: "Segoe UI", "Helvetica Neue", sans-serif;

background: #f4f4f9;

color: #333;

padding: 20px;

}

h1 {

text-align: center;

color: #4a90e2;

}

label {

font-weight: bold;

margin-top: 10px;

display: block;

}

textarea, input[type="text"] {

width: 100%;

font-size: 16px;

padding: 10px;

margin-top: 5px;

margin-bottom: 15px;

border: 1px solid #ccc;

border-radius: 6px;

box-sizing: border-box;

}

textarea {

height: 150px;

}

button {

padding: 10px 20px;

margin-right: 10px;

font-size: 16px;

border: none;

border-radius: 6px;

cursor: pointer;

background-color: #4a90e2;

color: white;

transition: background-color 0.3s;

}

button:hover {

background-color: #357ab8;

}

.copy-button {

background-color: #50c878;

margin-top: 15px;

}

.copy-button:hover {

background-color: #3ca867;

}

#resultArea {

margin-top: 20px;

padding: 15px;

background: #fff;

border: 1px solid #ddd;

border-radius: 6px;

min-height: 100px;

max-height: 300px; /* 最大高さを設定 */

overflow-y: auto; /* 縦方向にスクロールを許可 */

white-space: pre-wrap;

word-wrap: break-word;

}

.error {

color: red;

font-weight: bold;

}

.error-highlight {

background-color: #ffdddd;

color: red;

font-weight: bold;

}

</style>

</head>

<body>

<h1>JSON整形ツール</h1>

<label>JSONデータを入力：</label>

<button class="copy-button" onclick="copyResult()">結果をコピー</button>

function formatJSON() {

const input = document.getElementById('inputJSON').value;

const resultArea = document.getElementById('resultArea');

try {

const parsed = JSON.parse(input);

const formatted = JSON.stringify(parsed, null, 4);

resultArea.innerHTML = `<pre>${formatted}</pre>`;

resultArea.classList.remove("error");

} catch (e) {

const errorMessage = e.message;

const match = errorMessage.match(/position (\d+)/);

if (match) {

const position = parseInt(match[1]);

let highlighted = "";

for (let i = 0; i < input.length; i++) {

if (i === position) {

highlighted += `<span class="error-highlight">${input[i]}</span>`;

} else {

highlighted += `<span style="color: black;">${input[i]}</span>`;

}

resultArea.innerHTML = `⚠️ 入力が正しいJSONではありません（${position}文字目付近）。<br><br><pre>${highlighted}</pre>`;

} else {

resultArea.innerHTML = "⚠️ 入力が正しいJSONではありません。";

}

resultArea.classList.add("error");

}

function clearFields() {

document.getElementById('inputJSON').value = "";

document.getElementById('resultArea').innerHTML = "";

document.getElementById('resultArea').classList.remove("error");

}

function copyResult() {

const resultArea = document.getElementById('resultArea');

const text = resultArea.innerText;

if (!text) {

alert("コピーする内容がありません。");

return;

}

navigator.clipboard.writeText(text)

.then(() => alert("整形結果をコピーしました！"))

.catch(() => alert("コピーに失敗しました。"));

}

</script>

</body>

</html>

HTMLの基本構造

以下のコードで、入力欄とボタン、結果表示エリアを作っています。

<label>JSONデータを入力：</label>
<textarea id="inputJSON"></textarea>

<button onclick="formatJSON()">整形する</button>
<button onclick="clearFields()">クリア</button>

<h2>整形結果：</h2>
<div id="resultArea"></div>

<label>JSONデータを入力：</label>

ポイント

<label>タグで入力欄の説明をつけると、何を入力する欄か分かりやすい！
<textarea>の id はJavaScriptで操作するために必要。

JSONの整形処理（JavaScript）

function formatJSON() {
    const input = document.getElementById('inputJSON').value;
    const resultArea = document.getElementById('resultArea');

    try {
        const parsed = JSON.parse(input);
        const formatted = JSON.stringify(parsed, null, 4);
        resultArea.innerHTML = `<pre>${formatted}</pre>`;
    } catch (e) {
        // エラー処理は次で解説！
    }
}

function formatJSON() {

const input = document.getElementById('inputJSON').value;

const resultArea = document.getElementById('resultArea');

try {

const parsed = JSON.parse(input);

const formatted = JSON.stringify(parsed, null, 4);

resultArea.innerHTML = `<pre>${formatted}</pre>`;

} catch (e) {

// エラー処理は次で解説！

}

ポイント

JSON.parse()で文字列からJSONデータに変換。
JSON.stringify()で整形して出力。第2引数 null、第3引数 4 でインデント幅を指定しています。
resultArea.innerHTML に整形済みのデータを表示。

エラー位置の特定とハイライト表示

catch (e) {
            const errorMessage = e.message;
            const match = errorMessage.match(/position (\d+)/);
            if (match) {
                const position = parseInt(match[1]);
                let highlighted = "";

                for (let i = 0; i < input.length; i++) {
                    if (i === position) {
                        highlighted += `<span class="error-highlight">${input[i]}</span>`;
                    } else {
                        highlighted += `<span style="color: black;">${input[i]}</span>`;
                    }
                }

                resultArea.innerHTML = `⚠️ 入力が正しいJSONではありません（${position}文字目付近）。<br><br><pre>${highlighted}</pre>`;
            } else {
                resultArea.innerHTML = "⚠️ 入力が正しいJSONではありません。";
            }
            resultArea.classList.add("error");
        }

catch (e) {

const errorMessage = e.message;

const match = errorMessage.match(/position (\d+)/);

if (match) {

const position = parseInt(match[1]);

let highlighted = "";

for (let i = 0; i < input.length; i++) {

if (i === position) {

highlighted += `<span class="error-highlight">${input[i]}</span>`;

} else {

highlighted += `<span style="color: black;">${input[i]}</span>`;

}

resultArea.innerHTML = `⚠️ 入力が正しいJSONではありません（${position}文字目付近）。<br><br><pre>${highlighted}</pre>`;

} else {

resultArea.innerHTML = "⚠️ 入力が正しいJSONではありません。";

}

resultArea.classList.add("error");

}

ポイント

e.message から「何文字目でエラーが起きたか」を抽出。
JavaScriptのJSON.parse()を使うと、JSONにエラーがあった場合、エラーメッセージに「position ○○」という情報が含まれます。
この「position ○○」が、何文字目でエラーが発生したかを示しています。
そして、match() で「position 数字」の部分を正規表現で抽出しています。
その位置を for ループで探し、該当箇所に <span> を挿入して赤くハイライト表示。
ハイライトのCSSは error-highlight クラスで指定しています。

CSSデザイン（シンプル＆分かりやすいデザイン）

textarea, input[type="text"] {
    width: 100%;
    font-size: 16px;
    padding: 10px;
    margin-top: 5px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 6px;
    box-sizing: border-box;
}

textarea, input[type="text"] {

width: 100%;

font-size: 16px;

padding: 10px;

margin-top: 5px;

margin-bottom: 15px;

border: 1px solid #ccc;

border-radius: 6px;

box-sizing: border-box;

}

ポイント

width: 100%：テキスト入力欄を横いっぱいに広げることで、スマホでも見やすく。
font-size: 16px：文字が小さすぎず、大きすぎず、読みやすいサイズ。
padding：文字と枠の間に余白を入れて圧迫感を減らす。
border / border-radius：枠線と角丸で、柔らかい見た目に。
box-sizing: border-box：余白や枠線を含めてサイズ計算する設定で、全体のレイアウトが崩れにくくなる。

#resultArea {
            margin-top: 20px;
            padding: 15px;
            background: #fff;
            border: 1px solid #ddd;
            border-radius: 6px;
            min-height: 100px;
            max-height: 300px; /* 最大高さを設定 */
            overflow-y: auto;  /* 縦方向にスクロールを許可 */
            white-space: pre-wrap;
            word-wrap: break-word;
        }

#resultArea {

margin-top: 20px;

padding: 15px;

background: #fff;

border: 1px solid #ddd;

border-radius: 6px;

min-height: 100px;

max-height: 300px; /* 最大高さを設定 */

overflow-y: auto; /* 縦方向にスクロールを許可 */

white-space: pre-wrap;

word-wrap: break-word;

}

ポイント

background：結果表示エリアを白背景にして、データを見やすく。
min-height / max-height：結果表示の高さを固定しすぎず、内容に応じて伸縮するように設定。
overflow-y: auto：データが多い場合に縦スクロールできるように。
white-space: pre-wrap：JSONのインデントや改行をそのまま表示。
word-wrap: break-word：長い単語（例：キー名）が折り返されるように設定。

.error-highlight {
    background-color: #ffdddd;
    color: red;
    font-weight: bold;
}

.error-highlight {

background-color: #ffdddd;

color: red;

font-weight: bold;

}

ポイント

エラー箇所を赤背景＋赤文字で目立たせる。
font-weight: bold で太字にして、見逃しにくくしている。

さらに学びたい方におすすめの学習リソース

「自分でツールを作るのは楽しい！」と感じた方は、さらにステップアップを目指して、
JavaScriptやJSONの基礎から学び直すのもおすすめです。
ここでは、初心者の方でも理解しやすく、実務でも役立つ知識が身につく学習リソースを紹介します。

【おすすめ書籍】

確かな力が身につくJavaScript超入門

JavaScriptの基礎から学べる入門書。
「JavaScriptって何？」という超初心者にもわかりやすい解説で、
今回のツール作成に必要な基礎知識（変数、関数、イベント処理など）をしっかり学べます。

確かな力が身につくJavaScript「超」入門第2版

ＳＢクリエイティブ/狩野祐東

Amazon

楽天

Python+JSON データ活用の奥義

PythonでのJSONデータ活用を学びたい方にぴったりの一冊です。
公共データの取得やAI作成の例を通じて、JSONを実務でどのように活用できるかを学べます。
JSONを使ったデータ処理の幅を広げたい方におすすめです。

Python+JSON データ活用の奥義

クジラ飛行机

楽天

楽天Kobo

まとめ

今回は、エラー位置表示＆ハイライト機能付きのJSON整形ツールを、HTMLとJavaScriptで作成する方法を解説しました。
一見難しそうに見えるツールも、基本的なHTMLファイルの作り方から、JavaScriptでのJSON処理、エラーの位置表示の仕組みまで、
ステップごとに進めれば意外とシンプルに作れることが分かったのではないでしょうか。

JSON整形ツールは、日々の開発作業の効率化や学習のサポートにとても役立つツールです。
自分で作ることで、JavaScriptの理解が深まるのはもちろん、ツールを使う側の視点も養えます。

ぜひ今回の内容を参考に、他の便利ツール作りにもチャレンジしてみてください！
また、ツール本体の記事や活用法の記事もあわせて読むことで、学びをさらに深められますので、ぜひチェックしてみてくださいね！

【実際にJSON整形ツールを使って、今回の学習内容を試してみましょう】▼

: JSON整形ツール｜エラー位置表示＆ハイライト付き！ブラウザで簡単無料利用
「このJSON、どこが間違ってるの…？」エラー箇所がわからず、何度も手作業で修正を試みた経験はありませんか？そんなお悩みを解決するのが、このJSON整形ツールです。ブラウザ上で簡単にJSONを整形で ...

【JSON整形ツールの便利な活用法はこちら】▼

: JSON整形ツールの便利な使い方と活用法｜作業効率UPの実践テクニック集
「JSONを見やすく整形したいけど、どうやって？」「エラーの原因がどこかわからず、作業が止まってしまった…」そんな悩みを抱えたことはありませんか？ JSONはシンプルなデータ形式でありながら、意外とミ ...

JSON整形ツールの作り方｜エラー表示＆ハイライト機能付き！HTMLとJavaScriptで簡単実装

完成イメージの確認｜作るものの概要

作成するツールの主な機能

完成イメージ

HTMLファイルを作って動かしてみよう

実際に作ってみよう｜サンプルコード解説

完成版コード

HTMLの基本構造

JSONの整形処理（JavaScript）

エラー位置の特定とハイライト表示

CSSデザイン（シンプル＆分かりやすいデザイン）

さらに学びたい方におすすめの学習リソース

【おすすめ書籍】

確かな力が身につくJavaScript超入門

Python+JSON データ活用の奥義

まとめ

関連記事

VSCode JavaScript拡張機能｜初心者はまずこれだけ入れればOK【厳選3つ】

Visual Studio Code（VSCode）インストール方法｜初心者でも5分でできる日本語化ガイド【Windows/Mac 両対応】

HTMLとCSS 実践編｜初心者でもコピペで作れる！モダンUIデザイン入門

HTMLとCSS 基礎入門｜初心者でも今日から作れる！わかりやすい超入門ガイド

JavaScript初心者でもできる！文字数カウンターを作りながら基礎文法を学ぼう