web制作

JSONファイルをコメントアウトしたい。Ajaxでの外部ファイル運用を楽にする方法。

Posted on by admin

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を読み込んだデータを扱うサンプル

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'));

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

、、
admin