JSON Checker (Validator) の提供の種類

JSON Checker (Validator)は、記述したJSONの構文が正しいかを検証するツールやサービスのことです。
種類として主に、

Webブラウザ拡張
Webサービス
エディタ拡張
専用ソフトウェア

等の形態で提供されています。
通常はこれらから好みのものを利用すればいいのですが、企業ポリシーなどでそう簡単にはできないような作業環境もあります。

厳しい環境だと、

ホワイトリストで指定されたソフトウェア以外をインストールしてはならない
Webブラウザやコードエディタに、アドオンツールをインストールしてはならない
記述したコードやデータをインターネットへ送信してはならない（チェッカーの利用でも）
データを編集する作業端末は、インターネットに接続してはならない

等の制限がかけられていることがあります。

オフラインのJSON Validator

そんな時はオフラインのHTMLファイルです。
アドオンも、追加のソフトウェアインストールも不要で、データをインターネットへ送信もしません。
もちろんWebサービスにあるような広告も表示されず、動作は最軽量です。

HTMLでの実装例

以下が実装例です。

HTMLをPCのローカルに保存します。（厳しい作業環境にあるオフラインのPCへ保存するには、書き写すしかないかもしれませんが・・・がんばって・・・）

<!DOCTYPE html>
<meta charset="utf-8">
<title>JSON Validator</title>
<body>
<span>JSON Validator</span><br>
<textarea id="area" style="width:80%; height: 30em;"></textarea><br>
<span id="errmsg"></span>
<script>
area.addEventListener("input", () => {
  let area = document.getElementById("area");
  let color;
  try{
    color = "white";
    if(area.value.replace(/[ \n]/g, "").length){
      JSON.parse(area.value);
      color = "#dff";
    }
    document.getElementById("errmsg").innerText = "ok";
  }
  catch(e){
    document.getElementById("errmsg").innerText = e.toString();
    color = "#fac";
  }
  area.style.backgroundColor = color;
});
</script>
</body>

特徴として、文字を入力するたびにチェックされます。つまりチェックのボタン操作が不要です。
背景色で判定結果を表示します。水色(OK)、ピンク(NG)、です。

NGの場合は例外メッセージが下部に表示されます。
ロジックは単純で、Javascript の JSON.parse() でエラーするかどうかで判定しています。

利用ケース

1つ目のケースとして、既に実装済みJSONの書き換えが挙げられます。
JSONに慣れていない作業者がJSONの値を書き換えるように指示を受けているが、誤ってダブルクォーテーションやコロンを削除したり、カンマが多かったりしていないか、念のためにチェックをする、という使い方です。

2つ目のケースとして、JSONの学習用です。
文字を入力するたびに判定するので、ボタンを押すという手間がなく効率的です。
誤っている箇所を表示しないので、自力で誤りを特定することで、忘れにくいという効果もあると思います。

YAMLの場合

JSONではなくYAMLの場合の実装例です。
以下のライブラリをダウンロードして、ローカルPCに保存します。

その後、以下のHTMLを記述して、yaml.min.js と同じ階層に保存します。

<!DOCTYPE html>
<meta charset="utf-8">
<title>YAML Validator</title>
<script src="yaml.min.js"></script>
<body>
<span>YAML Validator</span><br>
<textarea id="area" style="width:80%; height: 30em;"></textarea><br>
<span id="errmsg"></span>
<script>
area.addEventListener("input", () => {
  let area = document.getElementById("area");
  let color;
  try{
    color = "white";
    if(area.value.length > 0){
      YAML.parse(area.value);
      color = "#dff";
    }
    document.getElementById("errmsg").innerText = "ok";
  }
  catch(e){
    document.getElementById("errmsg").innerText = e.toString();
    color = "#fac";
  }
  area.style.backgroundColor = color;
});
</script>
</body>

動作仕様はJSONのものと同じです。