React を使用して Excel のアドインを構築するBuild an Excel add-in using React

この記事では、React と Excel の JavaScript API を使用して Excel アドインを構築する手順を説明します。In this article, you'll walk through the process of building an Excel add-in using React and the Excel JavaScript API.

環境Environment

  • オフィス デスクトップ: 最新バージョンの Office がインストールされていることを確認してください。アドイン コマンドには、ビルド 16.0.6769.0000 以上が必要です (16.0.6868.0000 推奨)。「Office アプリケーションの最新バージョンをインストールする」方法を参照してください。Office Desktop: Ensure that you have the latest version of Office installed. Add-in commands require build 16.0.6769.0000 or higher (16.0.6868.0000 recommended). Learn how to Install the latest version of Office applications.

  • Office Online: 追加設定はありません。Office Online の職場/学校アカウント用コマンドのサポートはプレビューになっていることにご注意ください。Office Online: There is no additional setup. Please note that support for commands in Office Online for work/school accounts is in preview.

前提条件Prerequisites

Web アプリを作成するCreate the web app

  1. ローカル ドライブにフォルダーを作成し、my-addin という名前を付けます。ここにアプリのファイルを作成します。Create a folder on your local drive and name it my-addin. This is where you'll create the files for your app.

  2. アプリ フォルダーに移動します。Navigate to your app folder.

    cd my-addin
    
  3. Yeoman ジェネレーター使用して、アドインのマニフェスト ファイルを生成します。次のコマンドを実行し、以下のスクリーンショットに示すとおり、プロンプトに応答します。Use the Yeoman generator to generate the manifest file for your add-in. Run the following command and then answer the prompts as shown in the following screenshot.

    yo office
    
    • Choose a project type:​ (プロジェクト タイプを選択してください) Office Add-in project using React frameworkChoose a project type: Office Add-in project using React framework
    • What would you want to name your add-in?: (アドインの名前を何にしますか) My Office Add-inWhat do you want to name your add-in?: My Office Add-in
    • Which Office client application would you like to support?: (どの Office クライアント アプリケーションをサポートしますか) ExcelWhich Office client application would you like to support?: Excel

      Yeoman ジェネレーター

      ウィザードが完了すると、ジェネレーターはプロジェクトを作成し、サポートする Node コンポーネントをインストールします。After you complete the wizard, the generator will create the project and install supporting Node components.

  4. Src/components/App.tsx を開き、コメントの「塗りつぶしの色を更新する」を検索し、塗りつぶしの色を '青' から'黄' に変更してから保存します。Open src/components/App.tsx, search for the comment "Update the fill color," then change the fill color from 'yellow' to 'blue', and save the file.

    range.format.fill.color = 'blue'
    
  5. src/components/App.tsx 内の render 関数の return ブロックで、<Herolist> を次のコードに更新し、ファイルを保存します。In the return block of the render function within src/components/App.tsx, update the <Herolist> to the code below, and save the file.

      <HeroList message='Discover what My Office Add-in can do for you today!' items={this.state.listItems}>
        <p className='ms-font-l'>Choose the button below to set the color of the selected range to blue. <b>Set color</b>.</p>
        <Button className='ms-welcome__action' buttonType={ButtonType.hero} iconProps={{ iconName: 'ChevronRight' }} onClick={this.click}>Run</Button>
    </HeroList>
    
  6. 自己署名証明書を信頼されたルート証明書として追加する」の手順を実行して、開発用コンピューターのオペレーティング システムの証明書を信頼します。Carry out the steps in Adding Self-Signed Certificates as Trusted Root Certificate to trust the certificate for your development computer's operating system.

  7. アドインをサイドロードすると Excel に表示されます。ターミナルで次のコマンドを実行します。Sideload your add-in so it will appear in Excel. In the terminal, run the following command:

    npm run sideload
    

お試しくださいTry it out

  1. ターミナルから、次のコマンドを実行してデベロッパー サーバーを起動します。From the terminal, run the following command to start the dev server.

    WindowsWindows:

    npm start
    
  2. Excel で、[ホーム] タブを選択し、リボンの [作業ウィンドウの表示] ボタンをクリックして、アドインの作業ウィンドウを開きます。In Excel, choose the Home tab, and then choose the Show Taskpane button in the ribbon to open the add-in task pane.

    Excel アドイン ボタン

  3. ワークシート内で任意のセルの範囲を選択します。Select any range of cells in the worksheet.

  4. 作業ウィンドウで [色の設定] ボタンをクリックし、選択範囲の色を青に設定します。In the task pane, choose the Set color button to set the color of the selected range to green.

    Excel アドイン

次の手順Next steps

これで完了です。React を使用して Excel アドインが正常に作成されました。次に、Excel アドインの機能の詳細について説明します。Excel アドインのチュートリアルに従って、より複雑なアドインをビルドします。Congratulations, you've successfully created an Excel add-in using React! Next, learn more about the capabilities of an Excel add-in and build a more complex add-in by following along with the Excel add-in tutorial.

関連項目See also