要点
Apidog VS Code拡張機能を使用すると、エディターから離れることなく、APIリクエストの送信、コレクションの管理、テストの実行、チームとのワークスペース共有が可能です。セットアップは5分もかかりません。拡張機能をインストールし、無料のApidogアカウントにサインインするだけで、VS Codeのサイドバーにワークスペースが直接読み込まれます。
はじめに
Apidogは、API設計、テスト、およびドキュメント作成のためのデスクトップアプリとして始まりました。その後、チームは同じワークスペースをエディターに直接もたらすVS Code拡張機能をリリースしました。この拡張機能はApidogを複製するものではなく、既存のワークスペースに接続するため、VS Code、デスクトップアプリ、またはウェブインターフェースのいずれを使用している場合でも、コレクション、環境、テストケースは同期されたままになります。
このガイドでは、拡張機能のインストール、ワークスペースへの接続、リクエストの送信、テストの実行、およびデスクトップアプリとVS Code拡張機能の併用といった完全なワークフローを説明します。
ステップ1: Apidog VS Code拡張機能をインストールする
VS Codeを開き、左サイドバーの拡張機能アイコンをクリックします（または`Ctrl+Shift+X` / `Cmd+Shift+X`を押します）。
拡張機能マーケットプレイスの検索バーで「Apidog」を検索します。Apidog Inc.が公開している拡張機能を探してください。Apidogのロゴ（様式化されたAPIの文字が入った暗いアイコン）が表示されています。
「インストール」をクリックします。VS Codeは拡張機能をインストールし、左側のアクティビティバーにApidogアイコンを追加します。
インストール後、アクティビティバーのApidogアイコンをクリックします。VS CodeのサイドバーにApidogパネルが開きます。
ステップ2: Apidogアカウントにサインインする
Apidogパネルに「サインイン」ボタンが表示されます。それをクリックします。
ブラウザタブでApidogの認証ページが開きます。既にApidogアカウントをお持ちの場合は、メールアドレスとパスワードを入力してください。アカウントをお持ちでない場合は、「サインアップ」をクリックしてください。無料プランではメールアドレスのみが必要です。クレジットカードは不要です。
サインイン後、ブラウザに確認画面が表示され、VS Codeに戻るように求められます。「VS Codeを開く」をクリックするか、手動でVS Codeに戻ってください。
VS Codeは認証ハンドシェイクを完了し、Apidogワークスペースをサイドバーに読み込みます。
サインイン後のサイドバーの表示: 左パネルにはワークスペースのツリービューが表示されます。上部にはワークスペース名が表示されます。その下に、コレクションがフォルダとして表示されます。各コレクションを展開すると、フォルダ構造で整理されたリクエストが表示されます。環境はパネル上部のドロップダウンに表示されます。
ステップ3: コレクションを操作する
VS CodeのApidogサイドバーは、Apidogワークスペースのコレクション構造を正確に反映します。
コレクションを閲覧するには、コレクション名の横にある矢印をクリックします。展開するとフォルダとリクエストが表示されます。フォルダはさらに個々のリクエストに展開されます。
各リクエストは、HTTPメソッドを示す色付きのバッジ（GETは緑、POSTは青、PUTはオレンジ、DELETEは赤）付きの行項目として表示されます。リクエストをクリックすると、VS Codeエディター領域にタブとして開きます。
検索バーの使用: Apidogパネルの上部に検索入力欄があります。リクエスト名、URL、またはメソッドでコレクションをフィルタリングするには、任意のキーワードを入力します。これは、ワークスペースに多数のコレクションがある場合に便利です。
ワークスペースの切り替え: Apidogアカウントが複数のワークスペース（個人用、チーム用、プロジェクト固有など）に属している場合、パネル上部のワークスペースセレクターでそれらを切り替えることができます。
ステップ4: リクエストを送信する
サイドバーからリクエストを開くと、メインエディター領域にタブとして読み込まれます。リクエストインターフェースは馴染みのあるレイアウトです。
上部バー: メソッドセレクター（GET、POST、PUT、DELETE、PATCH、HEAD、OPTIONSのドロップダウン）、URLフィールド、および送信ボタン。
URLの下のタブ: パラメータ、ヘッダー、ボディ、認証、プリリクエストスクリプト、テスト、設定。各タブで関連する設定セクションが開きます。
リクエストを送信するには:
- 上部バーでメソッドとURLを確認します。
- ヘッダータブで必要なヘッダーを追加します。
- リクエストにボディがある場合（POST、PUT）、ボディをクリックし、コンテンツタイプ（JSON、フォームデータ、バイナリなど）を選択します。
- 送信をクリックします。
レスポンスはタブの下半分に表示されます。ステータスコード、応答時間、応答サイズが表示されます。レスポンスの下のタブで、ボディ（JSONとXMLのシンタックスハイライト付き）、ヘッダー、Cookie、テスト結果を表示できます。
環境の使用: Apidogパネル上部の環境セレクターでアクティブな環境を設定します。`{{base_url}}`や`{{token}}`のような変数は、その環境で定義された値に解決されます。URLを編集することなく、開発、ステージング、または本番環境に対して同じリクエストを実行するには、環境を切り替えます。
ステップ5: リクエストを編集および作成する
既存のリクエストはVS Codeで直接編集できます。変更はApidogワークスペースに自動的に同期されます。
新しいリクエストを作成するには:
- サイドバーでコレクションまたはフォルダを右クリックします。
- 「新規リクエスト」を選択します。
- 空のリクエストタブが開きます。
- メソッド、URL、ヘッダー、およびボディを設定します。
- 保存するには`Ctrl+S` / `Cmd+S`を押します。
新しいリクエストはサイドバーに表示され、Apidogデスクトップアプリ、ウェブインターフェース、またはチームメイトのVS Codeからすぐにアクセスできます。
名前変更と整理: サイドバーの任意のリクエストまたはフォルダを右クリックすると、名前変更、移動、複製、および削除のオプションにアクセスできます。ドラッグアンドドロップによる並べ替えはサイドバー内で機能します。
ステップ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拡張機能とデスクトップアプリは、リアルタイムで同じワークスペースを共有します。「プライマリ」バージョンというものはなく、これらは同じデータの2つのビューです。
両方を使用する一般的なワークフロー:
デスクトップで設計し、VS Codeでテスト: Apidogデスクトップアプリを使用して、APIスキーマを定義し、ドキュメントを作成し、モックサーバーをセットアップします。その後、VS Codeに切り替えて、開発環境を離れることなくリクエストを実行し、テストアサーションを記述します。
チームAPIレビュー: バックエンド開発者がデスクトップアプリでエンドポイントを更新します。フロントエンド開発者はApidog拡張機能がインストールされたVS Codeを開き、新しいパラメータを含む更新されたリクエストをすぐに確認できます。プルリクエストも、インポートするJSONファイルも不要です。
コンテキストでのテスト作成: VS CodeでAPIを消費するコードを記述しているとします。ウィンドウを切り替えることなく、Apidogパネルを開き、関連するエンドポイントを見つけ、実行し、レスポンスの形式を確認し、コードに戻ることができます。常に同じアプリケーション内で作業できます。
デスクトップアプリが優れている点: スキーマ設計、モックサーバーのセットアップ、APIドキュメントの公開、多数の環境の管理。これらは、VS Codeから参照することはできますが、フルスクリーンデスクトップビューで構成する方が簡単なデスクトップアプリ優先の機能です。
ステップ8: チームと共有する
他の1、2人の開発者と作業する場合は、彼らをApidogワークスペースに追加します。Apidogウェブインターフェースまたはデスクトップアプリから、ワークスペース設定に移動し、メールでチームメイトを招待します。
彼らが招待を承諾し、VS Code拡張機能をインストールすると、彼らのサイドバーにはあなたが見ているのと同じコレクションが表示されます。彼らが追加または変更したリクエストは、全員にすぐに表示されます。
無料プランは最大3人のユーザーをサポートします。変更はApidogのクラウドを介して同期されます。Git操作、ファイルのエクスポート、マージの競合はありません。
よくある質問
Apidog VS Code拡張機能はデスクトップアプリなしで動作しますか？はい。この拡張機能は、Apidogワークスペースの完全なクライアントです。拡張機能を使用するためにデスクトップアプリをインストールする必要はありません。
Apidog VS Code拡張機能をオフラインで使用できますか？オフライン中にキャッシュされたコレクションを表示および編集できます。外部APIへのリクエスト送信にはインターネットアクセスが必要です（変更の同期も同様です）。完全なオフラインサポートは、Apidogワークスペースのキャッシュ状態に依存します。
既存のThunder ClientまたはPostmanコレクションをインポートするにはどうすればよいですか？Apidogデスクトップアプリまたはウェブインターフェースで、「インポート」に移動し、適切な形式（Thunder Client JSON、Postmanコレクション v2.1、OpenAPIなど）を選択します。インポートされたコレクションはワークスペースに表示され、VS Code拡張機能からすぐにアクセスできます。
VS Code拡張機能は、Apidogで新しいプロジェクトを作成するのと同じですか？いいえ。この拡張機能は、既存のApidogワークスペースに接続します。ワークスペースはデスクトップアプリまたはウェブインターフェースから作成および管理します。VS Code拡張機能は、VS Codeからそれらのワークスペース内で作業できるようにするクライアントです。
複数の人が同時に同じコレクションを開くことはできますか？はい。この拡張機能は、コレクションを編集のためにロックしません。2人のユーザーが同時に同じリクエストを編集した場合、最後に保存されたものが優先されます。協調編集には、デスクトップアプリのコラボレーション機能を使用してください。
拡張機能は環境変数のオートコンプリートをサポートしていますか？はい。URLまたはパラメータフィールドで`{{`と入力すると、拡張機能はアクティブな環境から利用可能な変数を提案します。これにより、変数名のタイプミスを防ぐことができます。
Apidog VS Code拡張機能は、VS Code内で既にAPI開発を行っている場合に、日常的なツールとして最適です。コレクション、環境、チームワークスペースがすべてウィンドウを切り替えることなくアクセスできるようになれば、2分のセットアップコストはすぐに元が取れます。