WebStorm 2025.2 ヘルプ

ファイル構造

WebStorm を使用すると、構造ツールウィンドウおよび構造ポップアップでファイルの構造を表示および移動できます。構造ツールウィンドウのツールバーで をクリックし、表示する要素を選択します。

Highlighting changes in files

プロジェクトがバージョン管理されている場合、構造ツールウィンドウと構造ポップアップに VCS ステータスの色が表示されます。これは、ファイルの変更を追跡できます。変更されたオブジェクトの名前は青色になり、新しく追加されたオブジェクトの名前は緑色でハイライトされます。

構造のアイコンにマウスを合わせると、ツールチップにアイテムに関する追加情報が表示されます。

構造ポップアップ

ポップアップで提供される情報はツールウィンドウよりも少ないですが、入力時に絞り込みオプションにより構造内をより速く移動できます。

  1. エディターでファイルを開き、Ctrl+F12 を押すか、メインメニューの移動 | ファイル構造に移動します。

  2. ポップアップで、検索する要素の名前を入力し始めます。入力すると、IDE によって検索結果が絞り込まれます。

    キャメルハンプを使用することもできます。つまり、たとえば、に一致させるには dsu と入力できます。

  3. さらに、ポップアップのチェックボックスを使用して検索結果を絞り込むことができます。並べ替えを変更するには、 をクリックし、必要なオプションを選択します。

  4. Enter を押すか項目をクリックしてポップアップを閉じ、エディターで選択した要素に移動します。

    Structure popup
継承されたメンバー

現在のクラスによって継承され、そこからアクセスできるすべてのメソッドとフィールドを表示します。継承されたメンバーは、現在のクラスで定義されているメンバーと区別するために灰色で表示されます。

アルファベット順

クラス内の要素をアルファベット順に並べ替えます。

入力時に絞り込み

入力時に無関係な項目を非表示にします。このオプションを無効にすると、IDE は無関係な項目を非表示にすることなく、検索クエリに一致するすべての項目をハイライトします。

構造ツールウィンドウ

  1. エディターでファイルを開くか、プロジェクトツールウィンドウでファイルを選択します。

  2. Alt+7 を押すか、メインメニューで表示 | ツールウィンドウ | 構造に移動します。

  3. ツールウィンドウで、検索する要素の名前の入力を開始します。キャメルハンプを使用することもできます。入力すると、IDE によって検索結果がハイライトされます。

  4. さらに、 にあるオプションを使用して、検索結果を絞り込んだり、ツールウィンドウ内の項目を並べ替えたりすることができます。

    Structure tool window

表示オプション

ソート

アルファベット順

クラス内の要素をアルファベット順に並べ替えます。

表示

フィールド

ツリー内のすべてのフィールド (プロパティ) を表示します。

継承

現在のクラスによって継承され、そこからアクセスできるすべてのメソッドとフィールドを表示します。継承されたメンバーは、現在のクラスで定義されているメンバーと区別するために灰色で表示されます。

HTML の概要

(HTML ファイルのみ) HTML ファイルの HTML 5 アウトラインを表示します

DDL ステートメント

(SQL ファイルのみ) DDL ステートメント (CREATEALTERDROP やその他のステートメントなど) のみを表示します。

DML ステートメント

(SQL ファイルのみ) DML ステートメント (たとえば、SELECTINSERTUPDATEDELETE やその他のステートメント) のみを表示します。

ステートメントの選択

(SQL ファイルのみ) SELECT ステートメントのみを表示します。

その他

(SQL ファイルのみ) 前のカテゴリに当てはまらないステートメントのみを表示します。

グループ

定義別のメソッド

特定のクラスまたはインターフェースのメソッドをオーバーライドまたは実装するすべてのメソッドを、このクラスまたはインターフェースに対応するノードにグループ化します。

型別にグループ化

(SQL ファイルのみ) ステートメントをタイプ別にグループ化します (たとえば、DDL ステートメント、DML ステートメント、SELECT ステートメント、その他)。

Structure からテストを実行する

  • 構造ツールウィンドウで、テストを右クリックし、 実行 'method name' (Ctrl+Shift+F10) を選択します。

    Run a test from the Structure tool window

WebStorm はこのテストで一時的な実行構成を作成します。この構成を再利用するには、必要に応じて保存して編集します。

Save a temporary test configuration

メンバーのグループ化

JavaScript と TypeScript では、ソースコード内でアノテーションを付けることで、構造内のクラスメンバーをグループ化できます。

  • エディターでコードフラグメントを選択し、Ctrl+Alt+T を押すか、メインメニューのコード | 囲むに移動します。必要な折りたたみ領域コメント、region または editor-fold を選択します。

    WebStorm は選択したコードの周囲にコメントを挿入します。詳細については、カスタム折りたたみ領域を参照してください。

    構造ツールウィンドウと構造ポップアップは、これらの領域を Custom region でマークします。

    Custom folding region
2025 年 9 月 11 日

関連ページ:

バージョン管理

Web 開発環境 WebStorm の使い方や高等テクニック満載の JetBrains 日本語公式ヘルプ。最新の英語版ヘルプ内容が随時反映されます。

ファイルを Git に追加し、変更を追跡する

Git にファイル追加コミットツールウィンドウを開きます。を押すか、コンテキストメニューから VCS に追加を選択して、バージョン管理外ファイル変更リスト内のファイルをバージョン管理下に置きます。変更リスト全体を追加することも、個別のファイルを選択することもできます。プロジェクトで Git 統合を有効にしている場合、WebStorm は、新しく作成された各ファイルをバージョン管理下に追加することを提案します。この動作は、の設定ダイアログで変更できます。特定のファイルを常にバージョン管理しないよ...

ツールウィンドウのスピード検索

スピード検索を使用すると、ツールウィンドウ内の項目をすばやく見つけることができます。たとえば、プロジェクトツールウィンドウ内のファイルまたはフォルダー、構造ツールウィンドウのメンバー、コミットツールウィンドウ内の変更リスト、TODO リスト内の項目などです。ツールウィンドウ、ツリー、リスト、ポップアップを選択します。ファイル、クラス、フィールドの名前など、アイテム名の入力を開始します。入力すると、入力した文字を示すフィールドがツールウィンドウ上に表示され、選択範囲が指定した文字列に一致する最初

実行 / デバッグ構成

WebStorm は、実行 / デバッグ構成を使用して、コードを実行、デバッグ、テストします。各構成は、何を実行し、どのパラメーターと環境を使用するかを定義する、名前付きのスタートアッププロパティのセットです。実行 / デバッグ構成には 2 つのタイプがあります。一時的 — コンテキストメニューからを選択するたびに作成されます。コンテキストメニューを呼び出すには、オブジェクトまたは領域を右クリックします。永続的 — テンプレートから明示的に作成されるか、一時的な構成を保存することによって作成されま...

ソースコードの作成と編集

コードを使用する場合、WebStorm は作業にストレスがないことを保証します。追加、選択、コピー、移動、編集、折りたたみ、出現箇所の検索、コードの保存に役立つさまざまなショートカットと機能を提供します。エディター内のナビゲーションについては、エディターの基本を参照してください。アクションの検索使用したいアクションのショートカットを覚えていない場合は、を押して名前でアクションを見つけてください。同じダイアログを使用してクラス、ファイル、シンボルを見つけることができます。詳しくは、名前でターゲッ...

ソースコード階層

WebStorm を使用すると、クラス、メソッド、呼び出しの階層を調べ、ソースファイルの構造を調べることができます。コード階層の分析:タイプ階層は、クラスの親クラスと子クラスを示します。メソッド階層は、メソッドが次のようなクラスを示します。定義済み。定義されていません。クラスが抽象クラスでない場合に定義する必要があります。、呼び出し階層には、メソッドの呼び出し元(スーパータイプ)または呼び出し先(サブタイプ)が表示されます。構築すると、階層ツールウィンドウで階層をすぐに表示して調べることができ...