​​JavaScript道場：WebAPI

​​APIとは

​​application programming interface
​​サービスとサービスをつなぐ(interface/境界面)
​​サービスの使用を公開して第三者が利用できるようにする
​​
​​HTTPリクエストを通じて外部のサービスを利用するのがWebAPI

​​HTTPについて

​​HyperText Transport Protocol

​​どうして、だれが、なんのために

​​ティムバーナーズリー  HTTPの生みの親
​​
 
ティム・バーナーズ＝リー - Wikipedia
ja.wikipedia.org
ティム・バーナーズ＝リー - Wikipedia • ja.wikipedia.org
​​
​​論文を他の大学からネットを介して読みたかったので、生まれた
​​HTML もテキストデータなので、HTMLをやりとりするときにも使われます。
​​ブラウザ = HTTPのクライアント
​​
​​ブラウザもHTTPでデータを取ってきている

​​通信メソッド

​​重要なのは GET/POST
​​
​​GET: 情報をサーバーから取ってくる
​​POST: 情報をサーバーに送る
​​
​​etc … DELETE/PUT

​​Hypertext Transport Protocol

​​JavaScriptはHTTPリクエストを送信できる

​​HTTPリクエストを介して他のサービスからデータを取得して利用する = WebAPI
​​

​​XMLHttpRequest

​​function reqListener () {
​​  console.log(this.responseText);
​​}
​​
​​var oReq = new XMLHttpRequest();
​​oReq.addEventListener("load", reqListener);
​​oReq.open("GET", "https://parklot-api.herokuapp.com/api/v1/campaigns/");
​​oReq.send();

​​fetch

​​const BASE_URL = "https://api.gnavi.co.jp/RestSearchAPI/v3/"
​​const API_KEY = "60e919407001d7a00adc7f4a8764a2d9"
​​let url = `${BASE_URL}?keyid=${API_KEY}&freeword=焼肉&hit_per_page=1`
​​
​​fetch(url, {
​​  method: "GET",
​​}).then(response => response.text())
​​.then(text => {
​​  console.log(text);
​​});

​​JSON

​​データフォーマット、WebAPIでよく使われるデータフォーマットがJSONです。