ASP.NET Core

ASP.NET CoreとTypeScriptのインストール

まず、必要な場合はASP.NET Coreをインストールします。このクイックスタートガイドでは、Visual Studio 2015または2017が必要です。

次に、お使いのVisual Studioのバージョンに最新のTypeScriptがまだインストールされていない場合は、インストールできます。

新規プロジェクトの作成

  1. ファイルを選択します。
  2. 新規プロジェクトを選択します (Ctrl + Shift + N)
  3. プロジェクト検索バーで.NET Coreを検索します。
  4. ASP.NET Core Web アプリケーションを選択し、次へボタンを押します。

Visual Studio Project Window Screenshot

  1. プロジェクト名とソリューション名を指定します。その後、作成ボタンを選択します。

Visual Studio New Project Window Screenshot

  1. 最後のウィンドウで、空テンプレートを選択し、作成ボタンを押します。

Visual Studio Web Application Screenshot

アプリケーションを実行し、正常に動作することを確認します。

A screenshot of Edge showing "Hello World" as success

サーバーの設定

依存関係 > NuGet パッケージの管理 > 参照を開きます。Microsoft.AspNetCore.StaticFilesとMicrosoft.TypeScript.MSBuildを検索してインストールします。

The Visual Studio search for Nuget

Startup.csファイルを開き、Configure関数を次のように編集します。

public void Configure(IApplicationBuilder app, IHostEnvironment env)
{
    if (env.IsDevelopment())
    {
        app.UseDeveloperExceptionPage();
    }

    app.UseDefaultFiles();
    app.UseStaticFiles();
}

UseDefaultFilesとUseStaticFilesの下の赤い波線は、VSを再起動すると消える場合があります。

TypeScriptの追加

次に、新しいフォルダーを追加してscriptsと名付けます。

The Path of "Add" then "New Folder" in Visual Studio from a Web Project

TypeScriptコードの追加

scriptsを右クリックして新しい項目をクリックします。次に、TypeScriptファイルを選択し、ファイル名をapp.tsにします。

A highlight of the new folder

サンプルコードの追加

次のコードをapp.tsファイルに追加します。

ts
function sayHello() {
  const compiler = (document.getElementById("compiler") as HTMLInputElement)
    .value;
  const framework = (document.getElementById("framework") as HTMLInputElement)
    .value;
  return `Hello from ${compiler} and ${framework}!`;
}

ビルドの設定

TypeScriptコンパイラの構成

まず、TypeScriptにビルド方法を指示する必要があります。「scripts」を右クリックして、「新規アイテム」をクリックします。次に、「TypeScript構成ファイル」を選択し、デフォルト名の「tsconfig.json」を使用します。

A screenshot showing the new file dialogue with TypeScript JSON Config selected

tsconfig.jsonファイルの内容を以下に置き換えます。

{
  "": {
    "": true,
    "": true,
    "": true,
    "": "es6"
  },
  "": ["./app.ts"],
  "compileOnSave": true
}
  • noEmitOnError：エラーが報告された場合は、出力ファイルを生成しません。
  • noImplicitAny：暗黙的なany型を持つ式と宣言に対してエラーを発生させます。
  • sourceMap：対応する.mapファイルを生成します。
  • target：ECMAScriptのターゲットバージョンを指定します。

注：「ESNext」は最新のサポート対象バージョンをターゲットにします。

noImplicitAnyは、新しいコードを作成する際には常に良いアイデアです。これにより、誤って型指定されていないコードを作成しないようにすることができます。「compileOnSave」を使用すると、実行中のウェブアプリでコードを簡単に更新できます。

NPMの設定

JavaScriptパッケージをダウンロードできるように、NPMを設定する必要があります。プロジェクトを右クリックして、「新規アイテム」を選択します。次に、「NPM構成ファイル」を選択し、デフォルト名の「package.json」を使用します。

Screenshot of VS showing new file dialog with 'npm configuration file' selected

package.jsonファイルの"devDependencies"セクションに、gulpとdelを追加します。

"devDependencies": {
    "gulp": "4.0.2",
    "del": "5.1.0"
}

ファイルを保存するとすぐに、Visual Studioがgulpとdelのインストールを開始します。開始しない場合は、package.jsonを右クリックして「パッケージの復元」を選択します。

その後、ソリューションエクスプローラーにnpmフォルダが表示されます。

Screenshot of VS showing npm folder

gulpの設定

プロジェクトを右クリックして、「新規アイテム」をクリックします。次に、「JavaScriptファイル」を選択し、「gulpfile.js」という名前を使用します。

js
/// <binding AfterBuild='default' Clean='clean' />
/*
This file is the main entry point for defining Gulp tasks and using Gulp plugins.
Click here to learn more. http://go.microsoft.com/fwlink/?LinkId=518007
*/
var gulp = require("gulp");
var del = require("del");
var paths = {
  scripts: ["scripts/**/*.js", "scripts/**/*.ts", "scripts/**/*.map"],
};
gulp.task("clean", function () {
  return del(["wwwroot/scripts/**/*"]);
});
gulp.task("default", function (done) {
    gulp.src(paths.scripts).pipe(gulp.dest("wwwroot/scripts"));
    done();
});

最初の行は、ビルドが完了した後にVisual Studioに「default」タスクを実行するように指示します。また、Visual Studioにビルドのクリーンアップを要求すると、「clean」タスクも実行されます。

次に、gulpfile.jsを右クリックして、「タスクランナーエクスプローラー」をクリックします。

Screenshot of right clicking on the "Gulpfile.js" with 'Task Runner Explorer' selected

「default」と「clean」タスクが表示されない場合は、エクスプローラーを更新します。

Screenshot of task explorer with "Gulpfile.js" in it

HTMLページの作成

wwwrootフォルダを右クリックします（フォルダが表示されない場合は、プロジェクトをビルドしてみてください）。そして、内部にindex.htmlという名前の新しいアイテムを追加します。index.htmlには次のコードを使用します。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <script src="scripts/app.js"></script>
    <title></title>
</head>
<body>
    <div id="message"></div>
    <div>
        Compiler: <input id="compiler" value="TypeScript" onkeyup="document.getElementById('message').innerText = sayHello()" /><br />
        Framework: <input id="framework" value="ASP.NET" onkeyup="document.getElementById('message').innerText = sayHello()" />
    </div>
</body>
</html>

テスト

  1. プロジェクトを実行します。
  2. ボックスに文字を入力すると、メッセージが表示/変更されます！

A GIF of Edge showing the code you have just wrote

デバッグ

  1. Edgeでは、F12キーを押してデバッガータブをクリックします。
  2. 最初のlocalhostフォルダ、次にscripts/app.tsを参照してください。
  3. returnを含む行にブレークポイントを設定します。
  4. ボックスに文字を入力して、ブレークポイントがTypeScriptコードでヒットし、検査が正しく機能することを確認します。

An image showing the debugger running the code you have just wrote

おめでとうございます。TypeScriptフロントエンドを持つ独自の.NET Coreプロジェクトを構築しました。

TypeScriptドキュメントはオープンソースプロジェクトです。プルリクエストを送信して、これらのページの改善にご協力ください by sending a Pull Request ❤

このページへの貢献者
BKBowden Kelly (56)
OTOrta Therox (15)
GCGabrielle Crevecoeur (11)
DRDaniel Rosenwasser (3)
LZLimin Zhu (2)
14+

最終更新日：2024年3月21日