【JavaScript】fetchでスクレイピングして外部ドメインのデータを取得しよう！
スクレイピングとは？
コロナ禍において、磨いていたスキルがあります。
スクレイピングと言われる技術です。
ウェブスクレイピング
ウェブサイトから情報を抽出するコンピュータソフトウェア技術のこと。通常このようなソフトウェアプログラムは低レベルのHTTPを実装することで、もしくはウェブブラウザを埋め込むことによって、WWWのコンテンツを取得する。
厚生労働省や内閣府が公開しているオープンデータを取得することで、僕の開発しているアプリに組み込むようにしていました。
この場合、自分のWEBサーバーから外部のWEBサーバーにアクセスし、情報を取得していることになります。
クロスドメインの制約
通常、これはクロスドメインの制約により、不可能になっています。
クロスドメインの制約
通信はセキュリティ上の理由により同一生成元ポリシーによって制限され、基本的には、同一ドメイン（正確には同一生成元）としか通信ができない。
（略）
クロスドメインを認めるには、サーバー側のHTTPレスポンスヘッダーに追加が必要であり、例えば、Access-Control-Allow-Origin: *と書くと全てのドメインからのアクセスが許可される。Access-Control-Allow-Origin は Internet Explorer を含め全てのクロスドメイン対応ブラウザで使える。W3Cの仕様は、Cross-Origin Resource Sharing にて規定されている。
これをデフォルトで認めてしまうと、あるサーバーからあるサーバーに簡単にアクセスでき、セキュリティ攻撃を容易に受けることができてしまうので、当然といえば当然の制約です。
さて、この制約を突破するのがスクレイピングですが、サーバー間の通信を行うには、いくつか条件があります。
JSONファイルで提供すること
サーバー提供側が、CORSを許可していること
CORS
オリジン間リソース共有 (Cross-Origin Resource Sharing, CORS) は、追加の HTTP ヘッダーを使用して、あるオリジンで動作しているウェブアプリケーションに、異なるオリジンにある選択されたリソースへのアクセス権を与えるようブラウザーに指示するための仕組みです。ウェブアプリケーションは、自分とは異なるオリジン (ドメイン、プロトコル、ポート番号) にあるリソースをリクエストするとき、オリジン間 HTTP リクエストを実行します。
ソースコード
知識は、この辺にして早速ソースコードを見てみましょう！
<!DOCTYPE HTML>
<html lang="ja">
<head>
<title>fecthでスクレイピングしよう！</title>
</head>
<script type="module">
onload = async () => {
const res = await fetch('https://data.corona.go.jp/converted-json/covid19japan-npatients.json');
const data = await res.json();
console.log(data);
day_s.innerHTML = data[data.length - 1].date.toLocaleString();
yousei.innerHTML = data[data.length - 1].npatients.toLocaleString();
const res2 = await fetch('https://data.corona.go.jp/converted-json/covid19japan-ncures.json');
const data2 = await res2.json();
console.log(data2);
nyu.innerHTML = data2[data2.length - 1].ncures.toLocaleString();
}
</script>
<body>
<h1>fecthでスクレイピングしよう！</h1>
日本のコロナ感染状況<br><br>
更新日：<span id="day_s"></span><br>
陽性者数：<span id="yousei"></span> 人<br>
入院治療者：<span id="nyu"></span> 人<br><br>
出典：内閣官房、<a href="https://corona.go.jp/dashboard/">新型コロナウイルス感染症対策</a>、<a href="https://creativecommons.org/licenses/by/4.0/deed.ja">CC BY 4.0</a>
</body>
</html>
fetchの書き方
const res = await fetch('URL');
const data = await res.json();
//以下、処理する内容を記述JSONファイルのあるURLを指定し、そのデータを読み込むコードです。
今回は内閣府のオープンデータを読み込んでいます。
JSONファイルはここです↓
JSONファイルの構造を見てみる
では、どのように読まれているでしょうか？デバッグしてみましょう。
console.log(data);Google Chromeのコンソール画面を見てみます。
↑のように配列で読み込まれていることが分かります。あとは、
何番目の配列（最初or最後）を読むか
全て足し合わせる
今日と昨日のデータの差分を求める
などなど、自由自在にできます。
日本のコロナ感染状況<br><br>
更新日：<span id="day_s"></span><br>
陽性者数：<span id="yousei"></span> 人<br>
入院治療者：<span id="nyu"></span> 人ここで、各IDを指定しているので、
//html
day_s.innerHTML = data[data.length - 1].date.toLocaleString();
yousei.innerHTML = data[data.length - 1].npatients.toLocaleString();innerHTMLでID要素に書き出しています。
あとは、CSSで装飾すれば、WEBアプリの出来上がり！
最初は、JSONファイルの構造を読むのに苦労しますが、慣れれば配列の中身を見るだけで、簡単にコードを記述できるようになります。
あなたも、ぜひトライしてみてくださいね！
Github
https://github.com/linkevery2s/sourcecode