PhpStorm 2024.1 ヘルプ

モジュールの依存関係ダイアグラム

PhpStorm を使用すると、JavaScript および TypeScript プロジェクトのコンテキスト内でのインポートとエクスポートの視覚化を行うことができます。

モジュール依存関係ダイアグラムの作成

  • JavaScript、TypeScript、HTML ファイルのコンテキストメニュー、またはフォルダーのコンテキストメニューからダイアグラム | ダイアグラムの表示を選択します。

    node_modules および Excluded フォルダーでは、この操作は使用できません。

    複数の型のダイアグラムを作成できるフォルダーでアクションが呼び出された場合は、さらにダイアグラムタイプの選択リストから JavaScript モジュール依存関係ダイアグラムを選択してください。

モジュール依存関係ダイアグラムの分析

PhpStorm は、選択したファイルまたは選択したフォルダー内のすべてのファイルの import ステートメントと require ステートメントおよび script タグを再帰的に分析し、別のタブに、これらのファイルが互いにどのように依存しているかを示すダイアグラムを表示します。

ws_module_dependency_diagram.png

  • ダイアグラムは、いくつかの長方形で構成されています。それらのそれぞれは、分析された選択されたファイルの名前と検出されたインポートのリストを示します。インポートが解決されると、インポートされたシンボルの種類を示すアイコン（variable.png や など）がその横に表示されます。

  • 分析されたファイルからの矢印は、検出されたインポートが行われるターゲットファイルを指します。対象ファイルがライブラリの場合は、灰色の背景にファイル名が表示されます。ライブラリからのインポートが解決されない場合、ターゲットファイルは赤い枠が付いた灰色の四角形として表示されます。

  • 解決されたインポートとエクスポートは、それぞれ import_icon.png または アイコンでマークされます。

ダイアグラムからソースコードへの移動

  • ダイアグラムからファイルに移動するには、ファイルを右クリックし、コンテキストメニューからソースに移動を選択します。

  • ソースコード内の特定の import ステートメントに移動するには、ダイアグラム内の必要なファイルを右クリックし、コンテキストメニューから移動を選択し、ナビゲーションターゲットの選択リストから移動先のシンボルを選択します。

    ws_module_dependency_diagram_jump_to.png
JavaScript の最小化 PhoneGap と Cordova