Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥

開発生産性大幅アップ!Postman VS Code拡張機能

草薙昭彦
November 28, 2023

開発生産性大幅アップ!Postman VS Code拡張機能

VS Codeの一つのウィンドウの中でコード編集とAPIテストを同時に行うことができるPostman VS Code拡張機能は、類似の拡張機能と異なり、Postmanコレクションを通じてPostmanの幅広い機能と連携できるのが特徴です。本セッションでは、Postmanコレクションを中心にした、便利なVS Code連携をご紹介します。VS Code Meetup #26での発表資料です。

草薙昭彦

November 28, 2023
Tweet

More Decks by 草薙昭彦

Other Decks in Technology

Transcript

  1. All rights reserved by Postman Inc 開発生産性大幅アップ! Postman VS Code

    拡張機能 草薙 昭彦 テクノロジーエバンジェリスト #vscodejp
  2. どんなシーンで API コールの確認をしてる? • サーバー側の API の実装コードを書きながら「ちゃんと思った通りのレスポンスが返って いるかな〜」 • クライアント側の

    API を呼び出すコードを書きながら「この API ってどんなレスポンスを返 してくるかな〜」 • API のテストが失敗している時「どのパラメーターで呼び出した時に失敗するんだ・・?」 API をコールする時は、コードや設定ファイルの編集をしながらというシーンは多い @postman_japan
  3. VS Code で API リクエストの確認を行うには • REST Client 拡張機能 •

    Thunder Client 拡張機能 • Postman 拡張機能 @postman_japan
  4. VS Code で API リクエストの確認を行うには 機能拡張名 REST Client Thunder Client

    Postman 提供者 Huachao Mao Thunder Client Postman 無料プラン あり あり あり 有料機能 なし コラボレーション・連 携・上限撤廃ほか コラボレーション・連 携・上限撤廃ほか ビュー なし あり あり インターフェース 拡張機能のみ 拡張機能、CLI 拡張機能、CLI、デス クトップ、Web 最終更新日 2022年8月19日 2023年11月23日 2023年11月15日 @postman_japan 2023年11月28日現在
  5. これまで VS Code の機能 Postman の機能 • ワークスペース • コレクション

    • 環境 • API ビルダー • モック • モニター • Flows • APIネットワーク • セキュリティ・ガバナンス • テキストエディタ • コード補完 • リファクタリング • デバッグ • Git 連携 • タスクランナー • 機能拡張 簡単なAPIチェックを 行うときは・・ コードの実装 API のテスト・管理 切り替え @postman_japan
  6. Postman VS Code 拡張機能を使うと VS Code の機能     Postman

    の機能 • API ビルダー • モック • モニター • Flows • APIネットワーク • セキュリティ・ガバナンス • パフォーマンステスト • CI/CD 連携 • テキストエディタ • コード補完 • リファクタリング • デバッグ • Git 連携 • タスクランナー • 機能拡張 コードの実装+ API のテスト API ライフサイクル管理 • ワークスペース • コレクション • コレクションラン ナー • 環境 • 履歴 • コンソール • API ドキュメント @postman_japan NEW NEW NEW
  7. VS Code Postman 拡張機能のユニークなポイント • Postman コレクションや環境・履歴を Postman アプリと共有できる ◦

    使い慣れた Postman の UI がほぼそのまま利用できる ◦ API レスポンスの確認やデバッグは VS Code のみで、開発ワークフローや API ラ イフサイクルの管理は Postman アプリで、という使い分け ◦ 環境や変数を使った作業の効率化 ◦ チームでのコラボレーション • かゆいところに手が届く連携 ◦ cURL をペーストしてリクエストを作成 ◦ リクエストから様々な言語でコードスニペットを自動生成 @postman_japan
  8. Postman VS Code 拡張機能のインストール https://marketplace.visualstudio.com/items?itemName=Postman.postman-for-vscode • 上記マーケットプレースの Postman 拡張機能のページで「Install」 •

    またはアクティビティバーの機能拡張アイコンをクリック、「 Postman」を検索して一番上の 項目を選択、「Install」 @postman_japan
  9. HTTP • 認証 • クッキーの編集・表示 • リクエスト前・リクエスト後の テストスクリプトの編集・実行 • レスポンスの分析

    • レスポンスサンプル保存 • History に送信履歴が残る • コレクションの作成・閲覧・保 存 @postman_japan
  10. ダウンロードして無料でスタート! https://www.postman.com/downloads/ デスクトップアプリ • Windows • Mac • Linux Web

    アプリ • アカウント登録で同 じ機能をブラウザで も利用できる @postman_japan
  11. スマホゲーム Postman: API-First Journey @postman_japan 私たちが情熱を傾ける API、ソフトウェア開 発、ゲームを組み合わせて、新しいゲーム 体験を Postman

    で作ってみました! このゲームを遊べるシーン Eメールで済ませるべきだっ た退屈な会議中 オンラインで処理すべき書類 手続きに並んでいる間 コードがビルドされるのを待 つ間 電気自動車の充電を待つ間