みなさん、こんにちは。
MEGIDO(メギド)です。

直近で携わっている案件で「Web API」を利用する機会がありました。
Web APIについては何となく「ある企業がオープンに公開している情報を取得して利用できるデータ」みたいな
イメージしかなかったので今回を期にWeb APIについて簡単に調査。

また今回は自分のようなWeb API初心者の方が理解を深める為に
JavaScriptでAPIを取得する方法も紹介します!

 

「Web APIとは?」

 

Web APIとは「Web Application Programming Interface 」の略称です。

Web APIという言葉自体に明確な定義はないようですが、
IT用語辞典によると


Web APIとは、コンピュータプログラムの提供する機能を
外部の別のプログラムから呼び出して利用するための
手順・規約(API:Application Programming Interface)の類型の
一つで、HTTPなどWebの技術を用いて構築されたもの。

と記載されています。

自分が何となくでイメージしていた通りで
Webサイトに外部サイトの提供する機能や情報を組み込んだり、
アプリケーションソフトからWeb上で
公開されている機能や情報を利用する際などに使用されます。

また調べるまで知らなかったのですが、
Web APIで利用できるデータは多様で
XMLやHTML、JSON、単純なテキスト形式やCSV形式、
各種の画像ファイル形式などが用いられます。

個人的にはJSONのイメージしかありませんでした。

公開されているAPIは無数にあり有名なところでいくと
「Amazon Store API」
「Facebook API」
「Twitter API」などがあります。

このようなAPIを活用することで
Webサービスを効率的に開発することが可能になります。

 

JavaScriptで簡単にAPIを取得する方法

 

Web APIのことが分かっても利用できなければ意味がないかも。
ということで実際にWeb APIをJava Scriptで取得する方法をお伝えします。

面倒な登録など無しに簡単に利用することができる
「Random User Generator」を利用してJava Scriptでデータを取得してみましょう。

Random User Generatorはダミーの「ユーザー情報」を、
APIとして提供しているサービスです。

今回は本当に単純にJava Sctiptで取得したデータを
ログに表示させるコードを書きました。

Java ScriptでWeb APIのデータを取得する方法はたくさんありますが、
今回はfetchメソッドを使用しています。

fetchメソッドの詳細については下記のURLを参考にしてみてください。

https://developer.mozilla.org/ja/docs/Web/API/Fetch_API/Using_Fetch

本来であれば「console.log(text);」のところを
Web APIから取得したデータを整形するようなコードを書き
ブラウザに表示させたりすることが多いと思います。

fetchメソッドを利用すればWeb APIのデータを簡単に取得できるのでとても便利ですね。

 

まとめ

今回は「Web APIとJava ScriptでのWeb APIのデータ取得について」簡単に紹介しました。
Web APIを使えばアイデア次第でオリジナルサービスなんかも開発できるので
自分もWeb APIを使用してサービスを作ってみたいなと思いました。

それでは今回はここまで。
最後までお読みいただきありがとうございました。

 

まとめ

SHARE

TEXT BY MEGIDO

RECOMMENDED POSTこの記事もおすすめ!