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

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

Transcript

1. All rights reserved by Postman Inc 開発生産性大幅アップ！ Postman VS Code 拡張機能 草薙 昭彦 テクノロジーエバンジェリスト #PostmanMeetup
2. テクノロジーエバンジェリスト Postman 株式会社 草薙 昭彦 @postman_japan @nagix
3. どんなシーンで API コールの確認をしてる？ • サーバー側の API の実装コードを書きながら「ちゃんと思った通りのレスポンスが返って いるかな〜」 • クライアント側の API を呼び出すコードを書きながら「この API ってどんなレスポンスを返 してくるかな〜」 • API のテストが失敗している時「どのパラメーターで呼び出した時に失敗するんだ・・？」 API をコールする時は、コードや設定ファイルの編集をしながらというシーンは多い @postman_japan
4. エディターが日常作業の中心 • コードの編集だけでなく、コードレポジトリーとの連携、ターミナルからのコマンド実行、タス クの自動化など、 • 多くの拡張機能を使ってカスタマイズや連携ができる Visual Studio Code (VS Code) はとても人気がありますね！ • API コールのためだけに、わざわざウィンドウを切り替えたり設定を同期したりしたくない 😫 @postman_japan
5. VS Code で API リクエストの確認を行うには • REST Client 拡張機能 • Thunder Client 拡張機能 • Postman 拡張機能 @postman_japan
6. VS Code で API リクエストの確認を行うには 機能拡張名 REST Client Thunder Client Postman 提供者 Huachao Mao Thunder Client Postman 無料プラン あり あり あり 有料機能 なし コラボレーション・連 携・上限撤廃ほか コラボレーション・連 携・上限撤廃ほか ビュー なし あり あり インターフェース 拡張機能のみ 拡張機能、CLI 拡張機能、CLI、デス クトップ、Web 最終更新日 2022年8月19日 2023年9月5日 2023年8月30日 @postman_japan 2023年9月6日現在
7. これまで VS Code の機能 Postman の機能 • ワークスペース • コレクション • 環境 • API ビルダー • モック • モニター • Flows • APIネットワーク • セキュリティ・ガバナンス • テキストエディタ • コード補完 • リファクタリング • デバッグ • Git 連携 • タスクランナー • 機能拡張 簡単なAPIチェックを 行うときは・・ コードの実装 API のテスト・管理 切り替え @postman_japan
8. Postman VS Code 拡張機能を使うと VS Code の機能 　 　 Postman の機能 • API ビルダー • モック • モニター • Flows • APIネットワーク • セキュリティ・ガバナンス • コレクションランナー • パフォーマンステスト • CI/CD 連携 • テキストエディタ • コード補完 • リファクタリング • デバッグ • Git 連携 • タスクランナー • 機能拡張 コードの実装＋ API のテスト API ライフサイクル管理 • ワークスペース • コレクション • 環境 • 履歴 @postman_japan
9. VS Code Postman 拡張機能のユニークなポイント • Postman コレクションや環境・履歴を Postman アプリと共有できる ◦ 使い慣れた Postman の UI がほぼそのまま利用できる ◦ 簡単な API レスポンスの確認は VS Code のみで、開発ワークフローや API ライフ サイクルの管理は Postman アプリで、という使い分け ◦ 環境や変数を使った作業の効率化 ◦ チームでのコラボレーション • かゆいところに手が届く連携 ◦ cURL をペーストしてリクエストを作成 ◦ リクエストから様々な言語でコードスニペットを自動生成 @postman_japan
10. サポートしているプロトコル 今後も増える予定！ @postman_japan
11. Postman VS Code 拡張機能のインストール https://marketplace.visualstudio.com/items?itemName=Postman.postman-for-vscode • 上記マーケットプレースの Postman 拡張機能のページで「Install」 • またはアクティビティバーの機能拡張アイコンをクリック、「 Postman」を検索して一番上の 項目を選択、「Install」 @postman_japan
12. Postman VS Code 拡張機能のインストール • 2023年9月6日現在、ベータ版 • Postman の Free、Basic、Professional プランのユーザーが利用可能 @postman_japan
13. HTTP • 認証 • クッキーの編集・表示 • リクエスト前・リクエスト後の テストスクリプトの編集・実行 • レスポンスの分析 • レスポンスサンプル保存 • History に送信履歴が残る • コレクションの作成・閲覧・保 存 @postman_japan
14. WebSocket • History に送信履歴が残る （Disconnect が必要！） • コレクションへの保存は未対 応 @postman_japan
15. gRPC • History に送信履歴が残る • コレクションへの保存は未対 応 @postman_japan
16. エディタの分割が便利 HTTP リクエスト gRPC リクエスト ソースコード ターミナル コレクション ・環境・履歴 @postman_japan
17. ダウンロードして無料でスタート！ https://www.postman.com/downloads/ デスクトップアプリ • Windows • Mac • Linux Web アプリ • アカウント登録で同 じ機能をブラウザで も利用できる @postman_japan
18. ありがとうございました @postman_japan