【JavaScript】Fetch APIの簡単な使い方

その他
code

ネットで公開されているサンプルを試す

ゼロからはじめるJavaScript(8) ブラウザのFetch APIで天気情報を取得してみよう | TECH+
https://news.mynavi.jp/techplus/article/zerojavascript-8/

上記記事で公開されているサンプルが、Fetch APIの使い方としてはわかりやすいと思います。

JSONファイルを読むように変更

「天気APIにアクセス」の部分を、こちらで用意したJSONファイルを読むように変更します

<DOCTYPE html>
<meta cahrset="utf-8">
<script>
// 天気APIにアクセス --- (*1)
const api = 'https://ex.example.com/api/tenki319.json'
fetch(api)
  .then(res => res.json())
  .then(data => tenki(data))

// 結果を表示 --- (*2)
function tenki(data) {
  let s = ''
  const tokyo = data[319] // 東京の情報 --- (*3)
  // 1日ずつのデータを表示 --- (*4)
  for (let row of tokyo) {
    console.log(row) // デバッグ表示
    s += `
      <h3>${row['date']}の天気</h3>
      <ul><li>${row['forecast']}</li>
      <li>降水確率: ${row['poptimes']}%</li></ul>
    `
  }
  document.write(s)
}
// via https://news.mynavi.jp/techplus/article/zerojavascript-8/
</script>

↑　HTMLファイル
↓　JSONファイル

{
    "mkdate": "2022\/07\/24 14:50:39",
    "319": [
        {
            "date": "24日(日)",
            "forecast": "晴時々曇",
            "mintemp": "33",
            "maxtemp": "33",
            "poptimes": "-\/-\/10",
            "waves": "１メートル",
            "winds": "南の風　２３区西部　では　南の風　やや強く",
            "weathers": "晴れ　時々　くもり"
        },
        {
            "date": "25日(月)",
            "forecast": "晴時々曇",
            "mintemp": "25",
            "maxtemp": "25",
            "poptimes": "-\/-\/10",
            "waves": "０．５メートル　後　１メートル",
            "winds": "南の風　２３区西部　では　南の風　やや強く",
            "weathers": "晴れ　朝晩　くもり"
        },
        {
            "date": "26日(火)",
            "forecast": "曇",
            "mintemp": "26",
            "maxtemp": "33",
            "poptimes": "-\/-\/-",
            "waves": "１メートル",
            "winds": "南の風　やや強く",
            "weathers": "くもり"
        },
        {
            "date": "27日(水)",
            "forecast": "曇一時雨",
            "mintemp": "26",
            "maxtemp": "31",
            "poptimes": "-\/-\/-",
            "waves": "-",
            "winds": "-",
            "weathers": "-"
        }
    ]
}

JSONファイルは、「tenki319.json」という名前で、https://ex.example.com/api/　に配置（転送）してください。

実行するとこんな感じになるかと思います。

blocked by CORS policy エラー

レンタルサーバーの環境によっては、動作しない場合があります。

動作しない場合は、ブラウザーの開発者ツール（F12)を開いて、コンソールを確認してみてください

02.html:1
Access to fetch at ‘https://ex.example.com/api/tenki319.json’ from origin ‘null’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.
If an opaque response serves your needs, set the request’s mode to ‘no-cors’ to fetch the resource with CORS disabled.

ex.example.com/api/tenki319.json:1
Failed to load resource: net::ERR_FAILED

02.html:7
Uncaught (in promise) TypeError: Failed to fetch
at 02.html:7:1

blocked by CORS policy　エラーが出てる場合は、以下の方法で動作するようになるかと思います。

Header set Access-Control-Allow-Origin "*"

.htaccessに上記１行を追記して、JSONファイルと同じ場所に配置してください。

人気記事一覧を作成する

<DOCTYPE html>
<meta cahrset="utf-8">
<script>
window.addEventListener('DOMContentLoaded', () => {

const api = 'https://ex.example.com/api/popular-posts.json'; 

fetch(api, {method: 'GET'})
  .then((res) => {
    console.log( res );
    return res.json(); 
  })
  .then((data) => {
    disp(data); 
  })
  .catch((err) => {
    console.error( err );
  });

function disp(data) {
  let s = '';
  const posts = data["popular"] ;

  for (let row of posts) {

    s += `
      <h3>${row['title']}</h3>
      <p>${row['url']}</p>
      <p><img src="${row['img_url']}" ></p>
    `;
  }
  s = '<div class="ccard list-group">' + s + '</div>';
  
  var element = document.getElementById("popular-posts");
  element.insertAdjacentHTML('beforeend',s);

}
});
</script>

ここに表示される
<div id="popular-posts"></div>

↑　HTMLファイル
↓　JSONファイル

{"popular":[
	{"url":"https://blog2.k05.biz/2016/05/netsu-tube.html",
	 "title":"ダイソーで、熱収縮チューブを購入した",
	 "img_url":"https://1.bp.blogspot.com/-XvxDQ18gYUE/V0aT5MHaM5I/AAAAAAAAgZI/uIHelfH-8Ic_jU7itn8hB21Vj1FJaQjlwCKgB/s150-c/netsu-tube01.jpg"},

	{"url":"https://blog2.k05.biz/2020/01/leather-sticker-patch.html",
	 "title":"【100均】合皮シールで補修してみる",
	 "img_url":"https://1.bp.blogspot.com/-YY12W2SopwQ/XigBFe6MpzI/AAAAAAAAwxs/aFI7o_KkJOUL7Da_KQHR3YlS4N88UyXqQCKgBGAsYHg/s150-c/leather-sticker-patch01.jpg"},
	{"url":"https://blog2.k05.biz/2013/07/petbottle-jositu.html",
	 "title":"凍ったペットボトルで、除湿する方法 【扇風機併用で簡易クーラー?!】",
	 "img_url":"https://1.bp.blogspot.com/-Q5-s-JYINPA/Vd8-2PNTGCI/AAAAAAAAYeo/HiShmf7EY3I/s150-c/petbottle-jositu01.jpg"},

	{"url":"https://blog2.k05.biz/2013/05/sudare.html",
     "title":"すだれが取付できないサッシの場合・・・",
      "img_url":"https://2.bp.blogspot.com/-5JMguTZrML8/VeHPmWMhZaI/AAAAAAAAZ8c/sJMahyFI2yE/s150-c/sudare101.jpg"},

	{"url":"https://blog2.k05.biz/2022/04/povo-180days-topping.html",
     "title":"【povo2.0】180日が経過した。通話トッピング購入。",
     "img_url":"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSPgsrfE7GWN6pgpVWSPhxz2ULpBrgAc2bSrB2zE6obwQHTIbKNd8IJtnZPS4eX63lQ5I0t8Bhy72JIJkXVWLG0bR1ctf-kr018WZiKQOVlDAv_snR4lZMzwsOulALqD_rJQUD_F3Yo2IgqaRcP3lffZKHWXYzsiyTYGHCWOJuBFX8wSBtf7V8VtyX-Q/s150-c-rw/povo-180days-topping01.webp"}

]}

JSONファイルは、「popular-posts.json」という名前で、https://ex.example.com/api/　に配置（転送）してください。

実行すると、このように表示されます。

PHPでJSONファイルを作成

//------------------------
// json出力
//-------------------------
$data = array("popular" =>$popular);

$json=json_encode($data, JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES );

$f = "./api/popular-posts.json";
file_put_contents($f,$json);

json_encode を使うと簡単です。フラグには、JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHESを指定するとよいかも。

連想配列をjson_encodeでJSONデータにしてくれます。

※注意
人気記事一覧の連想配列を作成する部分は、上記のソースコードには含まれてません

ブログパーツ化

・CRONで１日１回、Google Analytics Reporting API　をつかってPHPで、popular-posts.jsonファイルを作成
・Wordpressのウィジェットで、Fetch APIを用いて、popular-posts.jsonファイルを読み込む

こんな感じで、かなり簡単に作成できます。

動画での説明

スポンサーリンク

関連記事