# Thunder Client の使い方ガイド

### 目次

[TOC]

### 1. Thunder Clientとは
**Thunder Client**は、Visual Studio Code（VSCode）上で動作するREST API試験用ツールです。軽量で使いやすく、APIのテストやリクエスト送信を迅速に行うことができます。

### 2. インストール方法

#### 1. Visual Studio Code (VSCode) のインストール
- [VSCode ダウンロード](https://code.visualstudio.com/)

#### 2. Thunder Client 拡張機能のインストール
1. VSCodeを開き、「拡張機能」タブを選択。
2. 検索バーに **"Thunder Client"** と入力。
3. 表示された結果から **Thunder Client** を選択し、「Install」ボタンをクリック。
- [Thunder Client マーケットプレイスページ](https://marketplace.visualstudio.com/items?itemName=rangav.vscode-thunder-client)

:::info

Thunder Clientを WSL 環境などリモートの環境で使用する場合、有料プランの対象となることがあります。
VSCodeでThunder Clientをローカル環境で動作させるには、以下の手順をお試しください：

手順 1: リモート接続の終了

1. VSCodeの左下に表示されている 「>< WSL: {ディストリビューション名}」 をクリック
2. メニューから 「Close Remote Connection」 または 「Reconnect to Local Window」 を選択

手順 2: ローカル環境でVSCodeを起動

1. リモート接続を切った状態で、VSCodeをローカルで起動
2. ローカル環境のプロジェクトディレクトリを開き、Thunder Clientを使用

:::

### 3. Thunder Client の基本的な使い方

#### **リクエストの作成と編集**
1. **HTTPメソッドの選択**
- 右側のペインで `[GET]` をクリックし、`POST` や `PUT` などのメソッドを選択可能です。

2. **URLの入力**
- `Enter URL` フィールドに対象APIのURLを入力します。
- 例: `https://api.openweathermap.org/data/2.5/weather`

3. **クエリパラメータの指定**
- `Query` タブで、HTTPクエリパラメータを編集します。
- 例: `?parameter1=value1&parameter2=value2` の形式で記述。

4. **ヘッダーの編集**
- `Headers` タブでHTTPリクエストヘッダーを指定します。
- 必要に応じて `Authorization` ヘッダーや `Content-Type` を設定。

5. **リクエストの送信**
- 編集が終わったら、右上の `Send` ボタンをクリックしてリクエストを発行します。

#### **リクエストの保存**
- 左側のペインで `Activity` タブを選択し、履歴を確認可能。
- リクエストを保存したい場合は `...` ボタンをクリックし、`Save to Collection` を選択。

### 4. GitHub REST API へのアクセス例

#### **1. GitHub Personal Access Token (PAT) の発行**
1. [GitHub PAT発行ページ](https://github.com/settings/tokens) にアクセス。
2. `Generate new token` をクリック。
3. トークンの名前を指定し、必要な権限（例: `user`）にチェックを入れる。
4. トークンを生成し、表示された値をメモします。
- 参考: [GitHubトークンの作成ガイド](https://docs.github.com/ja/authentication/keeping-your-account-and-data-secure/creating-a-personal-access-token)

#### **2. Thunder Clientでのリクエスト作成**
1. **URL**: `https://api.github.com/users/{GitHubユーザーID}`
- 例: `https://api.github.com/users/dynamis`

2. **HTTPヘッダーにアクセストークンを指定**
- `Headers` タブで以下を設定:
- Header: `Authorization`
- Value: `token {GitHub PAT}`
- 例: `token ghp_abcdefghijklmnopqrstuvwxyz1234567890`

3. **リクエストの送信**
- `Send` ボタンをクリック。
- レスポンスにGitHubユーザー情報が返されるはずです。

### 5. トラブルシューティング
- **422 Unprocessable Entity のエラー**
- リクエストに不足しているパラメータがある可能性があります。
- 必要なクエリパラメータやヘッダーが設定されていることを確認してください。
- GitHubの場合、`Authorization` ヘッダーが正しく指定されているか確認。

### 6. 練習: OpenWeather API へのリクエスト
- URL: `http://api.openweathermap.org/data/2.5/weather`
- Queryパラメータ例: `?q=London&appid={API_KEY}`
- レスポンス内容として、指定された都市の天気情報が返されます。

Thunder Client は簡単にAPIを試験できる便利なツールです。基本操作を理解すれば、あらゆるREST APIのテストに活用できます。