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らしい。
WebPack
webpackのタスクランナーもダウンロードします。
プロジェクトの作成
ASP.NET CoreのWebApplicationのプロジェクトを新規作成します。
画面はreactで作るつもりなので画面のないWebAPIを選んでみましょう。
TypeScriptの設定
tsconfig.jsonもさくっと作りましょう。アイテムテンプレートが提供されてるのでサクッと作れます。
中身を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のプラグインのおかげでアイテムテンプレートが追加されてるのでサクッと作れます。
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のテンプレートがあるのでそれで作ります。
中身はこんな感じの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><metacharset="utf-8" /><title>Hello react</title></head><body><divid="content"></div><scripttype="text/javascript"src="scripts/bundle.js"></script></body></html>
webpackの実行
Task Runner Explorerを表示すると、以下のような感じでwebpackが実行できます。ビルド前に実行するように構成します。
静的ファイルの有効化
このまま実行すると、静的ファイルが有効じゃないので残念ながら表示されません。（でした）
project.jsonのdependenciesに以下の行を追加します。
"Microsoft.AspNetCore.StaticFiles": "1.0.0"
Startup.csのConfigureに静的ファイルのサポートを追加します。
publicvoid Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory) { loggerFactory.AddConsole(Configuration.GetSection("Logging")); loggerFactory.AddDebug(); app.UseStaticFiles(); // これを追加 app.UseMvc(); }
プロジェクトのプロパティで実行時にindex.htmlが表示されるように設定しておきます。
ついに実行
F5で実行すると、以下のようにHello worldが表示されます。
プロジェクトの構成こんな感じになってます
最終的にこんな感じのプロジェクトの構成になってます。app.tsxがVSに勝手にビルドされてるのがイマイチ。
