実践的なウェブ開発：ハッカソン体験から学ぶHTTPメソッド(GETとPOST)の重要性と使い方

## はじめに
ウェブ開発やAPI設計において、HTTPメソッドは重要な役割を果たします。特に「GET」と「POST」は、データの送受信においてよく使用されるメソッドです。

普段はネットワーク通信を解析する際に、なんとなくGETとPOSTの処理を理解していましたが、ITスクールのハッカソンに参加した際に、データベース側を意識して処理を考えることができたのはとても良い経験でした。

本記事では、HTTPメソッドの基本を整理し、GETとPOSTの特性について詳しく説明します。

## 知識整理
### HTTPメソッドの概要
HTTPメソッドは、クライアントとサーバー間で行われる通信の種類を指定します。

![スクリーンショット 2024-10-31 23.16.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3662571/917249f5-0ddf-347f-5650-a2d3751f9b3d.png)
引用画像：https://www.japanitguide.com/html-reference/HTTP-%E3%83%A1%E3%82%BD%E3%83%83%E3%83%89:-GET-%E3%81%A8-POST.html

:::note
**主なHTTPメソッドには以下があります。**
**GET:** 
サーバーからデータを取得するために使用される。

**POST:** 
サーバーにデータを送信するために使用され、新しいリソースの作成や既存リソースの更新に適する。

**PUT:** 
指定したリソースを新しいデータで更新するために使用される。

**DELETE:** 
指定したリソースを削除するために使用される。

**PATCH:** 
リソースの一部を更新するために使用される。
:::

これらのメソッドは、サーバーに対する要求の性質を定義し、どのようにデータがやり取りされるかを示します。

### GETメソッド
GETメソッドは、主にサーバーからデータを取得するために使用されます。URLのクエリパラメータを通じてデータを送信します。例: ``https://example.com/search?query=keyword``

:::note warn
**GETメソッドの特徴は以下の通りです。**
**可視性:** 
データはURLに含まれるため、誰でも見ることができます。

**データ量の制限:** 
URLの長さに制限があり、送信できるデータ量は限られています（一般的に2048文字程度）。

**キャッシュ:** 
ブラウザがGETリクエストをキャッシュするため、同じリクエストに対して迅速に応答できます。

**安全性:** 
状態を変更しないため、安全とされていますが、機密情報の送信には向いていません。
:::

### POSTメソッド
POSTメソッドは、主にサーバーにデータを送信し、リソースを作成または更新するために使用されます。HTTPリクエストのボディ部分にデータを含めて送信します。

:::note warn
**POSTメソッドの特徴は以下の通りです。**
**非可視性:**
データはURLに表示されないため、GETよりもプライバシーが保たれます。

**データ量の制限:** 
POSTリクエストではデータサイズに制限がなく、大量のデータを送信できます。

**キャッシュ:** 
POSTリクエストは通常キャッシュされませんが、サーバーの設定により変わることがあります。

**安全性:** 
状態を変更する可能性があるため、安全性の観点からは注意が必要です。
:::

## ハンズオン：Flaskアプリケーションから確認

ここでは、以前にローカルで作成したFlaskアプリケーションを使用し、GETとPOSTリクエストを確認します。


使用するアプリケーションは、以下の記事で作成したものです。

https://qiita.com/free-honda/items/b8e9e483b4836117cbd0#%E3%82%A2%E3%83%97%E3%83%AA%E3%82%B1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%81%AE%E5%8B%95%E4%BD%9C%E7%A2%BA%E8%AA%8D

:::note 
ここでは、``docker-compose up``コマンドでアプリケーションが立ち上がった状態を前提としています。
:::


## ログからGETメソッドの確認

ページを何度かリロード（更新）すると、FlaskアプリケーションのログにGETリクエストが記録されていることが確認できました。

![スクリーンショット 2024-10-31 23.07.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3662571/0254ed79-9afe-427a-cd9e-cf9c114c2765.png)

ターミナルに表示されるログで、GETリクエストとPOSTリクエストの内容を確認できます。

```bash
web-1  |  * Running on all addresses (0.0.0.0)
web-1  |  * Running on http://127.0.0.1:5000
web-1  |  * Running on http://172.18.0.2:5000
web-1  | Press CTRL+C to quit
web-1  | 192.168.65.1 - - [31/Oct/2024 14:06:52] "GET / HTTP/1.1" 200 -
web-1  | 192.168.65.1 - - [31/Oct/2024 14:06:52] "GET /favicon.ico HTTP/1.1" 404 -
web-1  | 192.168.65.1 - - [31/Oct/2024 14:07:24] "GET / HTTP/1.1" 200 -
web-1  | 192.168.65.1 - - [31/Oct/2024 14:07:25] "GET / HTTP/1.1" 200 -
```

## ログからPOSTメソッドの確認

入力画面に実際に文字を入力し、DB側にデータを送信すると、FlaskアプリケーションのログにPOSTリクエストが記録されていることが確認できました。

![スクリーンショット 2024-10-31 23.11.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3662571/9214c692-b20e-bf17-719c-3166de58e4fa.png)

ターミナルにもPOST処理が記録されています。

```bash
web-1  |  * Running on all addresses (0.0.0.0)
web-1  |  * Running on http://127.0.0.1:5000
web-1  |  * Running on http://172.18.0.2:5000
web-1  | Press CTRL+C to quit
web-1  | 192.168.65.1 - - [31/Oct/2024 14:10:37] "POST /add HTTP/1.1" 302 -
web-1  | 192.168.65.1 - - [31/Oct/2024 14:10:37] "GET / HTTP/1.1" 200 -
web-1  | 192.168.65.1 - - [31/Oct/2024 14:10:40] "POST /add HTTP/1.1" 302 -
web-1  | 192.168.65.1 - - [31/Oct/2024 14:10:40] "GET / HTTP/1.1" 200 -
```

## まとめ
GETメソッドはデータの取得に適しており、リクエスト内容が可視化されるため、公開情報に使用されることが一般的です。

アプリケーションを設計する際は、これらのメソッドの特性を理解し、適切な使い分けを行うことが重要です。ITスクールのハッカソンに参加し、実際に手を動かしたことで、より実践的なスキルを獲得することができました。

## 参考記事

https://wa3.i-3-i.info/word1495.html