0%

Programmingプログラミングナレッジ

Posted:2019.03.19

fetch APIで外部のJSONデータを取得する

過去記事「外部のJSONデータをjQueryを使ってHTMLへ出力する」などでも外部APIや静的ファイルでのJSONデータを取り扱う方法をまとめていましたが、今回はfetch APIという機能を使ってJSONデータを取得する方法についてまとめていきたいと思います。

 

fetch APIはブラウザに含まれるメソッドのひとつで、jQueryでいうgetJSON()のようなメソッドが実現できます。そのほかにも方法はありますが、ブラウザの機能が充実してきている現在において、jQueryを使わない場合には一般的になってきています。今回はサンプルにこのようなJSONを使う想定で進めていきます。

【JSON】

[
 {
  "id": "001",
  "name": "りんご",
  "en": "apple"
 },
 {
  "id": "002",
  "name": "みかん",
  "en": "orange"
 },
 {
  "id": "003",
  "name": "ぶどう",
  "en": "grape"
 }
]

 

実装方法も簡単で、下記のようにfecth()メソッドに対象となるjsonのパスを指定し、then()で繋げてjsonをオブジェクト形式に変換するという形になります。

【javascript】

const DATA_URL = './sample.json';
fetch(DATA_URL)
 .then(function(response){
  return response.json();
 })
 .then(function(jsonData){
  // JSONデータを扱った処理など
  console.log(jsonData);
 });

 

また、ES6の仕様であれば、アロー関数が使えます。アロー関数を使う形で書くとこのような形になります。

【javascript(ES6)】

const DATA_URL = './sample.json';
fetch(DATA_URL)
 .then((response) => response.json())
 .then((jsonData) => {
  // JSONデータを扱った処理など
 });

 

実際にコンソールに出力してみると、このようにJSONデータの中身が確認でき、取得できているのがわかります。

【console】

{ id: "001", name: "りんご", en: "apple" }
​{ id: "002", name: "みかん", en: "orange" }
​{ id: "003", name: "ぶどう", en: "grape" }

 

また、複数の異なるJSONデータもソースとなるパスを配列の形に収めることでまとめて取得できるようになります。その場合には、各JSONデータごとに処理を行うのでforEachで繰り返しの処理を行います。

【javascript】

const DATA_URLS = [
 './sample_01.json',
 './sample_02.json',
 './sample_03.json'
];
DATA_URLS.forEach(function(dataUrl){
 fetch(dataUrl)
  .then(function(response){
   return response.json();
  })
  .then(function(jsonData){
   // JSONデータを扱った処理など
   console.log(jsonData);
  });
});

 

実際にコンソールに出力するとこのような形でそれぞれのJSONデータを取得することができました。

【console】

// sample_01.json { id: "001", name: "りんご", en: "apple" } ​{ id: "002", name: "みかん", en: "orange" } ​{ id: "003", name: "ぶどう", en: "grape" }
// sample_02.json { id: "001", name: "自動車", en: "car" } ​{ id: "002", name: "電車", en: "train" } ​{ id: "003", name: "飛行機", en: "airplane" }
// sample_03.json { id: "001", name: "東京", en: "tokyo" } ​{ id: "002", name: "大阪", en: "osaka" } ​{ id: "003", name: "名古屋", en: "nagoya" }

 

このようにfetch APIを使うと簡単にJSONデータが取得でき、その後のデータに対しての処理も書きやすいなどのメリットがあります。外部APIからデータを取得する場合にはJSON形式も多いかと思いますのでいろいろ使うシーンは多いのではないでしょうか。

 

(参考にさせて頂いたサイト)
【JavaScript】fetchを使ったAPIデータの取得方法

author
この記事を書いた人オガワ シンヤ
FacebookTwitter

DesignSupply.代表 / ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中!制作中はチョコレートが欠かせない三十路Webクリエイター。

制作のご依頼やお問い合わせ・パートナー業務提携のご相談はこちら

デザインやウェブ制作についてのご依頼やご相談、その他お問い合わせなどもお気軽にご連絡ください。フットワークの軽さやレスポンスの早さ、また豊富な経験や知識、技術を活かした対応力といったフリーランスクリエイターの強みでクライアント様、パートナー企業様のお力になります。デザインからコーディングやWordPress実装といったウェブサイト構築はもちろん、写真撮影や動画編集、コンテンツ制作からサイト運用サポートまで一括してお任せください。

ホームページ制作のご検討やウェブ運用でお悩みの経営者様や企業のウェブ担当者様をはじめ、個人で店舗を営んでいらっしゃるオーナー様、フリーで活動されているビジネスオーナー様はもちろんのこと、リソース不足でお困りの制作会社様、またクリエイターをお探しの代理店様も大歓迎です。

コンタクトをご希望の方はお手数ですが、下記よりお問い合わせフォームのページへアクセスしていただき、必要事項を入力の上メッセージを送信してください。確認でき次第すぐに折り返しご連絡致します。

こんな記事も読まれています

コメントもお気軽にどうぞ

記事に関するご質問やご意見などありましたら下記のコメントフォームよりお気軽に投稿ください。なおメールアドレスは公開されませんのでご安心ください。また、* が付いている欄は必須項目となります。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

CAPTCHA


ページトップへ
大阪市天王寺区のホームページ制作デザイン事務所(SOHO)DesignSupply.【デザインサプライ】