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