Microsoft Graph ツールキットの概要Getting started with the Microsoft Graph Toolkit

Microsoft Graph Toolkit コンポーネントは、web アプリケーション、SharePoint web パーツ、または Microsoft Teams のタブに簡単に追加できます。The Microsoft Graph Toolkit components can easily be added to your web application, SharePoint web part, or Microsoft Teams tabs. コンポーネントは web 標準に基づいており、プレーンな JavaScript プロジェクト、または、リーチ、角度、Vue.js などの一般的な web フレームワークの両方で使用できます。The components are based on web standards and can be used in both plain JavaScript projects or with popular web frameworks such as Reach, Angular, Vue.js, and more.

この短いビデオを見て、ツールキットを使い始めることがすぐにできます。You can watch this short video to see how quick and easy it is to get started with the Toolkit.

Microsoft 365 テナントをセットアップするSet up your Microsoft 365 tenant

ツールキットを使用して開発するためには、Microsoft 365 テナントにアクセスする必要があります。In order to develop with the Toolkit, you need access to a Microsoft 365 tenant. お持ちでない場合は、 microsoft 365 開発者プログラムに参加することにより、無料の microsoft 365 developer サブスクリプションを入手できます。If you don't have one, you can get a free Microsoft 365 developer subscription by joining the Microsoft 365 Developer Program. サブスクリプションを構成する方法の詳細については、「 Microsoft 365 developer サブスクリプションをセットアップする」を参照してください。For details about how to configure your subscription, see Set up a Microsoft 365 developer subscription.

開発環境をセットアップするSet up your development environment

ツールキットを使用して開発するには、テキストエディターまたは IDE が必要です。To develop with the Toolkit, you will need a text editor or IDE. 任意のエディターまたは IDE を使用するか、 Visual Studio コード をインストールして無料で使用することができます。You can use the editor or IDE of your choice or install and use Visual Studio Code for free. Microsoft Edge、Google Chrome、Firefox などのモダン web ブラウザーも必要になります。You will also need a modern web browser like Microsoft Edge, Google Chrome, or Firefox.

Microsoft Graph ツールキットの使用Using the Microsoft Graph Toolkit

アプリケーションで Microsoft Graph ツールキットを使用するには、loader を直接参照するか (pkg を介して)、または npm パッケージをインストールします。You can use the Microsoft Graph Toolkit in your application by referencing the loader directly (via unpkg) or by installing the npm package.

Via による使用-ローダーUse via mgt-loader

このツールキットを使用して、次のコードに参照をスクリプトに追加します。To use the Toolkit via mgt-loader, add the reference in a script to your code:

<script src=""></script>

Npm 経由で使用する (ES6 モジュール)Use via npm (ES6 modules)

ツールキットを ES6 モジュール経由で使用すると、バンドル処理を完全に制御できるようになり、アプリケーションに必要なコードのみをバンドルすることができます。Using the Toolkit via ES6 modules will give you full control of the bundling process and allow you to bundle only the code you need for your application. ES6 モジュールを使用するには、npm パッケージをプロジェクトに追加します。To use the ES6 modules, add the npm package to your project:

npm install @microsoft/mgt

これで、使用しているページのすべてのコンポーネントを参照できるようになりました。Now you can reference all the components in the page you're using:

<script src="node_modules/@microsoft/mgt/dist/es6/components.js"></script>

または、必要なコンポーネントを参照するだけで、それ以外のすべての読み込みが行われないようにします。Or, just reference the component you need and avoid loading everything else:

<script src="node_modules/@microsoft/mgt/dist/es6/components/mgt-login/mgt-login.js"></script>


Npm パッケージの ES6 モジュールを使用していて、web コンポーネントをネイティブでサポートしていない IE11 などの ブラウザーをターゲット にしている場合は、プロジェクトに polyfills.ts を含める必要があります。これは自動的には含まれません。If you're using the ES6 modules from the npm package and you're targeting a browser such as IE11 that does not support web components natively, you will need to include polyfills in your project, as they are not automatically included. Polyfills.ts は、webcComponent の標準をサポートするために更新処理が進行しているブラウザーで、不足しているブラウザー機能を入力するのに役立ちます。Polyfills help to fill in missing browser capabilities in browsers that are still in the process of updating to support webcComponent standards. 詳細については、「 polyfills.ts documentation」を参照してください。For instructions and to learn more, see polyfills documentation.

Polyfills.ts は、このツールキットを使用している場合は、既に含まれています。The polyfills are already included if you're using the Toolkit via the mgt-loader script.

次の手順Next Steps

これで、Microsoft Graph ツールキットを使用した開発を開始する準備が整いました。You're now ready to start developing with the Microsoft Graph Toolkit! 開始するには、次のガイドを参照してください。The following guides are available to help you get started: