JavaScriptでJSONファイルをローカルから読み込みするには

JSONファイルを読み込みしたいとき...

jQueryだったらこういうコードを書きます。

▼ 外部からJSONを読込する

var url = 'https://example.com/x.json';
$.getJSON(url, function(data){
  console.log('data : ', data);
});

var url = 'https://example.com/x.json';

$.getJSON(url, function(data){

console.log('data : ', data);

});

外部ならこれでOKなんですが・・・

問題はローカルのJSONファイルを読み込む時。

その方法は２つあるのでまとめておきます。

このページの目次

ローカル読み込みはCORSエラーが出てしまう...
方法１．Chromeで --disable-web-security を付けて起動
方法２．JSONをローカルのjsファイルから読み込み
ローカルJSON読み込みのまとめ

ローカル読み込みはCORSエラーが出てしまう...

たとえばこういうコードを書いたとします。

▼ ローカルからJSONファイル読み込みしたい

var url = './xxx.json';
$.getJSON(url, function(data){
  console.log('data : ', data);
});

var url = './xxx.json';

$.getJSON(url, function(data){

console.log('data : ', data);

});

▼ こんなエラーが出てしまった

Access to XMLHttpRequest at 'file:///C:/hogehoge/example_1.json' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https.

1	Access to XMLHttpRequest at 'file:///C:/hogehoge/example_1.json' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https.

お馴染みのCORSエラーです。

普通の方法だと読み込めないんです。

そこで解決策として次２つがあります。

方法１．Chromeで --disable-web-security を付けて起動

これは汎用的な方法ではありません。

こういう場合だけ有効な方法

テスト的にJSONを読み込みたい
Chromeブラウザを使っている

汎用的にするなら２つめを試してください。

一応紹介しておくと次の通り

やり方は起動時にオプションを付けるだけです。

▼ こういう起動オプションを付けて起動

"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --disable-web-security --user-data-dir="C://Chrome dev session"

1	"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --disable-web-security --user-data-dir="C://Chrome dev session"

※ Chromeのパスとかは各自で置き換え

でもいちいちコマンドラインで入力するのは面倒なので、ショートカットを作っておくと便利ですね。そうすればCORSエラーに悩まされずに開発できます。

まあChrome限定ということで。

方法２．JSONをローカルのjsファイルから読み込み

これはかなり汎用的な方法です。

方法を箇条書きするとこういう感じ

データを定義したjsファイルを作る
目的のjsファイルを動的に読み込み
グローバル変数として参照する

これでJSONをそのままデータとして読み込めます。

１．JSONデータを持つjsファイル作成

▼ JSONというかデータそのものを定義

window.SWEETS = [
  { name: 'Cupcake' },
  { name: 'Donut' },
  { name: 'Eclair' },
  { name: 'Froyo' },
  { name: 'Gingerbread' }
];

window.SWEETS = [

{ name: 'Cupcake' },

{ name: 'Donut' },

{ name: 'Eclair' },

{ name: 'Froyo' },

{ name: 'Gingerbread' }

];

こういう内容のファイルをローカルに作成

名前は xxx.json.js とか分かりやすい名前でいいです。上コードだと window.SWEETS というグローバルオブジェクトにそのままJSON（というかオブジェクトそのもの）を代入してます。

２．スクリプトから動的にJSONを読み込み

▼ コード例を挙げるなら次の通り(jQuery)

$(function(){
  var $script = $('<script>').attr({
    'type': 'text/javascript',
    'src': './xxx.json.js'
  });
  $script.on('load', function(){
    var data = window.SWEETS;
    /// 読み込みデータをゴニョゴニョ...
  });
  $('body')[0].appendChild(script[0]);
});