OpenAPI
OpenAPI 仕様 (OAS) は、REST API の記述形式です。Swagger(英語) は、REST API を作成、文書化、使用するための、この仕様に基づくツールのセットです。詳細については、「Swagger のドキュメント(英語)」を参照してください。
WebStorm は、YAML および JSON ファイル内の OpenAPI 定義のコーディング支援を提供し、サーバースタブ、クライアントライブラリ（SDK）、OpenAPI 仕様に基づくドキュメントを生成するための Swagger Codegen(英語) との統合を提供します。
エンドポイントツールウィンドウを使用して、OpenAPI 仕様で定義されているすべてのエンドポイントを表示できます。
さらに、定義されたエンドポイントへの HTTP リクエストを OpenAPI 仕様から直接作成し、組み込みの HTTP クライアントを介して実行できます。
始める前に
設定 | プラグインページのマーケットプレースタブに OpenAPI 仕様プラグインをインストールします。
エンドポイントツールウィンドウを追加するには、エンドポイントプラグイン ( 設定 | プラグインページ、タブマーケットプレース ) をインストールします。
OpenAPI 仕様を作成する
WebStorm は、関連するコーディング支援付きの専用 OpenAPI 仕様ファイルタイプを認識します。これらは、OpenAPI 仕様バージョンの定義を含む通常の YAML または JSON ファイルです。
OpenAPI 仕様を手動で作成する
プロジェクトツールウィンドウで Alt+Insert を押し、コンテキストメニューから OpenAPI 仕様を選択します。
ファイルの名前を指定し、仕様バージョンとファイル形式を選択します。
エディターで開いた OpenAPI 仕様では、
ガターアイコンを使用して仕様セクションをすばやく追加します。
IDE 設定ので迅速な仕様編集のためのガターアイコンチェックボックスを使用して、 ガターアイコンを無効にすることができます。
新しい OpenAPI 仕様ファイルには、形式とバージョンに応じて、次のテンプレートが含まれています。
空の YAML または JSON ファイルから始める場合は、opnp または swag と入力し、Tab を押して対応するライブテンプレートを挿入できます。
別のファイルから定義を参照する
OpenAPI 3.0 では、$ref(英語) キーワードを使用して、任意の場所でホストされている定義を参照できます。WebStorm は、パスの補完、検証、迅速なナビゲーションを提供します。完了するために、WebStorm は現在のファイルと外部ファイルのコンテキストを理解し、関連する要素へのポインターの使用を提案します。
$refキーワードを入力します。外部定義へのパスの入力を開始します。
Ctrl+B を押すと、参照するファイルと要素にすばやく移動できます。
OpenAPI 仕様をプレビューする
統合された Swagger UI または Redoc UI を使用して、OpenAPI 仕様をプレビューできます。OpenAPI 仕様ファイルがエディターで開かれている場合、右上隅の 
および 
を使用してプレビューを表示または非表示にします。
Swagger UI と Redoc UI を切り替えるには、プレビュー領域にカーソルを置き、
をクリックします。
エディターを分割して水平方向にプレビュー
デフォルトでは、エディターとプレビューは垂直方向 (横に並べて) に分割されているため、ワイドモニターに便利です。水平方向に分割して、エディターの下部にプレビューが表示されるようにすることもできます。これは、縦方向に表示する場合に便利です。
Markdown ファイルのあるタブのヘッダーを右クリックし、スプリットダウンからを選択します。
リモート OpenAPI 仕様を追加する
プロジェクトの OpenAPI 仕様で定義したエンドポイント URL は、コード補完で使用できます。外部仕様のクライアントコードを記述している場合は、エンドポイント URL を自動補完するためにプロジェクトにファイルとして追加する必要はありません。関連するリモート仕様へのリンクを追加できます。
設定ダイアログ（Ctrl+Alt+S）で、を選択します。
リモート仕様リストで
をクリックして、OpenAPI 仕様ファイルの URL を指定するか、SwaggerHub(英語) で OpenAPI 仕様を見つけます。
を使用して、変更された仕様を再ロードします。
プライベート OpenAPI 仕様(英語)を追加するには、API キーを指定します。
自己ホスト型 SwaggerHub オンプレミス(英語)インスタンスから OpenAPI 仕様を追加するには、インスタンスの URL を指定します。
OpenAPI 仕様の比較
新しい仕様バージョンがある場合は、古いバージョンと比較して、互換性があることを確認する必要があります。1 つの方法は、差分 Ctrl+D を見て、変更された行を比較することです。ただし、すべての変更が互換性にとって重要であるとは限りません。WebStorm は、OpenAPI 仕様の構造を比較し、変更されたパス、パラメーター、応答、互換性を損なう可能性のあるその他の要素の概要を作成できます。
プロジェクトツールウィンドウで、2 つの OpenAPI 仕様ファイルを選択し、右クリックして OpenAPI 仕様の比較を選択します。
これにより、変更された仕様要素の要約を含む Markdown ファイルが生成されます。エディター内でファイルが開き、変更を簡単に移動できるプレビューパネルが表示されます。最初に選択したファイルと比較して、2 番目に選択したファイルの変更が表示されます。
OpenAPI 仕様からコードを生成する
有効な OpenAPI 仕様を開いている場合、WebStorm はそれからコードを生成することを提案します。
ガターで 
をクリックし、実行 'openapi file' を選択します。WebStorm は、指定された場所にソースコードファイルを生成し、ファイルを開くオプション、別のモジュールとしてプロジェクトにインポートするオプションを含む通知を表示します。
Swagger Codegen 実行構成
WebStorm は、特定のファイルに対して初めてコード生成を実行するときに、OpenAPI/Swagger コードジェネレーター 実行構成を作成します。実行構成を変更するには、を開いて必要な構成を選択するか、ガターで をクリックして実行構成の変更を選択します。
OpenAPI/Swagger コードジェネレーター実行構成の上部で、次の共通オプションを構成できます。
一般的なパラメーター
項目 | 説明 |
|---|---|
名前 | 実行構成の名前を指定して、編集または実行時に他の構成の間ですばやく識別できるようにします。 |
プロジェクトファイルとして保存 | 実行構成設定を含むファイルを保存して、他のチームメンバーと共有します。デフォルトの場所は .idea/runConfigurations です。ただし、.idea ディレクトリを共有したくない場合は、プロジェクト内の他のディレクトリに構成を保存できます。 デフォルトでは無効になっており、WebStorm は実行構成設定を .idea/workspace.xml に保存します。 |
コード生成設定
項目 | 説明 |
|---|---|
出力ディレクトリ | 生成されたファイルのディレクトリへのパス。 |
コードジェネレーター | コードジェネレーターの種類:
|
言語 | 生成されたコードのターゲット言語。 |
オプションを変更
一部の設定が非表示になっている場合は、オプションを変更をクリックして表示します。
項目 | 説明 |
|---|---|
仕様書パス | OpenAPI 仕様へのパス。 |
JRE | Swagger Codegen の実行に使用する Java ランタイム |
カスタムテンプレートパス | Mustache テンプレート(英語)のあるディレクトリへのパス。 |
生成パラメーター
ターゲット言語に応じて構成パラメーターを指定します。詳細については、swagger-codegen/README.md(英語) を参照してください。
HTTP クライアントで OpenAPI 仕様をテストする
OpenAPI 仕様ファイルを使用する場合、指定したエンドポイントへの HTTP リクエストを作成し、組み込みの HTTP クライアントを介して実行できます。
エンドポイントへの HTTP リクエストを作成する
OpenAPI 仕様ファイルで、エンドポイント定義の横にあるエディターのガターで
をクリックします。
または、を開き、エンドポイントを右クリックして、HTTP クライアントでリクエストを生成を選択します。
WebStorm は新しい HTTP リクエストを作成し、generated-requests.http スクラッチファイルに保存します。
リクエストをエンドポイントにすぐに送信し、保存したくない場合は、エンドポイントツールウィンドウの HTTP クライアントタブを使用できます。
WebStorm は、利用可能な OpenAPI 仕様に基づいて、リクエスト URL とリクエスト本文 (JSON 形式) の補完を提供します。これはローカルだけでなく、リモート仕様にも適用されます (補完を有効にするには、IDE 設定に追加します )。
エンドポイントとその使用箇所の名前を変更する
Rename リファクタリングを使用して、定義されたエンドポイントの名前を変更し、HTTP リクエストでの使用を同時に変更します。
以下のいずれかを行います。
OpenAPI 仕様ファイルで、名前を変更するエンドポイントの定義にキャレットを置きます。
HTTP リクエストファイルで、名前を変更する URL パスセグメントにキャレットを置きます。
メインメニューまたはコンテキストメニューからを選択するか、Shift+F6 を押します。
開いた名前変更ダイアログで、新しいエンドポイントの名前を指定します。
プレビューと変更の適用
WebStorm は、エンドポイントとその使用箇所の名前を変更します。
関連ページ：
エンドポイントツールウィンドウ
開発中のアプリケーションで Express、Next.js、GraphQL を使用している場合、エンドポイントツールウィンドウでルートハンドラーの概要を確認できます。このツールウィンドウは、マイクロサービスやバックエンドとフロントエンド間の通信の開発に役立ちます。また、サードパーティ API の利用にも役立ちます。エンドポイントツールウィンドウからエンドポイント宣言に移動するには、次のいずれかを実行します。エンドポイントのコンテキストメニューからソースに移動を選択します。エンドポイントを選択し、を...
HTTP クライアント
HTTP クライアントプラグインを使用すると、WebStorm コードエディターで HTTP リクエストを直接作成、編集、実行できます。HTTP リクエストを作成して実行する必要がある場合、主に 2 つのユースケースがあります。RESTful Web サービスを開発していて、それが期待どおりに機能し、仕様に準拠してアクセス可能であり、正しく応答することを確認したい場合。RESTful Web サービスに対応するアプリケーションを開発している場合。この場合、開発を開始する前にサービスへのアクセスと...
ソースコードの作成と編集
コードを使用する場合、WebStorm は作業にストレスがないことを保証します。追加、選択、コピー、移動、編集、折りたたみ、出現箇所の検索、コードの保存に役立つさまざまなショートカットと機能を提供します。エディター内のナビゲーションについては、エディターの基本を参照してください。アクションの検索使用したいアクションのショートカットを覚えていない場合は、を押して名前でアクションを見つけてください。同じダイアログを使用してクラス、ファイル、シンボルを見つけることができます。詳しくは、名前でターゲッ...
ライブテンプレート
ライブテンプレートを使用して、ループ、条件、宣言、print ステートメントなどの一般的な構造をコードに挿入します。コードスニペットを展開するには、対応するテンプレートの省略形を入力してを押します。を押し続けると、テンプレート内の 1 つの変数から次の変数に移動します。を押して、前の変数に移動します。ライブテンプレートの種類：次のタイプのライブテンプレートが区別されます。シンプルなテンプレートは固定のプレーンテキストのみを含みます。単純なテンプレートを展開すると、そのテキストがソースコー
コード補完
基本コード補完は、可視性スコープ内のクラス、メソッド、フィールド、キーワードの名前を補完するのに役立ちます。WebStorm はコンテキストを分析し、現在のキャレット位置から到達可能な選択肢を提案します。JSDoc コメント、TypeScript 型定義などからの追加情報も補完精度を大幅に向上させます。候補にはライブテンプレートも含まれます。補完機能は英語以外のキーボードレイアウトでも利用できます。補完はサードパーティのコードのシンボルに対しても機能します。ほとんどの場合、必要なのは、必要なファイ...
ファイル、フォルダー、テキストソースを比較する
WebStorm を使用すると、任意のファイル、フォルダー、テキストソース間の違い、ローカルファイルとそれらのリポジトリバージョン間の違いを確認できます。ファイルを比較：2 つまたは 3 つのファイルを比較するプロジェクトツールウィンドウで、比較するファイルを選択し、を選択するか、を押します。または、1 つのファイルを選択し、コンテキストメニューから比較を選択して、プロジェクトの外部にあるファイルを選択します。アクティブなエディターをクリップボードと比較するエディターの任意の場所を右クリッ...