Upgrade to Pro — share decks privately, control downloads, hide ads and more …

開発生産性大幅アップ!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

    View full-size slide

  2. テクノロジーエバンジェリスト
    Postman 株式会社
    草薙 昭彦
    @postman_japan
    @nagix

    View full-size slide

  3. どんなシーンで API コールの確認をしてる?
    ● サーバー側の API の実装コードを書きながら「ちゃんと思った通りのレスポンスが返って
    いるかな〜」
    ● クライアント側の API を呼び出すコードを書きながら「この API ってどんなレスポンスを返
    してくるかな〜」
    ● API のテストが失敗している時「どのパラメーターで呼び出した時に失敗するんだ・・?」
    API をコールする時は、コードや設定ファイルの編集をしながらというシーンは多い
    @postman_japan

    View full-size slide

  4. エディターが日常作業の中心
    ● コードの編集だけでなく、コードレポジトリーとの連携、ターミナルからのコマンド実行、タス
    クの自動化など、
    ● 多くの拡張機能を使ってカスタマイズや連携ができる Visual Studio Code (VS Code)
    はとても人気がありますね!
    ● API コールのためだけに、わざわざウィンドウを切り替えたり設定を同期したりしたくない
    😫
    @postman_japan

    View full-size slide

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

    View full-size slide

  6. 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日現在

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  9. VS Code Postman 拡張機能のユニークなポイント
    ● Postman コレクションや環境・履歴を Postman アプリと共有できる
    ○ 使い慣れた Postman の UI がほぼそのまま利用できる
    ○ API レスポンスの確認やデバッグは VS Code のみで、開発ワークフローや API ラ
    イフサイクルの管理は Postman アプリで、という使い分け
    ○ 環境や変数を使った作業の効率化
    ○ チームでのコラボレーション
    ● かゆいところに手が届く連携
    ○ cURL をペーストしてリクエストを作成
    ○ リクエストから様々な言語でコードスニペットを自動生成
    @postman_japan

    View full-size slide

  10. サポートしているプロトコル
    今後も増える予定!
    @postman_japan

    View full-size slide

  11. Postman VS Code 拡張機能のインストール
    https://marketplace.visualstudio.com/items?itemName=Postman.postman-for-vscode
    ● 上記マーケットプレースの Postman 拡張機能のページで「Install」
    ● またはアクティビティバーの機能拡張アイコンをクリック、「
    Postman」を検索して一番上の
    項目を選択、「Install」
    @postman_japan

    View full-size slide

  12. Postman VS Code 拡張機能のインストール
    ● 2023年11月28日現在、ベータ版
    ● Postman の Free、Basic、Professional プランのユーザーが利用可能
    @postman_japan

    View full-size slide

  13. HTTP
    ● 認証
    ● クッキーの編集・表示
    ● リクエスト前・リクエスト後の
    テストスクリプトの編集・実行
    ● レスポンスの分析
    ● レスポンスサンプル保存
    ● History に送信履歴が残る
    ● コレクションの作成・閲覧・保

    @postman_japan

    View full-size slide

  14. WebSocket
    ● History に送信履歴が残る
    (Disconnect が必要!)
    ● コレクションへの保存は未対

    @postman_japan

    View full-size slide

  15. gRPC
    ● History に送信履歴が残る
    ● コレクションへの保存は未対

    @postman_japan

    View full-size slide

  16. エディタの分割が便利
    HTTP リクエスト gRPC リクエスト
    ソースコード
    ターミナル
    コレクション
    ・環境・履歴
    @postman_japan

    View full-size slide

  17. 2023年11月リリースの新機能
    ● Postman コンソール
    ● API ドキュメントの表示と編集
    ● 認証メソッドの追加
    ● コレクションランナー
    @postman_japan
    NEW
    NEW
    NEW
    NEW

    View full-size slide

  18. ダウンロードして無料でスタート!
    https://www.postman.com/downloads/
    デスクトップアプリ
    ● Windows
    ● Mac
    ● Linux
    Web アプリ
    ● アカウント登録で同
    じ機能をブラウザで
    も利用できる
    @postman_japan

    View full-size slide

  19. スマホゲーム Postman: API-First Journey
    @postman_japan

    View full-size slide

  20. スマホゲーム Postman: API-First Journey
    @postman_japan
    モノリスから脱出し
    API を集め
    API-First の旅へ
    バグ
    API
    500 Internal Server Error

    View full-size slide

  21. スマホゲーム Postman: API-First Journey
    @postman_japan
    私たちが情熱を傾ける API、ソフトウェア開
    発、ゲームを組み合わせて、新しいゲーム
    体験を Postman で作ってみました!
    このゲームを遊べるシーン
    Eメールで済ませるべきだっ
    た退屈な会議中
    オンラインで処理すべき書類
    手続きに並んでいる間
    コードがビルドされるのを待
    つ間
    電気自動車の充電を待つ間

    View full-size slide

  22. Postman Advent Calendar 2023
    https://qiita.com/advent-calendar/2023/postman
    @postman_japan

    View full-size slide

  23. ありがとうございました
    @postman_japan

    View full-size slide