JavaScriptによるhttprequestの送信方法について現役エンジニアが解説【初心者向け】

初心者向けにJavaScriptによるhttprequestの送信方法について解説しています。ここではサーバーとAJAXの基本、HTTPRequestを利用してサーバーに要求する場合の書き方を説明します。サンプルで動作を確認してみましょう。

TechAcademyマガジンは受講者数No.1のオンラインプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。

JavaScriptによるhttprequestの送信方法について、TechAcademyのメンター(現役エンジニア)が実際のコードを使用して初心者向けに解説します。

 

そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。

 

なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。

 

田島悠介

今回は、JavaScriptに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

httprequestの送信方法について詳しく説明していくね!

大石ゆかり

お願いします!

 

目次

 

サーバーとは

要求(リクエスト)に応答するソフトウェアやコンピュータのことです。
例えば、WebサーバーはURLで対象のサーバーにリクエストを送り、Webサイトの情報を返すという動作になります。

 

[PR] フロントエンドで挫折しない学習方法を動画で公開中

AJAXとは

Asynchronous JavaScript and XMLの略です。平たく言うと、JavaScriptで非同期に通信をすることです。
通信にはXMLという言語だけではなく、ホームページなどに使われるHTMLや、JSONというデータフォーマットなどのいろいろなデータが通信できます。

 

HTTPRequestとは

HTTPという通信プロトコルのリクエストのことです。
平たく言うと、通信の種類にHTTPという規格を使って要求を出すということになります。

 

HTTPRequestの送信方法とは

JavaScriptではHTTP通信の操作が簡単におこなえるFetchというAPIが用意されています。
APIはApplication Programming Interfaceの略で、平たく言うと、機能の集まりです。
つまり、Fetchという機能を使えば楽に通信ができるということです。

 

HTTPRequestを利用してサーバーに要求してみよう

JSON OKIBAというサイトでJSON形式のデータを返してくれるサイトから、下記のサンプルのURLに通信をする例を紹介します。

https://jsondata.okiba.me/v1/json/demo01

それでは、Fetchを使って通信をおこないます。
fetchメソッドの引数にURLを渡すことで、そのURLに通信がおこなわれます。

const URL = 'https://jsondata.okiba.me/v1/json/demo01';

fetch(URL)
.then( response => response.json() )
.then( responseData => console.log(responseData) );

fetchメソッドで通信をおこなって取得した応答データはPromiseというオブジェクトで返されます。
Promiseに慣れていない方は、.thenと記述するとその後の処理がおこなわれる程度に認識してください。

fetchの後の.thenでresponseという名前の変数に通信した応答データが格納され、response.jsonと記述することでJSONデータとして読み込んだPromiseオブジェクトを返します。

2つ目の.thenで読み込んだJSONデータをコンソールに表示しています。
今回は指定したURLから返されるJSON形式のデータがコンソールに表示されます。

 

まとめ

HTTPリクエストで通信をおこない、データを取得するまでを紹介しました。

 

監修してくれたメンター

横山茂雄(よこやましげお)

フリーエンジニアとして活動中。サーバーサイドからフロントまで時代の波に合わせてスキルを変化させてきました。

言語、フレームワーク、DB、現場、いずれも転々としながら、筋トレも欠かさない体育会系エンジニアです。TechAcademyジュニアのゲームアプリコースを担当しています。

 

大石ゆかり

内容分かりやすくて良かったです!

田島悠介

ゆかりちゃんも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

 

TechAcademyでは、初心者でもJavaScript・jQueryを使ったWebサービス公開を習得できるオンラインブートキャンプJavaScript/jQuery講座を開催しています。

挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。