ローカルでfetchを使うにはCORS対応が一工夫必要なので、下記の記事を参考までにどうぞ
Qiita - ローカルのHTMLファイルでfetchを試す & CORSとその回避策
やりたいこと
- ローカルのJSからfetch APIを使って公開APIを叩き、GETしたJSONをファイルに保存する
- FileSaver.jsというnpmのパッケージをnode.jsとかの無いローカル環境で動かしてみる
FileSaver.js
- Github: https://github.com/eligrey/FileSaver.js/
- ファイル生成・保存をよしなにやってくれるライブラリ
- 1ファイルだけなのでローカルでも動いてくれた
コード
test.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="FileSaver.js"></script>
</head>
<body>
<input type="button" value="取得" onclick="apiRequest()" />
<div id="export"></div>
<script>
async function apiRequest() {
const downloadUrl =
"http://zipcloud.ibsnet.co.jp/api/search?zipcode=1620825";
const response = await fetch(downloadUrl);
const blob = response.blob();
const fileName = "test.json";
saveAs(blob, fileName);
}
</script>
</body>
</html>
ファイルの中身
test.json
{
"message": null,
"results": [
{
"address1": "東京都",
"address2": "新宿区",
"address3": "神楽坂",
"kana1": "ﾄｳｷｮｳﾄ",
"kana2": "ｼﾝｼﾞｭｸｸ",
"kana3": "ｶｸﾞﾗｻﾞｶ",
"prefcode": "13",
"zipcode": "1620825"
}
],
"status": 200
}
まとめ
- 簡単だった
- 今度何やろう