初学者向け！HTTP通信について知ろう

はじめに

HTTP通信について、「なんとなく知っているけど、しっかり理解できていない」という方は意外と多いのではないでしょうか？フロントエンドエンジニアを目指す初学者の方にとって、HTTP通信をはじめとするWebの仕組みを理解することはとても大切です。

しかし、Webの仕組みを学ぼうとすると、その範囲の広さに「何から勉強すれば良いのか」と迷いがちです。Webアプリは多くの技術を組み合わせて動作しているため、一度にすべてを理解するのは簡単ではありません。

そこで、学習を進める際には「この技術について学習する」といった、小さな目標を立ててコツコツと取り組むことが大切です。1つずつ習得し、目標を達成することでモチベーションを保ちやすくなり、結果的に知識が深まっていきます。

この記事で学びステップアップ

この記事では、フロントエンド初学者向けにWebの仕組みの1つであるHTTP通信について解説します。HTTP通信の基本的な仕組みや役割をわかりやすく解説し、最後にはcurlコマンドを使った簡単なハンズオンも用意しています。

フロントエンドエンジニアは、バックエンドやAPIからデータを取得し、それをユーザーに見せる役割を担います。このデータ取得や送信に使われるのがHTTP通信です。その仕組みを理解しておくことで、APIやバックエンドとの連携がスムーズになり、開発効率が大きく向上します。

まずは、基本的なHTTPメソッドやリクエストの仕組みを理解することを1つの小さな目標とし、1つずつ学ぶことで、スムーズに習得できるかと思います。それでは始めましょう！

この記事の目的と対象者

目的

• HTTP通信の基本を理解し、実践に役立てるスキルを身につける

対象者

• フロントエンド初学者
• Web開発をこれから始めようとしている方

HTTP通信とは？

HTTP（Hypertext Transfer Protocol）通信とは、WebブラウザとWebサーバーがテキストや画像などの情報をやり取りするためのルール（プロトコル）にしたがって行われる通信です。この通信のおかげで、私たちはWebサイトでニュースを読んだり、ECサイトで買い物を楽しんだりすることができます。

Webサイト閲覧のながれ

普段、私たちがどのようにWebサイトを閲覧しているかを考えたことはありますか？そのプロセスを簡単に見てみましょう。

Webサイトを表示するためには、そのサイトのデータを持つWebサーバーにアクセスして、表示に必要なデータを取得する必要があります。この一連の通信の仕組みを「クライアントサーバーモデル」と呼びます。

• クライアント

  Webサイトを閲覧するユーザーやデバイス（例：スマホやパソコン）

• サーバー

  Webサイトのデータ（HTML、画像、動画など）を管理し、クライアントに提供するWebサーバー

たとえば、クライアントであるアリスがWebブラウザを使って「エンベーダー」のサイトにアクセスする場合、以下のような通信が行われます。

「クライアントサーバーモデル」の仕組みは、少し難しく感じるかもしれませんが、実は私たちの日常生活の中で頻繁に使われています。この仕組みはWebサイトを閲覧するだけでなく、メールを送るときのやり取りや、動画を視聴する際にも活用されています。Webの世界では欠かせない基本ルールといえるでしょう。

HTTP通信を理解することは大切

この記事の冒頭でもお伝えしたように、フロントエンドエンジニアは、バックエンドやAPIからデータを取得して、それをユーザーに見せる大切な役割があります。この際、データの送受信にはHTTP通信が欠かせません。

例えば、APIからデータを取得したり、ログインフォームのデータを送信する際に、HTTP通信を使用します。このようなプロセスを理解していないと、データの扱いで悩むことが多くなり、スムーズな開発が難しく感じられるかもしれません。HTTP通信を学ぶことで、データの扱いやエラー時の対応がスムーズにできるようになり、コードの品質が向上するだけでなく、開発時間を短縮することにもつながります。

フロントエンドエンジニアの役割については、以下の記事で詳しく解説していますので、ぜひ参考にしてみてください。

• そもそも開発におけるフロントエンドの役割は？

  https://envader.plus/article/469

フロントエンド開発でのHTTP通信の役割

現在のアプリ開発では、HTTP通信を通じてどのようなデータのやり取りが行われているのでしょうか？具体的な例を見ていきましょう。

• フロントエンドとバックエンドの連携

  フロントエンドとバックエンドは、HTTP通信を使ってデータをやり取りすることで連携しています。この通信が、ユーザーの操作を反映し、データベースと繋がる仕組みを支えています。例えば、以下のようなケースがあります。

  • ユーザーが入力した情報をデータベースに登録するため、バックエンドに送信
  • 登録されている日記データをバックエンドを経由して取得し、フロントエンドで表示

• 外部サービス（API）との接続

  HTTP通信は、APIを介して外部サービスと接続する際にも使用されます。APIを使えば、次のようなデータを簡単に取得できます。

  • 外部の地図APIからデータを取得して、アプリ内に表示
  • 現在の天気情報をAPIから取得して、アプリ内に表示

• 動的なデータの提供

  HTTP通信は、アプリが動的なデータをリアルタイムで提供する際にも欠かせません。ユーザーの操作や状況に応じてデータを送受信することで、ユーザーインターフェースを更新する仕組みを支えています。これにより、より便利で直感的なアプリケーション体験が実現します。

  • ショッピングサイトで、検索結果をリアルタイムに表示
  • SNSで、新しい投稿がタイムラインに自動的に反映

このように、さまざまなデータのやり取りをHTTP通信を利用することで実現できます。現在の便利で機能性の高いアプリは、HTTP通信が支えているのですね。

HTTP通信を行うために理解しておきたい3つのこと

HTTP通信を利用してさまざまなことができると知りました。通信には決められたルールや、通信の結果を表すメッセージなどがあります。ここから、通信を行うために理解しておきたい3つのポイントを紹介します。これらを理解することで、スムーズなデータのやり取りが行えるようになります。

1.HTTPメソッド

HTTPメソッドとは、HTTP通信でクライアントがサーバーのリソース（例：データやファイル）に対して「何をしたいか」を表す指示のことです。それぞれのメソッドには決められた役割があり、HTTP通信を行う上で重要なルールとなります。

HTTP通信で使用頻度の高いメソッドは次の通りです。

HTTPメソッドを理解することで、API通信を適切に行い、以下のメリットを得られます。

• エラーやトラブルの回避

  不適切なリクエストによるエラーや予期せぬ動作を防ぐことができます。

• 開発効率の向上

  メソッドを正しく使うことで、コードの意図が明確になり、API通信部分の開発がスムーズになります。

2.HTTP メッセージ（HTTPリクエストとレスポンス）

HTTP通信はクライアントからWebサーバーへ送信されるリクエストと、サーバーからクライアントへ返信されるレスポンスの2種類のメッセージで成立します。それぞれの役割を簡単に見ていきましょう。

• HTTPリクエスト

  クライアントがサーバーに「何をしたいのか」を伝えるためのメッセージです。リクエストの形式は以下となります。

  含まれるもの	内容	詳細内容
  リクエストライン	メソッド URL HTTPバージョン	メソッド：GETなどの操作内容 URL：リクエスト先のパス HTTPバージョン：例 HTTP/1.1, HTTP/2
  ヘッダー	Host User-Agent Accept Authorizations	Host：サーバーのホスト名 User-Agent：クライアント情報 Accept：クライアントが受け入れ可能な形式 Authorizations：認証情報
  空行		ヘッダーとボディの間に挿入される空行 ヘッダーの終わりを表す
  HTTPボディ	空の場合もある	POSTやPUTリクエストで送信されるデータ

• HTTPレスポンス

  サーバーがリクエストに応じて「結果」を返すメッセージです。レスポンスの形式は以下となります。

  含まれるもの	内容	詳細内容
  ステータスライン	HTTPバージョン ステータスコードステータスメッセージ	HTTPバージョン：例 HTTP/1.1, HTTP/2 ステータスコード：処理結果（例：200, 404, 500など） ステータスメッセージ：コードの説明（例：OK, Not Found, Forbiddenなど）
  ヘッダー	Content-Type Content-Length Set-Cookie Date	Content-Type：レスポンスデータの形式（例：JSON、HTML） Content-Length：レスポンスデータのサイズ Set-Cookie：セッション情報や状態を維持するCookie情報 Date：レスポンスの生成日時
  空行		ヘッダーとボディの間に挿入される空行 ヘッダーの終わりを表す
  HTTPボディ	空の場合もある	リクエストの結果として返されるデータ

少し難しくなってしまいましたが、今すぐに全てを把握する必要はありません。このリクエストとレスポンスの内容を把握することは大切なため、開発をする中で通信の結果を見ながら徐々に慣れていきましょう。

この2つを理解することで、通信をする際に必要なデータを正しくリクエストでき、サーバーから適切なレスポンスを受け取れます。また、サーバーからのレスポンスがエラーになった際は、メッセージ情報を見れば、通信の問題点をすぐに見つけることができます。

3.HTTPステータスコード

HTTPステータスコードとはHTTPリクエストの結果を表す3桁の数字です。コード内容を知ることで、HTTP通信で何が起きているかを把握することができます。

クライアントからWebサーバーにリクエストを送信し、サーバーは処理に関するリソースをHTTPヘッダーと共にクライアントへ返信します。この返信される処理結果を表す3桁の数字が、HTTPステータスコードです。

HTTPステータスコードは100番台〜500番台まであり、以下の５つのクラスに分かれています。この番号を確認し、HTTP通信で何が起きているかを把握できるのです。

ステータスコードやその詳細な内容は、以下の記事で詳しく解説しています。

• HTTPステータスコードとは何？確認方法は？

  https://envader.plus/article/29

HTTP通信を正しくスムーズに行うためには、今回紹介した3つのポイントを理解することが大切です。実際の開発や次のセクションで紹介するcurlコマンドを活用し、リクエストやレスポンスを確認しながら少しずつ知識を深めていきましょう。焦らず取り組むことで、確実に実践で活かせるスキルが身につきますよ。

実践！curlコマンドでHTTP通信を体験しよう

ここまでHTTP通信について多くのことを学んできました。このセクションでは、実際に通信を行い、その結果を確認して理解を深めていきましょう。通信にはコマンドラインとcurlコマンドを使用します。コマンドラインはPCにデフォルトでインストールされているもので構いません。

１つずつ段階を踏んで解説していきますので、一緒にHTTP通信を体験してみましょう。

curlコマンドは通信を行うためのツール

curl（カール）コマンドは、コマンドラインからHTTPリクエストを送信して、サーバーとの通信を行うためのツールです。WebサーバーやAPIとの通信を簡単に試すことができるため、開発現場でよく使用されます。

「APIやバックエンドからどんなデータが返されるのか？」や「データ送信ができるか？」などを手軽に試せるので、使いこなせるようになると非常に便利です。

curlを使うと、サーバーにリクエストを送信し、その結果としてレスポンスを受け取るというHTTP通信の基本的な流れを体験できます。ブラウザでは見えない部分も手動で確認できるため、「どのようにデータがやり取りされているのか」を具体的に知ることができます。

curlコマンドを試すことで得られる知識やメリットは次のようなものがあります。

• リクエストとレスポンスの関係が視覚的に確認
• データの送信方法やメソッド、リクエストの仕組みを深く理解
• ステータスコード（例：200 OK, 404 Not Found）やエラーの原因を調べるスキルの習得

curlコマンドの確認方法とインストール（Windows、Mac）

Macには通常、curlコマンドが標準でインストールされています。ターミナルを開いて以下のコマンドを入力して、インストールされているかを確認できます。

curl --version

インストールされていると以下のような結果が出力されます。

curl 8.1.2 (x86_64-apple-darwin23.0) libcurl/8.1.2 (SecureTransport) LibreSSL/3.3.6 zlib/1.2.12 nghttp2/1.55.1

Windowsではcurlがデフォルトで利用可能な場合があります（Windows 10以降）。利用可能か確認するには、コマンドプロンプト（cmd）またはPowerShellでMacと同様のコマンドを入力します。

インストールされていると以下のような結果が出力されます。

curl 8.9.1 (Windows) libcurl/8.9.1 Schannel zlib/1.3 WinIDN

もしインストールされていなければ、curl公式サイトからダウンロードしてインストールすることができます。

https://curl.se/

curlコマンドの基本的な使い方

今回はcurlコマンドで、特定のURLへリクエストを送信して、その結果をコマンドラインに出力します。基本のコマンドは以下の通りです。

curl [オプション] [アクセスするURL]

たとえば、オプション-sをつけてのリクエスト送信は以下のようにします。

curl -s https://www.envader-sample.com/

curlコマンドのオプション

curlコマンドには多くのオプションが準備されています。一緒に使うと、さまざまな形でリクエストを操作することができます。以下はそのオプションの例です。

JSONPlaceholderを使用

このハンズオンではJSONPlaceholderを使用してリクエストを送信します。

JSONPlaceholderは、開発者がAPIを使ってデータのやり取りを練習できる無料のサービスです。

• JSONPlaceholder

  https://jsonplaceholder.typicode.com/

JSONPlaceholderでは、以下のHTTPメソッドとエンドポイントを使用し、リクエストを送信できます。

GETリクエストを送信

では、curlコマンドを使用してHTTP通信を始めましょう。まずはGETリクエストを実行し、データを取得します。JSONPlaceholderのAPIエンドポイント/posts/1へGETリクエストを送信し、レスポンスをコマンドラインに出力します。

curl https://jsonplaceholder.typicode.com/posts/1

このエンドポイントでは、JSONPlaceholderから特定の投稿データを取得できます。実際の開発では、ブログ記事の詳細情報や商品データを取得する際などに使用します。

レスポンスとして、以下のような投稿データ（JSON形式）が出力されているかと思います。

{
  "userId": 1,
  "id": 1,
  "title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
  "body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto"
}

このようにAPIへリクエストを送信し、受信できるデータの内容を簡単に確認することができます。データ取得のためのコードを作成せずに、データの内容を確認できるのは便利ですね。

POSTリクエストを送信

次にPOSTメソッドを使用して、サンプルデータを送信します。POSTなどGET以外のメソッドは、curlコマンドに-Xオプションをつけて指定します。

送信するデータはJSON形式で指定します。JSON（JavaScript Object Notation）は、API通信で広く使用されるデータ形式で、キーと値のペアで構成されています。

JSON形式を指定するには、-Hオプションと"Content-Type: application/json"と追記し、-dオプションをつけ送信するデータを入力します。

curl -X [メソッド] -H "Content-Type: application/json" -d "[POSTするデータ]" [アクセスするURL]

実際に、/postsエンドポイントへデータを送信してみましょう。オプションが多くなるとコードが長くなるため、\（改行コード）をつけて見やすくしています。

curl -X POST -H "Content-Type: application/json" \
     -d '{"title":"エンベーダー","body":"エンジニア予備軍のためのITインフラ学習ゲーム","userId":1}' \
     https://jsonplaceholder.typicode.com/posts

コマンドを実行すると以下の結果が出力されます。サーバーから、POSTリクエストされたことを示すJSONデータと、新しい投稿のID（"id": 101）などが出力されます。

{
  "title": "エンベーダー",
  "body": "エンジニア予備軍のためのITインフラ学習ゲーム",
  "userId": 1,
  "id": 101
}

POSTリクエストを送信しましたが、JSONPlaceholderの実際のサーバーデータは更新されていません。POSTメソッドを使用し、データを送信する擬似的な体験ができました。

エラーとステータスコードの確認

最後に、わざとエラーを発生させて、HTTP通信でどのようなデータが返されるかを確認してみましょう。

存在しないURLにGETリクエストを送信します。/noexistendpointはJSONPlaceholderに存在しないエンドポイントです。今回は-Iオプションを使用して、レスポンスヘッダーのみを表示します。

curl -I https://jsonplaceholder.typicode.com/noexistendpoint

リクエストを実行すると、次のようなレスポンスが返ってきます。

HTTP/2 404 
...以下略

HTTPバージョンHTTP/2でリクエストが送信され、HTTPステータスコード404エラーが発生していることがわかります。HTTPステータスコード404は「リクエストに問題がある」ということでしたね。これにより、エラーの原因は、クライアント（リクエストを送った側）の「URLの誤り」などであると知ることができます。

curlコマンドでHTTP通信の理解を深める

このハンズオンでは、curlコマンドを使って基本的なHTTPメソッドであるGETとPOSTを実行し、そのレスポンスをターミナル上で確認しました。これにより、HTTP通信でどのようなデータがやり取りされているのかを実際に目で見て理解することができ、データの送信方法や正しいメソッドを使った通信の仕組みを学ぶことができたと思います。

さらに、エラーが発生した際のレスポンスを確認し、HTTPステータスコードを使って「どのようなエラーが起きているのか」を知る方法も体験しました。

curlコマンドは、今回紹介した基本操作以外にも、ヘッダーのカスタマイズやファイルダウンロードなど、多くの機能を持つ便利なツールです。このハンズオンをきっかけに、ご自身でもAPIやWebサイトへのリクエストを試しながら、HTTP通信の理解をさらに深めてみてください！

この記事で学んだこと

ここまでHTTP通信について学んできました。最後に大切なポイントを振り返りましょう。

HTTP通信とは

HTTP（Hypertext Transfer Protocol）通信とは、WebブラウザとWebサーバーが情報をやり取りするためのルール（プロトコル）にしたがって行われる通信です。

なぜHTTP通信を学ぶ必要があるのか

フロントエンドエンジニアは、バックエンドやAPIからデータを取得してユーザーインターフェースを作る役割を担います。このデータ取得や送信に使われるのがHTTP通信です。HTTP通信を学ぶことで、データの扱いやエラー時の対応がスムーズにできるようになります。

HTTP通信を行うために理解しておきたい3つのこと

• HTTPメソッド

  HTTPメソッドとは、HTTP通信でクライアントがサーバーのリソースに対して「何をしたいか」を表す指示のことです。

• HTTP メッセージ（HTTPリクエストとレスポンス）

  HTTP通信はクライアントからWebサーバーへ送信されるリクエストと、サーバーからクライアントへ返信されるレスポンスの2種類のメッセージで成立します。

• HTTPステータスコード

  HTTPステータスコードとはHTTPリクエストの結果を表す3桁の数字です。コード内容を知ることで、HTTP通信で何が起きているかを把握することができます。

この記事を通じて、HTTP通信の基本的な仕組みやその重要性について理解を深めていただけたのではないでしょうか。フロントエンドエンジニアにとって、HTTP通信の知識はバックエンドやAPIと連携する上で欠かせないスキルです。今回学んだ内容を基礎として、実際の開発やツールを使った練習を重ねることで、より実践的なスキルを身につけていきましょう！

参考資料

以下のリンクは、この記事で説明した手順や概念に関連する参考資料です。より詳しく学びたい方は、ぜひご覧ください。

• Wikipedia Hypertext Transfer Protocol

  https://ja.wikipedia.org/wiki/Hypertext_Transfer_Protocol

  https://ja.wikipedia.org/wiki/CURL

• MDN web docs

  https://developer.mozilla.org/ja/docs/Web/HTTP/Status

  https://developer.mozilla.org/ja/docs/Web/HTTP/Methods

  https://developer.mozilla.org/ja/docs/Web/HTTP/Messages

• アイティーエム - HTTPステータスコード一覧とリクエストとレスポンスの意味を解説

  https://www.itmanage.co.jp/column/http-www-request-response-statuscode/