モジュールの依存関係ダイアグラム
WebStorm を使用すると、JavaScript および TypeScript プロジェクトのコンテキスト内でインポートとエクスポートの可視化ができます。
モジュール依存関係ダイアグラムをビルド
JavaScript、TypeScript、HTML ファイルのコンテキストメニュー、またはフォルダーのコンテキストメニューから を選択します。
node_modules および
除外済みフォルダーでは、この操作は使用できません。
WebStorm は、選択したファイルまたは選択したフォルダー内のすべてのファイルに対して import および require ステートメントと script タグを再帰的に分析し、別のタブでこれらのファイル間の依存関係を示すダイアグラムを表示します：
ダイアグラムは、いくつかの長方形で構成されています。 それらのそれぞれは、 分析された選択されたファイルの名前と検出されたインポートのリストを示します。 インポートが解決されると、インポートされたシンボルの種類を示すアイコン（
や 
など）がその横に表示されます。分析されたファイルからの矢印は、検出されたインポートが行われる ターゲットファイルを指します。 対象ファイルがライブラリの場合は、灰色の背景にファイル名が表示されます。 ライブラリからのインポートが解決されない場合、 ターゲットファイルは赤い枠が付いた灰色の四角形として表示されます。
解決された インポートと エクスポートは、それぞれ
または 
アイコンでマークされます。
ダイアグラムを分析
ダイアグラムまたはノードのコンテキストメニューから を選択し、必要なアクションを選択します。
ダイアグラムの特性を表示
ダイアグラムのコンテキストメニューから を選択して、ダイアグラムの一般情報および統計を取得します。
特定のメトリクスについて詳しく知りたい場合は、その横にある
をクリックしてください。
選択したノードにフォーカス
複数のノードを詳細に調べるには、それらを選択してからコンテキストメニューから を選択します。
現在選択されているノード以外はすべて非表示になります。
ダイアグラムを元に戻すには、 Ctrl+Z を押します。
ノード近傍にフォーカス
ノードをさらに詳しく調べるには、必要なノードを選択し、そのコンテキストメニューから を選択します。
表示された 隣接ノードのフォーカスビュー ダイアログで、表示する依存関係を指定し、 検索 をクリックします。
選択したノードとその依存関係が表示されます。
ノード間のパスにフォーカス
調べたいパス間のノードを選択し、コンテキストメニューから を選択します。
2つのノード間のパスに注目する ダイアログで検索を設定し、 検索 をクリックします。
サイクルにフォーカス
循環依存関係 のみを表示するには、ダイアグラムのコンテキストメニューから を選択します。
表示された サイクルのフォーカスビュー ダイアログで、表示するサイクルの種類と分析対象のスコープを指定します。
ダイアグラムには、指定されたスコープ内で相互に循環インポートを含むモジュールが表示されます。
ダイアグラム中心性を測定
このアクションを使って、ダイアグラム内の重要なノードを特定できます。
ダイアグラムのコンテキストメニューから を選択します。
表示された 中心性の測定 ダイアログで考慮する主要なパラメーターを指定し、 計測 をクリックします。
WebStorm は、計算された重要度に基づいてノードをハイライトし、最も重要なノードほど明るく表示されます。 ノードの重要度は 0.0〜1.0 の小数値で表現され、それぞれのノードの横に表示されます。
ノードをクラスターにまとめる
ノードのエッジの類似性に基づき、グラフ内のノードを現代的な最適クラスタ数決定手法により自動的にクラスター化できます。
ダイアグラムのコンテキストメニューから を選択します。
表示された 自動クラスタリング ダイアログで、クラスタリングのベースとなるパラメーターを選択し、 実行 をクリックします。
WebStorm により生成されたクラスターが表示されます。
ダイアグラムからソースコードへの移動
ダイアグラムからファイルにジャンプするには、ダイアグラム内のファイルを右クリックし、コンテキストメニューから を選択します。
ソースコード内の特定の
importステートメントに移動するには、ダイアグラム内の必要なファイルを右クリックし、コンテキストメニューから を選択し、 ナビゲーションターゲットを選択 リストから移動先のシンボルを選択します。
コンテキストメニュー
選択した要素のアクション
メニュー項目およびこのノード配下の項目は、ダイアグラムでノードを選択した際に表示されます。
コンテンツ
項目 | 説明 |
|---|---|
新規 | この項目は、ダイアグラム内でノードが選択されている場合のみ利用できます。 この項目を使って、下記の種類のメモを現在のダイアグラムに追加できます。
|
可視性レベルを変更 | 詳細レベルを選択してください。利用可能なオプションは次のとおりです：
詳細は yFiles 公式 Web サイトをご覧ください。 |
移動
この項目は、ダイアグラム内でノードが選択されている場合のみ利用できます。 この項目を使うと、選択した項目が含むファイルのインポートのポップアップリストを開けます。 ポップアップ内のファイルをクリックすると、エディターで開きます。
削除
アクションはダイアグラム内で少なくともノードが1つ選択されている場合のみ利用できます。 このアクションを使うと、ダイアグラムから選択したノードまたはノード群を削除できます。
グラフの分析
この項目を選択すると、ダイアグラムを分析するアクション （上記参照）にアクセスできます。
リファクタリング
メニュー項目は、ノードが選択されている場合のみ利用できます。 このメニュー項目を使用して、現在のコンテキストで利用可能なリファクタリングのポップアップリストを開きます：
レイアウト
このメニュー項目を選択すると、利用可能なダイアグラムレイアウトのポップアップリストが開きます。 詳細は yFiles 公式 Web サイトをご覧ください。
方向
この項目を選択すると、画面上でダイアグラムの見せ方を選べるポップアップリストが開きます。
現在のレイアウトを適用
このメニュー項目を選択すると、ダイアグラムのコンテキストメニューの レイアウト リストで現在選択中のレイアウトが適用されます。 アクションはツールバーからも利用できます。
エッジを自動ルーティング
ダイアグラムの内容をウィンドウの端まで拡大表示します。 アクションはツールバーからも利用できます。
外観
このメニュー項目を使い、エッジやラベルの表示形式やグリッド表示の有無など外観を設定できます。 詳細は yFiles 公式 Web サイトをご覧ください。
動作
このメニュー項目を使い、下記のオプションを有効または無効にできるポップアップリストを開きます：
レイアウト後の内容に合わせる
自動レイアウトアルゴリズムがグラフの並び替えを完了すると、ビューポートは自動的にズームや移動を行い、全体が表示されます。
設定を有効化している場合: レイアウトアルゴリズムによりノードやエッジが再配置されます。 その後、キャンバス/ビューはズームやスクロールなしで全ての内容が表示されるよう自動調整されます。
設定を有効化している場合: レイアウト処理は実行されますが、現在のズームレベルやビューポート位置はそのまま維持されます。
選択したノードの構造ビューを表示 - このオプションを有効化すると、WebStorm で現在選択中のノードに対応するファイルの 構造ビューが自動表示されます。
ダイアグラムをクリップボードにコピー
アクションはツールバーからも利用できます。
選択範囲をクリップボードにコピー
このメニュー項目を選択後、ダイアグラム内の任意の領域を選ぶとその範囲がクリップボードにコピーされます。 アクションはツールバーからも利用できます。
ダイアグラムのエクスポート
サードパーティツール対応の多様なフォーマットでダイアグラムをファイルや画像としてエクスポートしたり、ブラウザーで開いたりできます。
次のオプションを選択して構成できます：
: このボタンをクリックして、ダイアグラムをエクスポートできるサードパーティのエディターを選択します。
: このボタンをクリックして、使用可能な形式の 1 つを使用してダイアグラムをクリップボードに保存します。
: このボタンをクリックして、現在のダイアグラムをファイルとして保存します。 リストから使用可能な形式の 1 つを使用できます。
: このボタンをクリックして、現在のダイアグラムを PNG 形式で保存します。
: このボタンをクリックして、ダイアグラムを印刷します。
アクションはツールバーからも利用できます。
ツールバー
項目 | 説明 |
|---|---|
| このアイコンをクリックして詳細レベルを選択すると、利用可能なオプションが表示されます：
詳細は yFiles 公式 Web サイトをご覧ください。 |
| ダイアグラムをズームイン/ズームアウト |
| このアイコンをクリックすると、ズームインやズームアウト前の元のサイズにダイアグラムが戻ります。 |
| このアイコンをクリックして、内容を現在のダイアグラムのサイズに合わせます。 |
| このアイコンをクリックすると、ダイアグラムのコンテキストメニューの レイアウト リストで現在選択中のレイアウトが適用されます。 |
| このアイコンをクリックすると、ダイアグラムの内容がウィンドウ端まで拡大表示されます。 |
| このアイコンをクリックして、ダイアグラムをクリップボードにコピーします。 |
| このアイコンをクリックし、次にダイアグラム内の任意の領域を選択すると、その範囲がクリップボードにコピーされます。 |
| このアイコンをクリックして、外部ツールと互換性のあるさまざまな形式でダイアグラムをファイルや画像にエクスポートしたり、ブラウザーで開くことができます。  次のオプションを選択して構成できます：
|
| このボタンをクリックして、ダイアグラム全体をリフレッシュします。 |
| このボタンをクリックして ダイアグラムの設定を開き、追加のオプションを構成できます。 |
/
