Power BI ビジュアル プロジェクトの構造Power BI visual project structure

新しい Power BI ビジュアルを作り始める場合は、Power BI ビジュアル pbiviz ツールを使用することをお勧めします。The best way to start creating a new Power BI visual is to use the Power BI visuals pbiviz tool.

新しいビジュアルを作成するには、Power BI ビジュアルを配置するディレクトリに移動し、次のコマンドを実行します。To create a new visual, navigate to the directory you want the Power BI visual to reside in, and run the command:

pbiviz new <visual project name>

このコマンドを実行すると、次のファイルを含む Power BI ビジュアル フォルダーが作成されます。Running this command creates a Power BI visual folder that contains the following files:

│   ├───launch.json
│   └───settings.json
│   └───icon.png
│   ├───settings.ts
│   └───visual.ts
│   └───visual.less

フォルダーとファイルの説明Folder and file description

このセクションでは、Power BI ビジュアルの pbiviz ツールを使って作成されるディレクトリ内の各フォルダーとファイルについて説明します。This section provides information for each folder and file in the directory that the Power BI visuals pbiviz tool creates.


このフォルダーには、VS Code プロジェクトの設定が含まれています。This folder contains the VS code project settings.

ワークスペースを構成するには、.vscode/settings.json ファイルを編集します。To configure your workspace, edit the .vscode/settings.json file.

詳細については、「ユーザーとワークスペースの設定」を参照してください。For more information, see User and Workspace Settings


このフォルダーには icon.png ファイルが含まれています。This folder contains the icon.png file.

Power BI ビジュアル ツールでは、このファイルが Power BI ビジュアル ペインの新しい Power BI ビジュアル アイコンとして使用されます。The Power BI visuals tool uses this file as the new Power BI visual icon in the Power BI visualization pane.


このフォルダーには、ビジュアルのソース コードが含まれています。This folder contains the visual's source code.

このフォルダーには、Power BI ビジュアル ツールによって次のファイルが作成されます。In this folder, the Power BI visuals tool creates the following files:

  • visual.ts - ビジュアルの主要なソース コード。visual.ts - The visual's main source code.
  • settings.ts - ビジュアルの設定のコード。settings.ts - The code of the visual's settings. ファイルのクラスには、ビジュアルのプロパティを定義するためのインターフェイスが用意されています。The classes in the file provide an interface for defining your visual's properties.


このフォルダーには、ビジュアルのスタイルを保持する visual.less ファイルが含まれています。This folder contains the visual.less file, which holds the visual's styles.


このファイルには、ビジュアルの主なプロパティと設定 (または機能) が含まれています。This file contains the main properties and settings (or capabilities) for the visual. これにより、ビジュアルは、サポートされている機能、オブジェクト、プロパティ、データ ビュー マッピングを宣言できます。It allows the visual to declare supported features, objects, properties, and data view mapping.


このファイルは、npm によって node_modules ツリーまたは package.json ファイルのいずれかが変更されるすべての操作に対して、自動的に生成されます。This file is automatically generated for any operations where npm modifies either the node_modules tree, or the package.json file.

このファイルの詳細については、公式の npm-package-lock.json のドキュメントを参照してください。For more information about this file, see the official npm-package-lock.json documentation.


このファイルには、プロジェクト パッケージが記述されています。This file describes the project package. 作成者、説明、プロジェクトの依存関係などのプロジェクトに関する情報が含まれます。It contains information about the project such as authors, description, and project dependencies.

このファイルの詳細については、公式の npm-package.json のドキュメントを参照してください。For more information about this file, see the official npm-package.json documentation.


このファイルには、ビジュアルのメタデータが含まれています。This file contains the visual metadata.

メタデータ エントリを説明するコメントを含む pbiviz.json ファイルの例については、「メタデータ エントリ」セクションを参照してください。To view an example pbiviz.json file with comments describing the metadata entries, see the metadata entries section.


TypeScript の構成ファイルです。A configuration file for TypeScript.

このファイルには、pbiviz.json ファイルの visualClassName プロパティに指定されているように、ビジュアルのメイン クラスが配置されている *.ts ファイルのパスが含まれている必要があります。This file must contain the path to *.ts file where the main class of the visual is located, as specified in the visualClassName property in the pbiviz.json file.


このファイルには TSLint の構成が含まれています。This file contains the TSLint configuration.

メタデータ エントリMetadata entries

pbiviz.json ファイルの次のコード キャプションのコメントは、メタデータ エントリを説明するものです。The comments in the following code caption from the pbiviz.json file, describe the metadata entries.


  "visual": {
     // The visual's internal name.
    "name": "<visual project name>",

    // The visual's display name.
    "displayName": "<visual project name>",

    // The visual's unique ID.
    "guid": "<visual project name>23D8B823CF134D3AA7CC0A5D63B20B7F",

    // The name of the visual's main class. Power BI creates the instance of this class to start using the visual in a Power BI report.
    "visualClassName": "Visual",

    // The visual's version number.
    "version": "1.0.0",
    // The visual's description (optional)
    "description": "",

    // A URL linking to the visual's support page (optional).
    "supportUrl": "",

    // A link to the source code available from GitHub (optional).
    "gitHubUrl": ""
  // The version of the Power BI API the visual is using.
  "apiVersion": "2.6.0",

  // The name of the visual's author and email.
  "author": { "name": "", "email": "" },

  // 'icon' holds the path to the icon file in the assets folder; the visual's display icon.
  "assets": { "icon": "assets/icon.png" },

  // Contains the paths for JS libraries used in the visual.
  // Note: externalJS' isn't used in the Power BI visuals tool version 3.x.x or higher.
  "externalJS": null,

  // The path to the 'visual.less' style file.
  "style": "style/visual.less",

  // The path to the `capabilities.json` file.
  "capabilities": "capabilities.json",

  // The path to the `dependencies.json` file which contains information about R packages used in R based visuals.
  "dependencies": null,

  // An array of paths to files with localizations.
  "stringResources": []

次の手順Next steps