Office アドインでの Office UI Fabric React の使用Use Office UI Fabric React in Office Add-ins

Office UI Fabric は、Office と Office 365 のユーザー エクスペリエンスを構築するための JavaScript フロント エンドのフレームワークです。React を使ってアドインをビルドする場合は、ユーザー エクスペリエンスを作成するために Fabric React の使用を検討してください。Fabric は、アドインで使用できるボタンやチェックボックスなど、複数の React ベースの UX コンポーネントを提供しています。Office UI Fabric is a JavaScript front-end framework for building user experiences for Office and Office 365. If you build your add-in using React, consider using Fabric React to create your user experience. Fabric provides several React-based UX components, like buttons or checkboxes, that you can use in your add-in.

アドインで Fabric React コンポーネントの使用を開始するには、次の手順を実行します。To get started using Fabric React's components in your add-in, perform the following steps.


この記事の手順を実行すると、アドインで Fabric Core が使用可能になります。If you follow the steps in this article, Fabric Core is also available in your add-in.

手順 1 - Office 用の Yeoman ジェネレーターでプロジェクトを作成Step 1 - Create your project with the Yeoman generator for Office

Fabric React を使用するアドインを作成するには、Office 用の Yeoman ジェネレーターの使用をお勧めします。Office 用の Yeoman ジェネレーターは、Office アドインを開発するために必要なプロジェクトのスキャフォールディングとビルドの管理を提供します。To create an add-in that uses Fabric React, we recommend that you use the Yeoman generator for Office. The Yeoman generator for Office provides the project scaffolding and build management needed to develop an Office add-in.

プロジェクトを作成するには、Windows PowerShell (コマンド プロンプトではありません) を使用して、次の手順を実行します。To create your project, perform the following steps using Windows PowerShell (not the command prompt):

  1. 必須コンポーネントをインストールします。Install the prerequisites.
  2. を実行して、アドイン用のプロジェクト ファイルを作成します。yo officeRun yo office to create the project files for your add-in.
  3. Office クライアント アプリケーションを選択するように促されたら、Word を選択します。When prompted to select an Office client application, choose Word.
  4. プロジェクト ファイルと同じディレクトリにいることを確認し、npm start を実行します。スピナーを表示するブラウザー ウィンドウが自動的に開きます。Ensure you are in the directory with the project files, and then run npm start. A browser window showing a spinner opens automatically.
  5. マニフェストをサイドロードし、アドインのすべての UI を表示します。Sideload your manifest to view the full UI of the add-in.

手順 2 - Fabric React コンポーネントを追加Step 2 - Add a Fabric React component

次に、アドインに Fabric React コンポーネントを追加します。ButtonPrimaryExample と呼ばれる、新しい React コンポーネントを作成します。コンポーネントは Fabric React からの Label と PrimaryButton で構成されています。ButtonPrimaryExample を作成するには、次のようにします。Next, add Fabric React components to your add-in. Create a new React component, called ButtonPrimaryExample, that consists of a Label and PrimaryButton from Fabric React. To create ButtonPrimaryExample:

  1. Yeoman ジェネレーターで作成したプロジェクト フォルダーを開き、src\components に移動します。Open the project folder created by the Yeoman generator, and go to src\components.
  2. button.tsx を作成します。Create button.tsx.
  3. button.tsx で、次のコードを入力して ButtonPrimaryExample コンポーネントを作成します。In button.tsx, enter the following code to create the ButtonPrimaryExample component.
import * as React from 'react';
import { PrimaryButton, IButtonProps } from 'office-ui-fabric-react/lib/Button';
import { Label } from 'office-ui-fabric-react/lib/Label';

export class ButtonPrimaryExample extends React.Component<IButtonProps, {}> {
  public constructor() {

   insertText = async () => {
        // In the click event, write text to the document.
        await (context) => {
            let body = context.document.body;
            body.insertParagraph('Hello Office UI Fabric React!', Word.InsertLocation.end);
            await context.sync();

  public render() {
    let { disabled } = this.props;
    return (
      <div className='ms-BasicButtonsExample'>
        <Label>Click the button to insert text.</Label>
          disabled={ disabled }
          text='Insert text...'
          onClick={ this.insertText } />

このコードは、次の処理を実行します。This code does the following:

  • を使用して、React ライブラリを参照します。import * as React from 'react';References the React library using import * as React from 'react';.
  • の作成に使用する Fabric コンポーネント (PrimaryButton、IButtonProps、Label) を参照します。ButtonPrimaryExampleReferences the Fabric components (PrimaryButton, IButtonProps, Label) that are used to create ButtonPrimaryExample.
  • を使用して、新しいパブリック ButtonPrimaryExample コンポーネントを宣言して作成します。export class ButtonPrimaryExample extends React.ComponentDeclares and make public the new ButtonPrimaryExample component using export class ButtonPrimaryExample extends React.Component.
  • イベントを処理する insertText 関数を宣言します。onClickDeclares the insertText function to handle the onClick event.
  • 関数で React コンポーネントの UI を定義します。レンダリングで、コンポーネントの構造を定義します。render で、this.insertText を使って onClick イベントの関連付けを行います。renderDefines the UI of the React component in the render function. Render defines the structure of the component. Within render, you wire up the onClick event using this.insertText.

手順 3 - React コンポーネントをアドインに追加Step 3 - Add the React component to your add-in

src\components\app.tsx を開いて次の手順を実行することにより、アドインに ButtonPrimaryExample を追加します。Add ButtonPrimaryExample to your add-in by opening src\components\app.tsx and doing the following:

  • 次のインポート ステートメントを追加して、手順 2 で作成した button.tsx (ファイル拡張子は必要ありません) から ButtonPrimaryExample を参照します。Add the following import statement to reference ButtonPrimaryExample from button.tsx created in step 2 (no file extension is needed).

    import {ButtonPrimaryExample} from './button';
  • 既定の render() 関数を、<ButtonPrimaryExample /> を使った以下のコードに置き換えます。Replace the default render() function with the following code that uses <ButtonPrimaryExample />.

    render() {
        return (
            <div className="ms-welcome">
            <Header logo="assets/logo-filled.png" title={this.props.title} message="Welcome" />
            <HeroList message="Discover what this add-in can do for you today!" items={this.state.listItems} >
                <ButtonPrimaryExample />

変更を保存します。アドインを含む開いているすべてのブラウザー インスタンスは、自動的に更新され、ButtonPrimaryExample React コンポーネントが表示されます。既定のテキストとボタンが、ButtonPrimaryExample で定義されたテキストとプライマリ ボタンに置き換えられることに注意してください。Save your changes. All open browser instances, including the add-in, update automatically and show the ButtonPrimaryExample React component. Notice that the default text and button is replaced with the text and primary button defined in ButtonPrimaryExample.

関連項目See also