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