アイコン参照
WebStorm のユーザーインターフェース全体にアイコンが見られます。たとえば、ツールバー、ツールウィンドウ、エディターのガターなどです。 アイコンは通常、実行可能なアクション、設定可能なオプション、要素に関する追加情報を表します。
ほとんどのアイコンには、その意味を説明するツールチップがあります。 ツールチップを表示するには、アイコンの上にマウスを移動してください。
このリファレンスでは、WebStorm におけるさまざまな種類のアイコンとビジュアルインジケーターについて説明します。 一部のアイコンは、プロジェクトの構成、使用しているフレームワーク、インストールしたプラグインによって使用できるかどうかが異なる場合があります。
メインツールバーアイコン
ウィンドウヘッダーにある メインツールバーのアイコンは、プロジェクト全体または IDE 全体に適用されるアクションを表します。

メインツールバーのアイコンを追加、削除、編集する方法については、 メニューとツールバーを参照してください。
ツールウィンドウバーアイコン
ツールウィンドウバーのアイコンは、WebStorm のさまざまなツールウィンドウを表します。 これらのアイコンのいずれかをクリックすると、対応するツールウィンドウが開きます。

ツールウィンドウバーのアイコンを追加、削除、並べ替える方法については、 新しい UI のツールウィンドウを参照してください。
ツールウィンドウのツールバーアイコン
一部の ツールウィンドウ には、ツールウィンドウに関連するアクションとオプションを表すアイコンを含むツールバーがあります。
ファイルタイプアイコン
ファイルタイプアイコンを使用すると、プロジェクト内のファイルタイプをすばやく識別できます。 これらのアイコンは、選択したツールウィンドウ(例: プロジェクト ツールウィンドウ)に表示されます。
WebStorm での各ファイル形式には専用のアイコンがあります。 認識されるすべてのファイル形式とそのアイコンを表示するには、 設定 ダイアログ(Ctrl+Alt+S )を開き、 に移動してください。

ファイルタイプのアイコンは事前定義されており、UI を通じてカスタマイズすることはできません。
プロジェクト項目の色
WebStorm では、プロジェクト項目をさまざまな方法で色分けして強調表示します。たとえば、背景色や名前の色付けなどです。 それぞれのカラースタイルは異なる種類の情報を表します。
背景色が付いている場合、その項目が スコープというプロジェクト内の名前付きフォルダー、ファイル、パッケージのセットに含まれていることを示します。

デフォルトでは、テスト(緑)と非プロジェクトファイル(黄)の 2 つのスコープの背景色が設定されています。 スコープの色をカスタマイズする方法については、 スコープと色の関連付けを参照してください。
色付きの名前は、アイテムが バージョン管理下にあることを示し、色は VCS ステータスを反映します。

VCS ステータスカラーとその意味をすべて表示するには、 設定 ダイアログ(Ctrl+Alt+S )を開き、 に進みます。 ステータスカラーのカスタマイズ方法については、 ファイルステータスのハイライトを参照してください。
ガターアイコン
エディターガター (エディターの左側にある垂直領域)のアイコンを使うと、メソッドの実行やインターフェース実装への移動など、コード関連のアクションを実行できます。 一部のガターアイコンは、コード要素に関する追加情報も提供します。
利用可能なすべてのガターアイコンとその意味を確認するには、 設定 ダイアログ(Ctrl+Alt+S )を開き、 に移動してください。 ガターアイコンは事前に定義されており、UI からカスタマイズすることはできませんが、 表示するアイコンを選択することはできます。
ブックマーク
ブックマークを使うことで、必要なときに特定のコード行やプロジェクト項目にすばやく戻ることができます。 コード行のブックマークのアイコンは、行番号の横の ガターに表示されます。

プロジェクト項目のブックマークにはアイコンがありません。 ブックマークされたプロジェクト項目を見つけるには、 ブックマーク ツールウィンドウ (Alt+2) を開いてください。
ブックマークには、匿名の とニーモニック(文字
または数字
を使用)の 2 種類があります。 異なる種類のブックマークを作成する方法については、 ブックマークの追加を参照してください。
ブレークポイント
ブレークポイントはコードのデバッグに使用されます。特定のポイントでプログラムの実行を一時停止することで、プログラムの状態や動作を確認できます。 ブレークポイントのアイコンは ガターに表示され、行番号と入れ替わります。

ブレークポイントは、その種類と状態に応じてアイコンと色が異なる場合があります。 利用可能なすべてのアイコンとその意味を確認するには、 ブレークポイントアイコン を参照してください。 さまざまな種類のブレークポイントの作成方法については、 ブレークポイントの設定を参照してください。
マーカーの変更 (VCS)
変更マーカーを使用すると、前回のコミット以降に変更されたコード行をすばやく識別できます。 変更マーカーは ガターの右側に色分けされて表示されます。 変更マーカーをクリックすると、IDE は変更のコミットやロールバックなど、VCS 関連のアクションを表すアイコンを含むポップアップを開きます。

それぞれの色は異なる種類の変更を表します。 すべての変更マーカーの色とその意味を確認するには、 設定 ダイアログ(Ctrl+Alt+S )を開き、 に進みます。 変更マーカーの色をカスタマイズする方法については、 エディターのガターでのバージョン管理を参照してください。
コードカバレッジマーカー
コードカバレッジマーカーを使用すると、 カバレッジを使用した最新の実行で実行されたコード行をすばやく識別できます。 マーカーは ガターの左側に色分けされて表示されます。 コードカバレッジマーカーをクリックすると、IDE はカバレッジ統計と追加のアクションアイコンを含むポップアップを開きます。

それぞれの色は異なるカバレッジのステータスを表します。デフォルトでは、緑が完全カバレッジ、黄が部分的なカバレッジ、赤がカバレッジなしを示します。 カバレッジマーカーの色をカスタマイズする方法については、 カバレッジハイライトの色を変更を参照してください。
データベースオブジェクトアイコン
データベースツールおよび SQL プラグインをインストールする
この機能は、インストールして有効にする必要がある データベースツールおよび SQL(英語) プラグインに依存しています。
Ctrl+Alt+S を押して設定を開き、 を選択します。
マーケットプレース タブを開き、 データベースツールおよび SQL プラグインを見つけて、 インストール をクリックします (プロンプトが表示されたら、IDE を再起動します)。
データベースオブジェクトアイコンを使用すると、イントロスペクトされたデータベースオブジェクトの種類をすばやく識別できます。 これらのアイコンは、特定のツールウィンドウ(例: データベース、 データベースの変更、 サービス )、コードエディター、データエディターなどで見つけることができます。 各データベースオブジェクトには専用のアイコンがあります。

データソースとデータベースオブジェクトのアイコンの詳細については、 データベースツールウィンドウ トピックのリファレンスチャプターを参照してください。