VS Code で Apidog を使う方法

要点

Apidog VS Code拡張機能を使えば、エディターから離れることなくAPIリクエストの送信、コレクション管理、テスト実行、チームとのワークスペース共有が可能です。セットアップは5分以内で完了します。拡張機能をインストールし、無料のApidogアカウントにサインインすると、VS Codeサイドバーにワークスペースが表示されます。

Apidogを今すぐ試す

💡Apidogは無料のオールインワンAPI開発プラットフォームです。VS Code拡張機能を使えば、エディターをApidogワークスペースに直接接続でき、ウィンドウを切り替えずにAPIテスト・ドキュメント作成・チームコラボレーションが実現します。クレジットカード不要で、Apidogを無料で試せます。

はじめに

ApidogはAPI設計・テスト・ドキュメント作成のデスクトップアプリとして登場しました。現在はVS Code拡張機能も提供しており、同じワークスペースへエディターから直接アクセスできます。拡張機能はワークスペースへ接続する形なので、VS Code・デスクトップアプリ・Webいずれを使ってもコレクションや環境、テストケースが自動同期されます。

本記事では、拡張機能のインストールからワークスペース接続、リクエスト送信、テスト実行、デスクトップアプリとの併用まで、実際のワークフローを具体的に解説します。

ステップ1: Apidog VS Code拡張機能をインストールする

1. VS Codeを開き、左サイドバーの拡張機能アイコンをクリック（またはCtrl+Shift+X / Cmd+Shift+X）。
2. 検索バーで「Apidog」と入力。
3. Apidog Inc.提供の拡張機能（APIの文字が入った黒いロゴ）を探し、「インストール」をクリック。
4. インストール後、アクティビティバーにApidogアイコンが追加されるので、それをクリックしてサイドバーを開きます。

ステップ2: Apidogアカウントにサインインする

1. サイドバーに表示される「サインイン」ボタンをクリック。
2. ブラウザで認証ページが開くので、既存アカウントのメールアドレス・パスワードを入力、または「サインアップ」で新規登録（無料プランはメールアドレスのみ、クレジットカード不要）。
3. サインイン完了後、「VS Codeを開く」または手動でVS Codeに戻る。
4. Apidogワークスペースが自動的にサイドバーへ読み込まれます。

サイドバー表示例:

• 上部にワークスペース名、下にコレクションがフォルダ形式で表示。
• コレクション展開でリクエストやサブフォルダが確認可能。
• 環境はパネル上部のドロップダウンで切り替え。

ステップ3: コレクションを操作する

• サイドバーのコレクション名横の矢印で展開・折りたたみ。
• 各リクエストはHTTPメソッドごとに色分けバッジ付きで表示。クリックでエディタータブが開く。
• 上部検索バーでリクエスト名・URL・メソッドでフィルタ可能。大量コレクションでもすぐ検索。
• 複数ワークスペースを持つ場合は、サイドバー上部セレクターで切替。

ステップ4: リクエストを送信する

1. サイドバーからリクエストを選択してタブで開く。
2. 上部バーでメソッド・URLを確認。
3. 必要に応じて「ヘッダー」「ボディ」「認証」など各タブで設定。
4. 「送信」をクリック。

レスポンス表示:

• 下部にステータスコード、応答時間、サイズ
• 「ボディ」タブではJSON・XMLをシンタックスハイライト付き表示
• 「ヘッダー」「Cookie」「テスト結果」タブも利用可能

環境の活用:

• パネル上部で環境を切り替え、{{base_url}}や{{token}}などの変数を自動展開
• 開発/ステージング/本番環境の切替もURL修正不要

ステップ5: リクエストを編集および作成する

編集手順:

• 既存リクエストはエディター上で直接編集可能。保存すればワークスペースに自動同期。

新規作成手順:

1. サイドバーでコレクションまたはフォルダを右クリック
2. 「新規リクエスト」を選択
3. 空のリクエストタブで内容を設定（メソッド・URL・ヘッダー・ボディなど）
4. Ctrl+S / Cmd+Sで保存

整理・管理:

• サイドバーで右クリック→名前変更・移動・複製・削除が可能
• ドラッグ&ドロップで並び替え

ステップ6: テストを実行する

Apidogはレスポンス後に実行されるテストアサーションをサポートしています。リクエストの「テスト」タブでJavaScriptベースのアサーションを書くことができます。

pm.test("Status is 200", function () {
  pm.response.to.have.status(200);
});

pm.test("Response contains user id", function () {
  const json = pm.response.json();
  pm.expect(json.id).to.be.a('number');
});

• 送信後、「テスト」タブにアサーション結果（成功/失敗・エラーメッセージ）が表示されます。

コレクションの一括実行:

• サイドバーでコレクションやフォルダを右クリック→「コレクションを実行」
• ランナーパネルで反復回数・遅延・環境を設定して「実行」
• 各リクエストのアサーション結果が一覧表示

ステップ7: VS Code拡張機能とデスクトップアプリを併用する

VS Code拡張機能とデスクトップアプリはリアルタイムで同じワークスペースを共有。どちらで編集しても即座に同期されます。

使い分け例:

• デスクトップアプリでAPIスキーマ設計・ドキュメント作成・モックサーバー構築
• VS Codeで開発中にリクエスト実行やテスト記述

チームレビュー:

• バックエンド開発者がデスクトップでエンドポイント更新
• フロントエンド開発者はVS Code拡張機能で即座に新APIを確認

コンテキスト内テスト:

• コード実装中にApidogパネルでエンドポイントを即チェック&実行

デスクトップアプリに向く作業:

• スキーマ設計・モックサーバー構築・APIドキュメント公開・複数環境管理などはデスクトップアプリが最適

ステップ8: チームと共有する

• 他メンバーをApidogワークスペースに追加（ウェブまたはデスクトップアプリのワークスペース設定からメール招待）
• 招待を承諾しVS Code拡張機能をインストールすれば、同じコレクションを全員が表示・編集可能
• 無料プランで最大3人まで利用可。変更はクラウド経由で自動同期、Git操作やファイルエクスポートは不要

よくある質問

Q. Apidog VS Code拡張機能はデスクトップアプリなしでも使えますか？

A. はい。拡張機能単体でワークスペースの全機能が利用可能です。デスクトップアプリのインストールは不要です。

Q. オフラインでも利用できますか？

A. キャッシュされたコレクションは表示・編集可能ですが、APIリクエスト送信や同期にはネット接続が必要です。完全なオフラインサポートはキャッシュ状況に依存します。

Q. Thunder ClientやPostmanのコレクションをインポートできますか？

A. ApidogデスクトップアプリまたはWebインターフェースの「インポート」からThunder Client JSON、Postman v2.1、OpenAPI等を選択しインポート可能。インポート後はVS Code拡張機能からもアクセスできます。

Q. VS Code拡張機能で新しいプロジェクトは作成できますか？

A. いいえ。拡張機能は既存ワークスペースへ接続するためのものです。新規ワークスペース作成はデスクトップアプリまたはWebインターフェースで行います。

Q. 複数人で同時に同じコレクションを開けますか？

A. はい。編集ロックはありませんが、同時編集の場合は最後に保存した内容が優先されます。協調編集はデスクトップアプリのコラボレーション機能を推奨します。

Q. 環境変数のオートコンプリートはありますか？

A. あります。URLやパラメータで{{と入力すると、アクティブ環境の変数候補が表示されます。

Apidog VS Code拡張機能は、VS Code内でAPI開発を行うエンジニアに最適です。コレクション・環境・チームワークスペースへの高速アクセスが可能となり、セットアップも数分で完了します。