JavaScript界隈のフレームワークの組み合わせがファッキンホットですよね。個人的にはreactに頑張ってほしいと思いつつAngularJSも2が正式リリースされたら追いかけてみようかなというスタンスです。

といいつつ、最近reactを放置してたら自分のフィールドのVisual Studio 2015でどうやってやるのかすっかり忘れてしまったので、思い出したりするのを兼ねてやってみました。

nodejsとかは入れようね

nodejs入れよう。

webpack入れよう

最近はwebpackで色々やるのがはやりなんですかね。ということでwebpackを入れておきます。

npm install -g webpack

typescript 2.0 rcを入れよう

npm install -g typescript@rc

正式版がリリースされると@rcがいらなくなる。

Visual Studioのプラグイン

TypeScript

Visual Studioの拡張機能からTypeScript 2.0の拡張機能を入れます。betaって書いてあるけどRCらしい。

f:id:okazuki:20160903135420p:plain

WebPack

webpackのタスクランナーもダウンロードします。

f:id:okazuki:20160903135745p:plain

プロジェクトの作成

ASP.NET CoreのWebApplicationのプロジェクトを新規作成します。

f:id:okazuki:20160903140223p:plain

画面はreactで作るつもりなので画面のないWebAPIを選んでみましょう。

f:id:okazuki:20160903140436p:plain

TypeScriptの設定

tsconfig.jsonもさくっと作りましょう。アイテムテンプレートが提供されてるのでサクッと作れます。

f:id:okazuki:20160903140804p:plain

中身をreactもいけるように編集します。

{
  "compilerOptions": {
    "noImplicitAny": false,
    "noEmitOnError": true,
    "removeComments": false,
    "sourceMap": true,
    "target": "es5",
    "jsx": "react"
  },
  "exclude": [
    "node_modules",
    "wwwroot"
  ],
  "compileOnSave": false
}

webpackの設定

webpack.config.jsも作ります。これも先ほど入れたwebpackのプラグインのおかげでアイテムテンプレートが追加されてるのでサクッと作れます。

f:id:okazuki:20160903141306p:plain

ts-loaderを使うようにするところとかをさくっと書き換えます。

"use strict";

module.exports = {
    entry: "./scripts/app.tsx",
    output: {
        filename: "./wwwroot/scripts/bundle.js"
    },
    module: {
        loaders: [
            {
                test: /\.tsx?$/,
                loader: "ts-loader"
            }
        ]
    }
};

出力はwwwrootの下に出すようにします。

npmで色々インストール

まず初期化。名前は適当に。

npm init

次に、ts-loaderのインストール。

npm install -s ts-loader

TypeScriptをリンク

npm link typescript

react関連のインストール

ライブラリ系のインストールです。

npm install -s react react-dom
npm install -s @types/react @types/react-dom

1行目でJSのライブラリのインストール。2行目がTypeScriptの型定義のインストールです。 TypeScript 2.0ではnpmでインストールできるのでとてもいいです。

TypeScript作成

プロジェクトの下にscripts/app.tsxというファイルを作ります。TypeScript JSXのテンプレートがあるのでそれで作ります。

f:id:okazuki:20160903142121p:plain

中身はこんな感じのHello worldにしてみました。

import * as React from 'react';
import * as ReactDOM from 'react-dom';

const App = (props: { name: string }) => {
    return <div>Hello world!! {props.name}.</div>;
};

ReactDOM.render(
    <App name="okazuki" />,
    document.getElementById('content'));

index.htmlの作成

wwwrootの直下にindex.htmlを作ります。中身はこんな感じで。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Hello react</title>
</head>
<body>
    <div id="content"></div>
    <script type="text/javascript" src="scripts/bundle.js"></script>
</body>
</html>

webpackの実行

Task Runner Explorerを表示すると、以下のような感じでwebpackが実行できます。ビルド前に実行するように構成します。

f:id:okazuki:20160903143224p:plain

静的ファイルの有効化

このまま実行すると、静的ファイルが有効じゃないので残念ながら表示されません。（でした） project.jsonのdependenciesに以下の行を追加します。

"Microsoft.AspNetCore.StaticFiles": "1.0.0"

Startup.csのConfigureに静的ファイルのサポートを追加します。

public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory)
{
    loggerFactory.AddConsole(Configuration.GetSection("Logging"));
    loggerFactory.AddDebug();

    app.UseStaticFiles(); // これを追加
    app.UseMvc();
}

プロジェクトのプロパティで実行時にindex.htmlが表示されるように設定しておきます。

f:id:okazuki:20160903144325p:plain