GitBookjs-primerHTTP通信ローカルサーバーでアプリケーションが実行できるようになったので、次はGitHubのAPIを呼び出す処理を実装していきます。GitHubのAPIを呼び出すためにはHTTP通信をする必要があります。APIという機能を使います。APIはHTTP通信を行ってリソースを取得するためのAPIです。APIを使うことで、ページ全体を再読み込みすることなく指定したURLからデータを取得できます。APIは同じくHTTP通信を扱うXMLHttpRequestと似たAPIですが、より強力で柔軟な操作が可能です。リクエストを送信するためには、fetchメソッドを利用します。fetchメソッドにURLを与えることで、HTTPリクエストが作成され、サーバーとのHTTP通信を開始します。GitHubにはユーザー情報を取得するAPIとして、https://api.github.com/users/GitHubユーザーIDというURLが用意されています。GitHubのユーザーIDには、英数字と-(ハイフン)以外は利用できないため、ユーザーIDはencodeURIComponent関数を使ってエスケープしたものを結合します。encodeURIComponentは/や%などURLとして特殊な意味を持つ文字列をただの文字列として扱えるようにエスケープする関数です。次のコードでは、指定したGitHubユーザーIDの情報を取得するURLに対してfetchメソッドで、GETのHTTPリクエストを行っています。"任意のGitHubユーザーID";fetch(`https://api.github.com/users/${encodeURIComponent(userId)}`);レスポンスの受け取りGitHubのAPIに対してHTTPリクエストを送信しましたが、まだレスポンスを受け取る処理を書いていません。次はサーバーから返却されたレスポンスのログをコンソールに出力する処理を実装します。fetchメソッドはPromiseを返します。このPromiseインスタンスはリクエストのレスポンスを表すResponseオブジェクトでresolveされます。送信したリクエストにレスポンスが返却されると、thenコールバックが呼び出されます。次のように、Responseオブジェクトのstatusプロパティからは、HTTPレスポンスのステータスコードが取得できます。ResponseオブジェクトのjsonメソッドもPromiseを返します。これは、HTTPレスポンスボディをJSONとしてパースしたオブジェクトでresolveされます。ここでは、書籍用に用意したjs-primer-exampleというGitHubアカウントのユーザー情報を取得しています。});エラーハンドリングHTTP通信にはエラーがつきものです。APIを使った通信においても、エラーをハンドリングする必要があります。サーバーとの通信に際してネットワークエラーが発生した場合は、ネットワークエラーを表すNetworkErrorオブジェクトでrejectされたPromiseが返されます。thenメソッドの第二引数かcatchメソッドのコールバック関数が呼び出されます。});一方で、リクエストが成功したかどうかはResponseオブジェクトのokプロパティで認識できます。okプロパティは、HTTPステータスコードが200番台であればtrueを返し、それ以外の400や500番台などならfalseを返します。次のように、okプロパティがfalseとなるエラーレスポンスをハンドリングできます。});ここまでの内容をまとめ、GitHubからユーザー情報を取得する関数をfetchUserInfoという名前で定義します。});}index.jsでは関数を定義しているだけで、呼び出しは行っていません。ページを読み込むたびにGitHubのAPIを呼び出すと、呼び出し回数の制限を超えるおそれがあります。呼び出し回数の制限を超えると、APIからのレスポンスがステータスコード403のエラーになってしまいます。そのため、HTMLドキュメント側に手動でfetchUserInfo関数を呼び出すためのボタンを追加します。ボタンのclickイベントでfetchUserInfo関数を呼び出し、取得したいユーザーIDを引数として与えています。例としてjs-primer-exampleという書籍用に用意したGitHubアカウントを指定しています。</body></html>準備ができたら、ローカルサーバーを立ち上げてindex.htmlにアクセスしましょう。ボタンを押すとHTTP通信が行われ、コンソールにステータスコードとレスポンスのログが出力されます。開発者ツールのネットワークパネルを開くと、GitHubのサーバーに対してHTTP通信が行われていることを確認できます。APIと同じくHTTP通信を行うためのAPIです。APIが標準化される以前は、ブラウザとサーバーの間で通信を行うにはXHRを使うのが一般的でした。APIによるfetchUserInfo関数は、XHRを使うと次のように書けます。APIはXHRを置き換えるために作られたもので、多くのユースケースではXHRを使う必要はなくなっています。APIが実装されていないため、ブラウザの互換性を保つためにXHRを使う場面もまだあります。XHRの詳しい使い方については、XHRの利用についてのドキュメントを参照してください。APIの呼び出しに対するエラーハンドリングを行ったfetchUserInfo関数を宣言し、ボタンのクリックイベントで呼び出した。