Visual Studio の Office アドインプロジェクトを TypeScript に変換する

Visual Studio の Office アドインテンプレートを使用して JavaScript を使用するアドインを作成すると、そのアドインプロジェクトは TypeScript に変換できます。この記事では、Excel アドイン用のこの変換プロセスについて説明します。同じ手順を使用すると、その他の種類の Office アドインプロジェクトを JavaScript から Visual Studio の TypeScript に変換できます。

前提条件

Office/SharePoint 開発ワークロードがインストールされている Visual Studio 2022 以降

ヒント

既に Visual Studio がインストールされている場合は、Visual Studio インストーラーを使用して、Office/SharePoint 開発ワークロードがインストールされていることを確認してください。このワークロードがまだインストールされていない場合は、Visual Studio インストーラーを使用してインストールしてください。
Excel 2016以降。

アドインプロジェクトの作成

注:

既存のプロジェクトがある場合は、このセクションをスキップします。

Visual Studio で、[新しいプロジェクトの作成] を選択します。 Visual Studio 開発環境が既に開いている場合は、メニューバーの [ファイル>新規作成>Project ] を選択して、新しいプロジェクトを作成できます。
検索ボックスを使用して、アドインと入力します。 [Excel Web アドイン] を選択し、[次へ] を選択します。
プロジェクトに名前を付けて、[作成] を選択します。
[Office アドインの作成] ダイアログウィンドウで、[新機能を Excel に追加する] を選択してから、[完了] を選択してプロジェクトを作成します。
ソリューションが Visual Studio によって作成され、2 つのプロジェクトがソリューションエクスプローラーに表示されます。 Home.html ファイルが Visual Studio で開きます。

アドインプロジェクトを TypeScript に変換する

Nuget パッケージを追加する

[ツール>Nuget パッケージ マネージャー>ソリューションの Nuget パッケージの管理] を選択して、Nuget パッケージマネージャーを開きます。
[ 参照 ] タブを選択します。 [Microsoft.TypeScript.MSBuild] を検索して選択します。このパッケージを ASP.NET Web プロジェクトにインストールするか、既にインストールされている場合は更新します。 ASP.NET Web プロジェクトには、最後にテキスト Web 追加されたプロジェクト名があります。これにより、ビルドの実行時にプロジェクトが JavaScript にトランスパイルされます。

注:

TypeScript プロジェクトには、TypeScript ファイルと JavaScript ファイルをどちらも一緒に含めることができ、プロジェクトはコンパイルされます。 TypeScript は、JavaScript にコンパイルされる JavaScript の型付けスーパーセットであるためです。

TypeScript 構成ファイルを作成する

ソリューションエクスプローラーで、ASP.NET Web プロジェクトを右クリック (または選択して長押し) し、[追加>新しい項目] を選択します。 ASP.NET Web プロジェクトには、最後にテキスト Web 追加されたプロジェクト名があります。
[ 新しい項目の追加 ] ダイアログで、 TypeScript JSON 構成ファイルを検索して選択します。 [ 追加] を選択 して 、tsconfig.json ファイルを作成します。

次の JSON に示すように、 tsconfig.json ファイルも include セクションに更新します。

{
  "compilerOptions": {
    "noImplicitAny": false,
    "noEmitOnError": true,
    "removeComments": false,
    "sourceMap": true,
    "target": "es5",
    "lib": [ 
      "es2015",
      "dom"
    ]
  },
  "exclude": [
    "node_modules",
    "wwwroot"
  ],
  "include": [
    "scripts/**/*",
    "**/*"
  ]
}

ファイルを保存します。 tsconfig.json設定の詳細については、「tsconfig.jsonとは」を参照してください。

npm 構成ファイルを作成する

ソリューションエクスプローラーで、ASP.NET Web プロジェクトを右クリック (または選択して長押し) し、[追加>新しい項目] を選択します。 ASP.NET Web プロジェクトには、最後にテキスト Web 追加されたプロジェクト名があります。
[ 新しい項目の追加 ] ダイアログで、 npm 構成ファイルを検索します。 [ 追加] を選択 して 、package.json ファイルを作成します。
次の JSON に示すように、package.json ファイルを更新して、devDependencies セクションに@types/jquery パッケージを含めます。
```
{
  "version": "1.0.0",
  "name": "asp.net",
  "private": true,
  "devDependencies": {
    "@types/jquery": "^3.5.30"
  }
}
```
ファイルを保存します。
npm プロジェクトのプロパティを開くには、[ ツール>オプション]、[ プロジェクトとソリューション>Web パッケージ管理>パッケージの復元] の順に移動します。 [プロジェクトで復元] と [保存時に復元] の両方を "True" に設定します。 [ OK] を選択 して設定を保存します。

JavaScript ファイルを更新する

JavaScript ファイル (.js) を TypeScript ファイル (.ts) に変更します。次に、コンパイルに必要な変更を加えます。このセクションでは、新しいプロジェクトの既定のファイルについて説明します。

Home.js ファイルを見つけて、名前を Home.ts に変更します。
./Functions/FunctionFile.js ファイルを見つけて、名前をFunctionFile.ts に変更します。
./Scripts/MessageBanner.js ファイルを見つけて、名前を MessageBanner.ts に変更します。
./Scripts/MessageBanner.ts で、行 _onResize(null); を見つけて、次のものに置き換えます。
```
_onResize();
```

Visual Studio によって生成された JavaScript ファイルには、TypeScript 構文が含まれていません。それらを更新することを検討する必要があります。たとえば、次のコードは、文字列型を含むようにパラメーターを showNotification に更新する方法を示しています。

 function showNotification(header: string, content: string) {
        $("#notification-header").text(header);
        $("#notification-body").text(content);
        messageBanner.showBanner();
        messageBanner.toggleExpansion();
    }

変換後のアドインプロジェクトを実行する

Visual Studio で F5 キーを押すか 、[スタート ] ボタンを選択して Excel を起動し、リボンに [タスクウィンドウ アドインの表示] ボタンが表示されます。アドインは IIS 上でローカルにホストされます。
Excel で [ ホーム ] タブを選択し、リボンの [ タスクウィンドウの表示 ] ボタンを選択してアドイン作業ウィンドウを開きます。
ワークシートで、数値を格納している 9 つのセルを選択します。
作業ウィンドウの [強調表示] ボタンをクリックして、選択した範囲内で最大の値を格納しているセルを強調表示にします。

フィードバック

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

Last updated on 2025-05-12

次の方法で共有

Visual Studio の Office アドイン プロジェクトを TypeScript に変換する

前提条件

アドイン プロジェクトの作成

アドイン プロジェクトを TypeScript に変換する