REST、GraphQL、WebSocket、リアルタイムAPIをテストするためのオープンソースAPI開発エコシステムで、Postmanの軽量な代替ツール。
| コマンド | 説明 |
|---|
hoppscotch.ioにアクセス | HoppscotchのWebアプリを開く（インストール不要） |
hoppscotch.io/downloadからダウンロード | デスクトップアプリをインストール（macOS、Windows、Linux） |
| GitHub、Google、またはメールでサインイン | チーム同期用のアカウントを作成 |
| ブラウザのPWAインストールオプション | Progressive Web Appとしてインストール |
| コマンド | 説明 |
|---|
npm install -g @hoppscotch/cli | npmでCLIをグローバルインストール |
npx @hoppscotch/cli | インストールせずにCLIを実行 |
hopp --version | CLIバージョンを表示 |
hopp --help | CLIヘルプを表示 |
| コマンド | 説明 |
|---|
docker pull hoppscotch/hoppscotch | Dockerイメージをプル |
docker compose up -d | セルフホストインスタンスを起動 |
# セルフホストHoppscotch用のdocker-compose.yml
version: "3"
services:
hoppscotch:
image: hoppscotch/hoppscotch:latest
ports:
- "3000:3000" # Web UI
- "3100:3100" # 管理ダッシュボード
- "3170:3170" # バックエンドAPI
environment:
DATABASE_URL: postgresql://user:pass@db:5432/hoppscotch
JWT_SECRET: your-jwt-secret-here
TOKEN_SALT_COMPLEXITY: 10
MAGIC_LINK_TOKEN_VALIDITY: 3
REFRESH_TOKEN_VALIDITY: 604800000
ACCESS_TOKEN_VALIDITY: 86400000
VITE_ALLOWED_AUTH_PROVIDERS: GITHUB,GOOGLE,EMAIL
depends_on:
- db
db:
image: postgres:15
volumes:
- postgres_data:/var/lib/postgresql/data
environment:
POSTGRES_USER: user
POSTGRES_PASSWORD: pass
POSTGRES_DB: hoppscotch
volumes:
postgres_data:
| コマンド | 説明 |
|---|
| メソッドを選択（GET、POST、PUT、DELETE、PATCH） | ドロップダウンからHTTPメソッドを選択 |
| アドレスバーにURLを入力 | リクエストエンドポイントを設定 |
| 「Send」をクリック | リクエストを実行 |
Ctrl + Enter | リクエストを送信（キーボードショートカット） |
Ctrl + G | リクエストを送信してレスポンスをダウンロード |
Ctrl + K | コマンドパレットを開く |
| コマンド | 説明 |
|---|
| 「Body」タブをクリック → タイプを選択 | リクエストボディの形式を設定 |
| 「application/json」を選択 | JSONボディ（最も一般的） |
| 「multipart/form-data」を選択 | ファイルアップロード |
| 「application/x-www-form-urlencoded」を選択 | フォームデータ |
| 「text/plain」を選択 | 生テキストボディ |
| 「application/xml」を選択 | XMLボディ |
| 「Binary」を選択 | 生バイナリデータ |
| コマンド | 説明 |
|---|
| 「Headers」タブをクリック → ヘッダーを追加 | カスタムリクエストヘッダーを追加 |
| 「Parameters」タブをクリック | URLクエリパラメータを追加 |
| ヘッダーの一括編集モード | 複数のヘッダーを一度にペースト |
| ヘッダーの有効/無効を切り替え | 削除せずに無効化 |
値に<<variable>>を使用 | 環境変数を参照 |
| コマンド | 説明 |
|---|
| レスポンスボディを表示 | JSON、HTML、XML、バイナリ、画像 |
| レスポンスの「Headers」タブをクリック | レスポンスヘッダーを確認 |
| ステータスコードと時間を表示 | HTTPステータス、レイテンシー、サイズ |
| レスポンスの「Copy」をクリック | レスポンスをクリップボードにコピー |
| 「Download」をクリック | レスポンスをファイルとしてダウンロード |
| JSONレスポンスは自動整形 | 折りたたみ可能なツリービュー |
| 「Timeline」をクリック | リクエスト/レスポンスのタイムラインを表示 |
Method: POST
URL: https://api.example.com/users
Headers:
Content-Type: application/json
Authorization: Bearer <<auth_token>>
Body (JSON):
{
"name": "Alice Smith",
"email": "alice@example.com",
"role": "admin"
}
Response: 201 Created (145ms, 234 B)
{
"id": 42,
"name": "Alice Smith",
"email": "alice@example.com",
"role": "admin",
"created_at": "2024-01-15T10:30:00Z"
}
| コマンド | 説明 |
|---|
| コレクションパネルの「+」をクリック | 新しいコレクションを作成 |
| コレクションを右クリック → 「New Request」 | コレクションにリクエストを追加 |
| コレクションを右クリック → 「New Folder」 | サブフォルダで整理 |
| リクエストをフォルダ間でドラッグ | コレクションアイテムを並べ替え |
| 右クリック → 「Duplicate」 | コレクションを複製 |
| 右クリック → 「Properties」 | コレクション設定を編集 |
| 右クリック → 「Delete」 | コレクションを削除 |
Ctrl + Shift + P | コレクション内を検索 |
| コマンド | 説明 |
|---|
| 「Import」をクリック → ファイルを選択 | コレクションをインポート |
| 右クリック → 「Export」 | コレクションをJSONとしてエクスポート |
| Postman Collection v2からインポート | Postman互換 |
| OpenAPI/Swagger仕様からインポート | リクエストを自動生成 |
| Insomniaからインポート | Insomnia互換 |
| cURLからインポート | cURLコマンドをペースト |
| HARからインポート | HTTP Archiveをインポート |
サポートされるインポート形式:
- Hoppscotch Collection（ネイティブJSON）
- Postman Collection v2
- OpenAPI 3.0 / Swagger 2.0
- Insomnia v4
- cURLコマンド
- HAR（HTTP Archive）
cURLからのインポート:
URLバーにcURLコマンドを直接ペースト
Hoppscotchがメソッド、ヘッダー、ボディ、URLを自動パース
| コマンド | 説明 |
|---|
| サイドバーの「Environments」をクリック | 環境マネージャーを開く |
| 「+」をクリックして環境を作成 | 新しい環境を作成 |
key: valueペアを追加 | 変数を定義 |
リクエストで<<variable_name>>を使用 | 任意のフィールドで変数を参照 |
| ドロップダウンから環境を選択 | 環境をアクティブ化 |
| 「Global」タブをクリック | グローバル変数を設定（常にアクティブ） |
| 右クリック → 「Export」 | 環境をJSONとしてエクスポート |
| 右クリック → 「Duplicate」 | 環境を複製 |
| タイプ | 説明 |
|---|
| 通常変数 | UIに表示、コレクションにエクスポート |
| シークレット変数 | UIでマスク、エクスポートされない |
| グローバル変数 | すべての環境で利用可能 |
| 環境変数 | 環境がアクティブな時のみ利用可能 |
環境: "Production"
┌───────────────┬──────────────────────────────┬──────────┐
│ Key │ Value │ Type │
├───────────────┼──────────────────────────────┼──────────┤
│ base_url │ https://api.example.com │ Regular │
│ api_version │ v2 │ Regular │
│ auth_token │ eyJhbGciOiJIUzI1NiIsIn... │ Secret │
│ timeout │ 30000 │ Regular │
└───────────────┴──────────────────────────────┴──────────┘
リクエストでの使用:
URL: <<base_url>>/<<api_version>>/users
Header: Authorization: Bearer <<auth_token>>
| コマンド | 説明 |
|---|
| 「Bearer Token」を選択 | Bearerトークン認証を追加 |
| 「Basic Auth」を選択 | ユーザー名/パスワード認証 |
| 「OAuth 2.0」を選択 | OAuth 2.0フローを設定 |
| 「API Key」を選択 | ヘッダーまたはクエリパラメータにAPIキーを追加 |
| 「AWS Signature」を選択 | AWS Signature V4認証 |
| 「Inherit from parent」を選択 | コレクションから認証を継承 |
| 「None」を選択 | 認証を削除 |
トークンフィールドは<<variables>>をサポート | 認証トークンに環境変数を使用 |
OAuth 2.0設定:
Grant Type: Authorization Code
Auth URL: https://auth.example.com/authorize
Token URL: https://auth.example.com/token
Client ID: <<client_id>>
Client Secret: <<client_secret>>
Scope: read write
Redirect URI: 自動設定
サポートされるgrant type:
- Authorization Code（+ PKCE）
- Client Credentials
- Implicit
- Password Credentials
| コマンド | 説明 |
|---|
| 「Realtime」→「WebSocket」をクリック | WebSocketクライアントを開く |
wss:// URLを入力 | WebSocketエンドポイントを設定 |
| 「Connect」をクリック | 接続を確立 |
| メッセージを入力 →「Send」をクリック | サーバーにメッセージを送信 |
| ログパネルでメッセージを表示 | 送受信を監視 |
| 「Disconnect」をクリック | 接続を閉じる |
| プロトコル/ヘッダーを追加 | 接続パラメータを設定 |
| コマンド | 説明 |
|---|
| 「Realtime」→「SSE」をクリック | Server-Sent Eventsをテスト |
| SSEエンドポイントURLを入力 | イベントストリームURLを設定 |
| 「Connect」をクリック | イベントの受信を開始 |
| イベントをリアルタイムで記録 | イベントストリームを監視 |
| 「Disconnect」をクリック | 受信を停止 |
| コマンド | 説明 |
|---|
| 「Realtime」→「MQTT」をクリック | MQTT接続をテスト |
mqtt://またはwss:// URLを入力 | MQTTブローカーURLを設定 |
| Client ID、ユーザー名、パスワードを設定 | 認証情報を設定 |
| トピックをサブスクライブ | メッセージをリッスン |
| トピックにパブリッシュ | メッセージを送信 |
| コマンド | 説明 |
|---|
| 「Realtime」→「Socket.IO」をクリック | Socket.IO接続をテスト |
| サーバーURLを入力 | Socket.IOエンドポイントを設定 |
| イベントをリッスン | 名前付きイベントをサブスクライブ |
| データ付きでイベントを発行 | 名前付きイベントを送信 |
| 接続ステータスを表示 | 接続/切断を監視 |
| コマンド | 説明 |
|---|
| 「GraphQL」タブをクリック | GraphQLモードに切り替え |
| GraphQLエンドポイントURLを入力 | GraphQLサーバーURLを設定 |
| エディタパネルでクエリを作成 | GraphQLクエリを構成 |
| 「Schema」をクリックしてスキーマを取得 | 自動補完用のサーバースキーマを読み込み |
| Variablesパネルで変数を追加 | クエリ変数をJSONで設定 |
| 認証用のヘッダーを追加 | 認証ヘッダーを設定 |
「Run」またはCtrl + Enterをクリック | クエリを実行 |
| スキーマからの自動補完を使用 | フィールドの候補を取得 |
Endpoint: https://api.example.com/graphql
Query:
query GetUsers($limit: Int!) {
users(limit: $limit) {
id
name
email
posts {
title
createdAt
}
}
}
Variables:
{
"limit": 10
}
Headers:
Authorization: Bearer <<auth_token>>
| コマンド | 説明 |
|---|
hopp test collection.json | コレクションテストを実行 |
hopp test collection.json -e environment.json | 環境付きで実行 |
hopp test collection.json --delay 500 | リクエスト間の遅延（ミリ秒） |
hopp test collection.json --reporter junit | JUnitテストレポート出力 |
hopp test collection.json --reporter json | JSONテストレポート出力 |
hopp test collection.json --bail | 最初の失敗で停止 |
hopp test collection.json --env-var KEY=VALUE | 環境変数を上書き |
# 環境付きでコレクションを実行
hopp test api-tests.json -e production.json
# 遅延付きで最初の失敗で停止
hopp test api-tests.json --delay 1000 --bail
# CI/CD用にJUnitレポートを生成
hopp test api-tests.json --reporter junit > results.xml
# 特定の変数を上書き
hopp test api-tests.json \
--env-var "base_url=https://staging.example.com" \
--env-var "auth_token=test-token-123"
# CI/CDパイプラインの例
hopp test api-tests.json -e staging.json --bail --reporter junit
| コマンド | 説明 |
|---|
| 「Pre-request」タブをクリック | リクエスト前に実行するスクリプトを追加 |
| 「Tests」タブをクリック | レスポンス後に実行するスクリプトを追加 |
pw.env.set("key", "value") | 環境変数を設定 |
pw.env.get("key") | 環境変数を取得 |
pw.expect(response.status).toBe(200) | ステータスコードをアサート |
pw.expect(response.body).toHaveProperty("id") | ボディのプロパティをアサート |
// プリリクエスト: タイムスタンプを生成
pw.env.set("timestamp", Date.now().toString());
// プリリクエスト: ランダムIDを生成
pw.env.set("random_id", Math.random().toString(36).slice(2));
// テスト: ステータスコードを確認
pw.test("Status is 200", () => {
pw.expect(pw.response.status).toBe(200);
});
// テスト: レスポンスボディを確認
pw.test("Response has user data", () => {
const body = pw.response.body;
pw.expect(body).toHaveProperty("id");
pw.expect(body).toHaveProperty("name");
pw.expect(body.name).toBe("Alice");
});
// テスト: レスポンス時間を確認
pw.test("Response is fast", () => {
pw.expect(pw.response.status).toBeLessThan(500);
});
// テスト: 次のリクエスト用にトークンを保存
pw.test("Extract auth token", () => {
const token = pw.response.body.access_token;
pw.env.set("auth_token", token);
});
| ショートカット | 説明 |
|---|
Ctrl + Enter | リクエストを送信 |
Ctrl + K | コマンドパレット |
Ctrl + S | 現在のリクエストを保存 |
Ctrl + Shift + P | コレクションを検索 |
Ctrl + / | サイドバーを切り替え |
Alt + ↑ | 履歴の前のリクエスト |
Alt + ↓ | 履歴の次のリクエスト |
F11 | 全画面を切り替え |
| コマンド | 説明 |
|---|
| サイドバーからチームを作成 | チームワークスペースをセットアップ |
| メールでメンバーを招待 | コラボレーターを追加 |
| 共有コレクション | チーム全体のリクエストライブラリ |
| 共有環境 | チーム全体の変数セット |
| リアルタイムコラボレーション | チームの編集をライブで確認 |
| ロールベースのアクセス | オーナー、エディター、ビューアーの役割 |
-
APIドメインごとにコレクションを整理する — 関連するエンドポイントをコレクションにグループ化し、リソースタイプ（ユーザー、注文、商品）ごとにフォルダを使用して見つけやすくしましょう。
-
ステージングとプロダクションに環境を使用する — 同じ変数名で異なる値を持つdev、staging、production用の別々の環境を作成しましょう。ワンクリックで切り替えられます。
-
シークレットをシークレット変数として保存する — APIキーとトークンを「secret」タイプとしてマークし、UIでマスクされエクスポートから除外されるようにしましょう。
-
認証にプリリクエストスクリプトを使用する — 手動でコピーする代わりに、各リクエスト前にタイムスタンプの生成、署名の計算、トークンの更新を自動的に行いましょう。
-
重要なエンドポイントにテストを書く — ステータスコード、レスポンス構造、重要な値を検証するテストスクリプトを追加しましょう。CI/CDパイプラインでCLI経由で実行できます。
-
OpenAPI仕様からインポートする — ドキュメント化されたAPIを操作する場合、OpenAPI/Swagger仕様をインポートして正しいパラメータを持つすべてのエンドポイントを自動生成しましょう。
-
コレクションレベルの認証を使用する — コレクションレベルで認証を設定し、個々のリクエストでは「Inherit from parent」を使用して認証設定の重複を避けましょう。
-
コレクションをバージョン管理にエクスポートする — コレクションをJSONとしてエクスポートしてリポジトリにコミットし、バージョン管理とチーム共有を行いましょう。
-
CI/CDでCLIを使用する — パイプラインにhopp testを追加して、デプロイごとにAPIテストを実行し、本番稼働前にエンドポイントが動作することを確認しましょう。
-
機密APIにはセルフホストする — 内部APIや機密APIをテストする場合、セルフホストのDockerバージョンをデプロイして、すべてのデータをインフラ内に保持しましょう。
