Visual Studio で Office アドインを JavaScript から TypeScript に変換する

Visual Studio の Office アドインプロジェクトが JavaScript で開始されている場合は、プロジェクトをリビルドせずに TypeScript に移行できます。この記事では、Excel アドインのプロセスを示します。 Visual Studio の他の Office アドインプロジェクトの種類にも同じ手順を使用できます。

実行する内容

ビルド中に TypeScript ファイルがトランスパイルされるように、 Microsoft.TypeScript.MSBuild パッケージを追加します。
TypeScript と型定義の tsconfig.json と package.json 設定を追加します。
JavaScript ファイルの名前を .js から .ts に変更し、TypeScript の変更が必要なコードを更新します。
Excel で変換されたアドインを実行します。

前提条件

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 つのセルを選択します。
作業ウィンドウで、[ 強調表示 ] を選択して、最大値を含む選択範囲内のセルを強調表示します。

フィードバック

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

最終更新: 2026-06-01