プログラミング

「JavaScript攻略！WebAPIについて徹底解説します」に参加しました

 

こんにちは、らいか(@hideiwa1)です。

本日は松田信介さん(@xhackjp1)のビデオ講座「JavaScript攻略！WebAPIについて徹底解説します」に参加しましたので、その感想などを書いていきます。

目次
  1. HTTPとは？APIとは？
  2. HTTPリクエストの送信
  3. 非同期通信
  4. 最後に

HTTPとは？APIとは？

まず基本として、HTTPとは何か？という事から。

簡単に言うと、HTTPとは「ネットを介してテキストをやり取りする仕組み」です。

htmlやjavascriptなどもテキストデータなので、それをサーバーから取得して、ブラウザで処理をしてページを表示させています。

主なメソッドとしては「GET」や「POST」などがあり、データの送受信を行うことができます。

APIとは「サービスとサービスをつなぐ仕組み」で、第3者がデータを利用できるようにしたものです。
そして、HTTPリクエストを通じて行うのが、webAPIです。

webAPIは、twitterやgoogle,ぐるなびなど様々なサービスで提供されており、利用することができます。

HTTPリクエストの送信

javascriptではHTTPリクエストを送信できるメソッドがあり、それが

  • XMLHttpRequest
  • fetch

の2種類です。
その他、jQueryならAjax、vueならAxiosなどのメソッドも利用できます。

データの送受信に使われるフォーマットは、JSONという形式です。
APIのインターフェースとしては、RESTやGraphQLなどがあります。
（詳しくは
　　RESTの課題とGraphQL 〜GraphQLを簡単に使ってみる〜　
　こちらの記事が分かりやすいと思います）

非同期通信

webAPIを使用する際、注意しなくてはいけないのが通信にかかる時間です。

通信を行う際は少なからず時間がかかり、取得するデータが多ければその分時間がかかることになります。
その通信中に、ブラウザの処理が止まってしまってはユーザーの使い勝手が悪くなってしまいます。

そこで利用するのが、非同期処理です。

function sample1(){
  return new Promise(resolve, reject){
    fetch("URL", {
      method: "GET", 
    }). then( responce => responce.text())
    .then(text => resolve(text));
  }
}

async function call(){
  const result = await sample1();
  console.log(result);
}

console.log('A');
call();
console.log('B');

結果：A　B　text

通常、プログラムの処理は上から順に行われますが、ここではwebAPIの結果を待たずに次の処理へ進んでいます。

処理の流れとして、

call();
　　async関数call()を呼び出す

async function call()
　　Promiseオブジェクトを返し、処理を先に進める
　　処理完了後に、Promiseオブジェクトのresolve()を返す

await sample1()
　　関数sample1()を実行
　　Promiseオブジェクトのresolve()が帰ってくるまで処理を止める。

function sample1(){
  return new Promise(resolve, reject){
　　Promiseオブジェクトを返す
　　処理完了後に、Promiseオブジェクトのresolve(text)を返す

Promiseは、非同期処理の完了を待って結果を取得するオブジェクトであり、成功時にはresolve()、エラー時にはreject()を返します。

async functionは、Promiseオブジェクトを返します。つまり、次の2つは同じ意味となります。

async function test1(){
  return 'test';
}

function test2(){
  return new Promise(resolve){
    resolve('test');
  }
}

awaitは、Promiseが返ってくるまで処理を止めます。

これらのasync/await/promiseの処理を使い、ユーザーの利便性を落とさずにwebAPIの利用をしていきます。

最後に

今までAjaxやaAxiosなどは利用していましたが、APIとは何かについては曖昧なままでした。

今回の講義では、webAPIの概念やasync/awaitを使った非同期処理の方法を学ぶことができたので、有意義なものとなりました。

今後とも勉強会に参加して、プログラミングの理解を深めたいと思います。

javascript
RELATED POST