開発環境をセットアップする

このガイドは、クイック スタートまたはチュートリアルに従って Office アドインを作成できるようにツールを設定するのに役立ちます。 既にインストールされている場合は、この Excel Reactクイック スタートなどのクイック スタートを開始する準備が整います。

Microsoft 365 を入手する

Microsoft 365 アカウントが必要です。 Microsoft 365 開発者プログラムに参加することで、すべての Office アプリを含む 90 日間の無料の更新可能な Microsoft 365 サブスクリプションを入手できます。

環境をインストールする

選択できる開発環境は 2 種類あります。 2 つの環境で作成される Office アドイン プロジェクトのスキャフォールディングは異なるため、複数のユーザーがアドイン プロジェクトで作業する場合は、すべて同じ環境を使用する必要があります。

  • Node.js環境: 推奨されます。 この環境では、ツールがインストールされ、コマンド ラインで実行されます。 アドインの Web アプリケーションパーツのサーバー側は JavaScript または TypeScript で記述され、Node.js ランタイムでホストされます。 この環境には、Office リンターや WebPack というバンドルャー/タスクランナーなど、多くの便利なアドイン開発ツールがあります。 プロジェクトの作成とスキャフォールディング ツールである Yo Office は頻繁に更新されます。
  • Visual Studio 環境: 開発用コンピューターが Windows であり、.NET ベースの言語とフレームワーク (ASP.NET など) を使用してアドインのサーバー側を開発する場合にのみ、この環境を選択します。 Visual Studio のアドイン プロジェクト テンプレートは、Node.js環境のテンプレートほど頻繁に更新されません。 組み込みの Visual Studio デバッガーではクライアント側コードをデバッグできませんが、ブラウザーの開発ツールを使用してクライアント側コードをデバッグできます。 Visual Studio 環境 タブで後ほど詳しく説明します。

注意

Visual Studio for Mac Office アドイン用のプロジェクト スキャフォールディング テンプレートは含まれていないため、開発用コンピューターが Mac の場合は、Node.js環境で作業する必要があります。

選択した環境のタブを選択します。

インストールする主なツールは次のとおりです。

  • Node.js
  • npm
  • 任意のコード エディター
  • Yo Office
  • Office JavaScript のリンター

このガイドでは、コマンド ライン ツールの使用方法を理解していることを前提としています。

Node.jsと npm をインストールする

Node.jsは、最新の Office アドインの開発に使用する JavaScript ランタイムです。

web サイトから最新の推奨バージョンをダウンロードして、Node.jsをインストールします。 オペレーティング システムのインストール手順に従います。

npm は、Office アドインの開発に使用されるパッケージをダウンロードするオープンソースソフトウェア レジストリです。通常、Node.jsをインストールすると自動的にインストールされます。 npm が既にインストールされていて、インストールされているバージョンが表示されているかどうかを確認するには、コマンド ラインで次のコマンドを実行します。

npm -v

何らかの理由で手動でインストールする場合は、コマンド ラインで次のコマンドを実行します。

npm install npm -g

ヒント

Node バージョン マネージャーを使用して、複数のバージョンのNode.jsと npm を切り替えることができますが、これは厳密には必要ありません。 これを行う方法の詳細については、 npm の手順を参照してください

コード エディターのインストール

以下のような Web パーツを構築するのにクライアント側の開発をサポートしている任意のコード エディター、または IDE を使用することができます。

Yeoman ジェネレーター — Yo Office をインストールする

プロジェクトの作成とスキャフォールディング ツールは、 Office アドイン用の Yeoman ジェネレーターです。これは、 Yo Office と呼ばれます。 Yeoman と Yo Office の最新バージョンをインストールする必要があります。 以上のツールをグローバルにインストールするには、コマンド プロンプトから次のコマンドを実行します。

npm install -g yo generator-office

Office JavaScript リンターをインストールして使用する

Microsoft では、Office JavaScript ライブラリを使用するときに一般的なエラーをキャッチするのに役立つ JavaScript リンターを提供しています。 リンターをインストールするには、次の 2 つのコマンドを実行します ( Node.jsと npm をインストールした後)。

npm install office-addin-lint --save-dev
npm install eslint-plugin-office-addins --save-dev

Office アドインツール 用 Yeoman ジェネレーター を使用して Office アドイン プロジェクトを作成する場合は、残りのセットアップが自動的に行われます。 Visual Studio Code などのエディターのターミナルで、またはコマンド プロンプトで、次のコマンドを使用してリンターを実行します。 リンターによって見つかった問題は、ターミナルまたはプロンプトに表示され、Visual Studio Code などのリンター メッセージをサポートするエディターを使用している場合にも、コードに直接表示されます。 (Yeoman ジェネレーターのインストールの詳細については、「 Office アドイン用 Yeoman ジェネレーター」を参照してください)。

npm run lint

アドイン プロジェクトが別の方法で作成された場合は、次の手順に従います。

  1. プロジェクトのルートで、 .eslintrc.json という名前のテキスト ファイルを作成します (まだ存在しない場合)。 名前付きの plugins プロパティと extends、両方の型配列があることを確認します。 配列に plugins 含める "office-addins" 必要があり、配列に extends 含める "plugin:office-addins/recommended"必要があります。 次に簡単な例を示します。 .eslintrc.json ファイルには、追加のプロパティと 2 つの配列の追加メンバーが含まれている場合があります。

    {
      "plugins": [
        "office-addins"
      ],
      "extends": [
        "plugin:office-addins/recommended"
      ]
    }
    
  2. プロジェクトのルートで package.json ファイルを開き、配列に次の scripts メンバーがあることを確認します。

    "lint": "office-addin-lint check",
    
  3. Visual Studio Code などのエディターのターミナルで、またはコマンド プロンプトで、次のコマンドを使用してリンターを実行します。 リンターによって見つかった問題は、ターミナルまたはプロンプトに表示され、Visual Studio Code などのリンター メッセージをサポートするエディターを使用している場合にも、コードに直接表示されます。

    npm run lint
    

Script Labをインストールする

Script Labは、Office JavaScript ライブラリ API を呼び出すコードをすばやくプロトタイプ作成するためのツールです。 Script Lab自体は Office アドインであり、AppSource からインストールScript Lab。 Excel、PowerPoint、Word のバージョンと、Outlook 用の別のバージョンがあります。 Script Labを使用する方法については、「Script Labを使用して Office JavaScript API を探索する」を参照してください。

次の手順

独自のアドインを作成するか、Script Labを使用して組み込みのサンプルを試してみてください。

Office アドインを作成する

5 分間のクイック スタートを完了することで、Excel、OneNote、Outlook、PowerPoint、Project、または Word 用の基本的なアドインを簡単に作成することができます。 以前にクイック スタートを完了している場合で、より複雑なアドインを作成したい場合は、チュートリアルを試してみてください。

Script Lab を使用して API を調べる

Office JavaScript API でどのような機能が提供されているかを把握するには、Script Lab に組み込まれているサンプルのライブラリを参照してください。

関連項目