JSONファイルはコメントアウトできません。でもなんとかする方法

web制作
目次
  1. JSONファイルでコメントアウトはできません
  2. コメントアウトを前提にしたデータを使いたければYAMLを使おう
  3. REACTにてAjaxでYAMLを読み込んだデータを扱うサンプル
  4. JSONC(JSON with comments)ファイルを使用するという選択肢もある

JSONファイルでコメントアウトはできません

Ajaxを利用して外部データを取得、それをもとにレンダリングをする機会がかなり増えてきました。

この外部データで一番使いやすいのはjsonファイルです。データ構造がまんまjavascriptのオブジェクト型なのでデータを変数に入れるとそのままオブジェクとして扱えるのです。

jsonファイルにデータを保存しておいて運用するとHTML等のコーディングを軽量化できます。特にリスト表示のデータを外部データとして扱うと効果は絶大です。

ただ運用上不満が生まれます。

データを一時的に削除扱いしたい時、行ごと削除するしかできない・・・

具体例を出すと以下の内容になります。

↓こちらのコードはNGです。

{
  "data": [
    //  ↓ ここをコメントアウト扱いしたい！でもダメ！！！
    // {                           
    //  "id": "1",
    //  "name": "キャプテンアメリカ"
    // },
    {
       "id": "2",
       "name": "アイアンマン"
    },
    {
       "id": "3",
       "name": "マイティーソー"
    }
  ]
}

つまり、JSONファイルはコメントアウトできません。

コメントアウトを前提にしたデータを使いたければYAMLを使おう

JSONファイルのような設定データをコメントアウトを使って運用したい場合はYAMLファイルが便利です。

YAML（YAML Ain’t a Markup Language《YAMLはマークアップ言語じゃない》）の意味です。

先ほどのavengers.jsonをyamlであらわすと以下のようになります。

data:
  # - id: 1 # これはNGじゃない！！！ 
  #  name: キャプテンアメリカ
  - id: 2
    name: アイアンマン
  - id: 3
    name: マイティーソー

上記のようにコメントアウトが使えます。これで不満が解消されたと思いますがjavasriptコード内でYAMLデータを使用するためには一工夫が必要です。

YAMLデータをJSONデータに変換する必要があるのです。

自分で変換するスクリプトを作ってもよいですが世の中には便利なライブラリを作ってくれる人がいるのでライブラリを使用します。npmで呼び出せる「js-yaml」等があります。

■js-yaml – npm
https://www.npmjs.com/package/js-yaml

REACTにてAjaxでYAMLを読み込んだデータを扱うサンプル

YAMLデータをJSONに変換して取り込みReactで書き出すコードは以下のようになります。

AjaxでYAMLファイルを読み込み、JSONデータに変換したタイミングでReactの状態を変化させレンダリングするような処理です。

import React, {useState, useEffect} from 'react';
import ReactDOM from 'react-dom';
import axios from 'axios';
// Yaml⇒json用ライブラリ
const yaml = require('js-yaml');

function App() {    
    const [data, setData] = useState({data: []});
    useEffect(() => {        
        const fetchData = async () => {
              const result = await axios( ファイルのURL );
              // yamlデータをjsonに変換する              
              json_data = yaml.load(result.data);
              // ステート変更発動コールバック関数
              setData(data: json_data.data);
         };
         fetchData();
    }, []);
    return (レンダリングコード)
}
// idがappのdiv上にReactコード（function App）をレンダリングします
ReactDOM.render(<App />, document.getElementById('app'));

※レンダリング部分は省略しました。このコードをコピペしても動きません。

JSONC(JSON with comments)ファイルを使用するという選択肢もある

jsonファイルの欠点であるコメントアウトができないという状況を改善するためのファイルも出ています。それがJSONCファイルです。これはJSONファイルをコメントアウトすることを可能にしただけのJSONファイルです。

Microsoftが提供しているエディタ「Visual Studio Code」の設定ファイルはこのJSONCファイルです。見た目はJSONファイルまんまですがコメントアウトすることができます。

また、Microsoftがnpmのパッケージで「jsonc-parser」というものを提供しています。このパッケージを使用すれば JSONCファイルをJSONデータに変換することができます。

ただ、この「jsonc-parser」はCLI（Command Line Interface）ではないのでpackage.jsonのscriptの項目に処理を書くことはできません。npm-scriptをタスクランナーとして利用している人は困ります。

■jsonc-parser
https://github.com/microsoft/node-jsonc-parser

ではどうすればpackage.jsonのscriptのコマンドでjsoncをjsonに変換できるのでしょうか？

答えはnode用のスクリプトを新たに書いてpackage.jsonから処理を呼び出すです。

以下はnpmでインストールしたjsonc-parserを自前で用意したparse-jsonc.mjsに書いてpackage.jsonのscriptの要素に追加してタスクを登録する流れです。

（１）npmでjsoncs-parserパッケージをインストールする

npm i -D jsonc-parser

（２）node用のスクリプトファイルを作成する

touch ./parse-jsonc.mjs

※import構文を使用するためファイルはparse-jsonc.jsではなくparse-jsonc.mjsにします

（３）（２）で作成したファイルを編集する

import { parse } from 'jsonc-parser';
import fs from 'fs'

const INPUT_FILE_PATH = './data.jsonc';
const OUTPUT_FILE_PATH = './src/config.json';

const buff = fs.readFileSync(INPUT_FILE_PATH);
const data = parse(buff.toString());
fs.writeFileSync(OUTPUT_FILE_PATH , JSON.stringify(data));

（４）package.jsonのscriptの値にタスクを加える

"script": {
  /* 省略 */
  "build:jsonc": "node parse-jsonc.mjs"
}

これでコマンド”npm run build:jsonc”を入力すると指定場所にあるJSONCファイルをJSONファイルに変換することができます。