ファイル構造

WebStorm を使用すると、構造ツールウィンドウおよび構造ポップアップでファイルの構造を表示・操作できます。構造ツールウィンドウのツールバーでをクリックし、表示したい要素を選択してください。

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

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

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

エディターでファイルを開き、 Ctrl+F12 を押すか、メインメニューのナビゲート | ファイル構造に移動します。
ポップアップで、検索する要素の名前を入力し始めます。入力すると、IDE によって検索結果が絞り込まれます。
キャメルハンプも利用できます。たとえば、 dsu と入力して一致させることが可能です。
さらに、ポップアップのチェックボックスを使用して検索結果を絞り込むことができます。並べ替えを変更するには、をクリックし、必要なオプションを選択します。
Enter を押すか、項目をクリックするとポップアップが閉じ、エディターで選択した要素に移動します。

継承されたメンバー: 現在のクラスが継承しアクセス可能なすべてのメソッドとフィールドを表示します。継承されたメンバーは、現在のクラスで定義されたメンバーと区別するために灰色で表示されます。

アルファベット順: クラス内の要素をアルファベット順にソートします。
入力時に絞り込む: 入力中に無関係な項目を非表示にします。このオプションが無効の場合、IDE は検索クエリに一致するすべての項目をハイライトし、無関係な項目は非表示にしません。

構造ツールウィンドウ

フィールド: ツリー内のすべてのフィールド（プロパティ）を表示します。
継承側: 現在のクラスが継承しアクセス可能なすべてのメソッドとフィールドを表示します。継承されたメンバーは、現在のクラスで定義されたメンバーと区別するために灰色で表示されます。
HTML5 アウトライン: （HTML ファイルのみ）HTML 5 ファイルのアウトラインを表示します
DDL ステートメント: (SQL ファイルのみ) DDL ステートメント (CREATE、 ALTER、 DROP やその他のステートメントなど) のみを表示します。
DML ステートメント: (SQL ファイルのみ) DML ステートメント (たとえば、 SELECT、 INSERT、 UPDATE、 DELETE やその他のステートメント) のみを表示します。
select ステートメント: (SQL ファイルのみ) SELECT ステートメントのみを表示します。
その他: （SQL ファイルのみ）前のカテゴリに該当しないステートメントのみを表示します。

定義している型別のメソッド: 特定のクラスやインターフェースのメソッドをオーバーライドまたは実装しているすべてのメソッドを、そのクラスやインターフェースに対応するノードの下にグループ化します。
タイプ別にグループ化: (SQL ファイルのみ) ステートメントをタイプ別にグループ化します (たとえば、DDL ステートメント、DML ステートメント、 SELECT ステートメント、その他)。

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

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

エディターでコードフラグメントを選択し、 Ctrl+Alt+T を押すか、メインメニューのコード | 囲むに移動します。必要な折りたたみ領域コメント、 region または editor-fold を選択します。
WebStorm は選択したコードの周囲にコメントを挿入します。詳細はカスタム折りたたみ領域をご覧ください。
構造ツールウィンドウと構造ポップアップは、これらの領域をでマークします。

2026 年 6 月 8 日