こんにちは、らいか(@hideiwa1)です。
本日は松田信介さん(@xhackjp1)のビデオ講座「JavaScript攻略！WebAPIについて徹底解説します」に参加しましたので、その感想などを書いていきます。
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を使った非同期処理の方法を学ぶことができたので、有意義なものとなりました。
今後とも勉強会に参加して、プログラミングの理解を深めたいと思います。