Microsoft Graph Toolkit React コンポーネント

注意

Microsoft Graph Toolkit は非推奨です。 2025 年 9 月 1 日から、2026 年 8 月 28 日に完全な退職が予定されています。開発者は、Web エクスペリエンスを構築するために、Microsoft Graph SDK またはその他のサポートされている Microsoft Graph ツールを使用して移行する必要があります。詳細については、非推奨のお知らせを参照してください。

Microsoft Graph Toolkit React コンポーネント (mgt-react) を使用すると、React開発者は、React アプリケーションで Microsoft Graph Toolkit を使用できます。ライブラリは、すべての Microsoft Graph Toolkit コンポーネントをラップし、React コンポーネントとしてエクスポートします。また、通常の Web コンポーネントとしてまだ利用できないチャットシナリオを有効にするために、別のReact ライブラリ (mgt-chat) も提供しています。

どのようなコンポーネントを使用できますか?

mgt-react ライブラリは Microsoft Graph Toolkit Web コンポーネントから自動生成され、すべてのコンポーネントはReact コンポーネントとして使用できます。

React コンポーネントの名前は PascalCase にあり、Mgt プレフィックスは含まれません。たとえば、 mgt-person コンポーネントは Personとして使用でき、 mgt-people-picker コンポーネントは PeoplePickerとして使用できます。

自動生成されたコンポーネントに加えて、 mgt-chat コンポーネントと mgt-new-chat コンポーネントは、別のパッケージ (mgt-chat) の一部として配信されます。

インストール

インストールするには、次のコマンドを使用します。

npm install @microsoft/mgt-react

アプリケーションに mgt-chat を追加するには、次のコマンドを使用します。

npm install @microsoft/mgt-chat

使用方法

すべてのコンポーネントは npm パッケージを介して使用でき、PascalCase を使用して名前が付けられます。コンポーネントを使用するには、最初にコンポーネントを上部にインポートします。

import { Person } from "@microsoft/mgt-react";

mgt-chatを使用している場合は、コンポーネントを個別にインポートします。

import { Chat } from "@microsoft/mgt-chat";

JSX 内の任意のコンポーネントを通常のReact コンポーネントとして使用できるようになりました。

// Using the Person component
<Person personQuery="me" />

// Using the Chat component
<Chat chatId="19:25fdc88d202440b78e9229773cbb1713@thread.v2" />

すべてのプロパティとイベントは、コンポーネントドキュメントで定義されているとおりに正確にマップされます。

たとえば、 personDetails プロパティをオブジェクトに設定できます。

const App = (props) => {
  const personDetails = {
    displayName: "Bill Gates",
  };

  return <Person personDetails={personDetails}></Person>;
};

または、イベントハンドラーを登録します。

import { PeoplePicker, People } from "@microsoft/mgt-react";

const App = (props) => {
  const [people, setPeople] = useState([]);

  const handleSelectionChanged = (e) => {
    setPeople(e.target.selectedPeople);
  };

  return;
  <div>
    <PeoplePicker selectionChanged={handleSelectionChanged} />
    Selected People: <People people={people} />
  </div>;
};

テンプレート

ほとんどの Microsoft Graph Toolkit コンポーネントでは、テンプレートの作成とmgt-reactをサポートしているため、Reactを使用してテンプレートを記述できます。チャットコンポーネント (mgt-chat) では、カスタムテンプレートはサポートされていません。

たとえば、 mgt-agenda コンポーネントのイベントのレンダリングに使用するテンプレートを作成するには、まず、イベントのレンダリングに使用するコンポーネントを定義します。

import { MgtTemplateProps } from "@microsoft/mgt-react";

const MyEvent = (props: MgtTemplateProps) => {
  const { event } = props.dataContext;
  return (
    <div>
      {event.subject}
      <br />
      {event.attendees
        .map((attendee: any) => attendee.emailAddress.name)
        .join(", ")}
    </div>
  );
};

次に、ラップされたコンポーネントの子として使用し、テンプレートプロパティを eventに設定します。

import { Agenda } from '@microsoft/mgt-react';

const App = (props) => {
  return <Agenda>
    <MyEvent template="event">
  </Agenda>
}

template prop を使用すると、上書きするテンプレートを指定できます。この場合、 MyEvent コンポーネントはすべてのイベントに対して繰り返され、 event オブジェクトは dataContext プロパティの一部として渡されます。

カスタム React フック

mgt-reactには、アプリケーションの状態を追跡するためにアプリケーションで使用できるカスタム React フックが用意されています。

useIsSignedIn

useIsSignedIn フックは、React useState フックを使用して、コンポーネント内のサインイン状態を追跡します。 React、この状態の変更に応じてコンポーネントを再レンダリングします。また、Microsoft Graph Toolkit プロバイダーの変更を監視し、必要に応じてコンポーネントを更新することで、コンポーネントのライフサイクルを強化する useEffect フックも使用します。

import { useIsSignedIn, Agenda } from '@microsoft/mgt-react';

const [isSignedIn] = useIsSignedIn();

const App = (props) => {
  return { isSignedIn && <Agenda></Agenda> }
}

フィードバック

このページはお役に立ちましたか?

Last updated on 2025-09-05