.Net CoreでTypeScriptでReactを動かしてみたい。

きっかけ

せっかくCoreが正式リリースしたし、仕事でちょっと調べることになって面白かったし、せっかくだからタイトルのような環境を作ってみたかった。

なお、自分は.net mvc 2がでたばっかのころ、新規プロジェクトを立ち上げ、.net mvc 4が出たころには別の仕事に移り、Web周りの開発を調べるのはそれ以来なので、すごくひさしぶり。かつ、勉強さぼってたのでもう完全に浦島太郎です。
reactはちょっと調べたところ、Viewモジュールを構築するイメージなので、いままでの感覚に近いかなとおもいってこっちを触ってみようとしています。

環境構築開始。

Visual Studio 2015 Update 3をインストール。

新規作成→プロジェクト。
テンプレート > Web を選択して
ASP.NET Core Web Application(.Net Core)を選択。
と、とりあえずからのプロジェクトを選択して、プロジェクトを作成。

index.htmlを最初のページに

http://www.fiyazhasan.me/configuring-typescript-for-asp-net-core-apps/
を参考にして、設定を追加。

project.jsonに"Microsoft.AspNetCore.StaticFiles": "1.0.0-rc2-final"を追加。

project.json

  "dependencies": {
    "Microsoft.NETCore.App": {
      "version": "1.0.0-rc2-3002702",
      "type": "platform"
    },
    "Microsoft.AspNetCore.Server.IISIntegration": "1.0.0-rc2-final",
    "Microsoft.AspNetCore.Server.Kestrel": "1.0.0-rc2-final",
    "Microsoft.AspNetCore.StaticFiles": "1.0.0-rc2-final" 
  }

おー、project.json保存するとパッケージを即時落としてくれるのか…

プロジェクトのwwwrootフォルダ内に、index.htmlを追加。

statup.js内のConfigureメソッドに以下の２文を追加。

startup.cs

        public void Configure(IApplicationBuilder app)
        {
　　　　　　 //追加分
            app.UseDefaultFiles();
            app.UseStaticFiles();
        }

とりあえずF5で動かしたら、Index.htmlが表示されました。

ここまでは大丈夫…

NPM　Bower

すでに、NPM？　Bower？どっちもパッケージ管理？なの？
という感じです。技術者としてやばい。

Visual Studioでは、ソリューションエクスプローラー（右側）のアレから、プロジェクトの右クリックメニュー　＞　追加　＞　新しい項目と選ぶといろいろ出てくるのでその中から、「npm 構成ファイル」を選択。すると、package.jsonが表示されます。

そして写経。

package.json

{
  "version": "1.0.0",
  "name": "asp.net",
  "private": true,
  "devDependencies": {},
  "dependencies": {
    "bower": "^1.7.9",
    "gulp": "^3.9.1",
    "gulp-concat": "^2.6.0",
    "gulp-sourcemaps": "^1.6.0",
    "gulp-typescript": "^2.13.6",
    "gulp-uglify": "^1.5.4",
    "merge2": "^1.0.2",
    "rimraf": "^2.5.2"
  }
}

dependencies内をまんま写経。ファイルを保存するとすぐにパッケージのインストールを始めます。
依存関係にNPMが追加され、記述したものが続々と追加されます。

次に参考資料では、angular.jsを使ってるけど、Reactしてみたいので、ちょっと改変。
また追加　＞　新しい項目から、Bower 構成ファイルを選択。bower.jsonができるので、reactを追加。

bower.json

{
  "name": "asp.net",
  "private": true,
  "dependencies": {
    "react": "^15.1.0"
  }
}

react部分を追加。
このタイミングで、wwwrootにlibフォルダが追加されてました。そっちにもファイルが追加されるようです。
しかし、package.jsonも、project.jsonもだけど、パッケージ名を入力しようとすると、候補がちゃんと出てきます。パッケージ名入力後、バージョン指定も補完してくれるので、楽ですね。さすがVisual Studio。

TypeScriptの定義ファイル。

すでに、たいぷすくりぷと・・・と知能が急速に退行しそうですが、近年のフロントエンド開発には必修科目として認識、せっかくなので勉強をしましょう。さて、無知な自分でもサクサクとコードが書けるよう、TypeScriptの定義ファイルをいれて、コード補完をもっと充実させようと思います。というかそのためにVisual Studio使っていますし。

参考資料では、また　追加　＞　新しい項目　から、TypeScript JSON 構成ファイルを追加します。

tsconfig.json

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

うん、わからん・・・と、とりあえずそのまま流すかな・・・

次は定義ファイルを入れるようですが、おっと、npmコマンドをついに使うことに…仕方ないので、Node.jsごとインストールしました。（いままで入れてなかった）
ひょっとしたら、Visual Studioでインストールできるのかな？

コマンドプロンプトを立ち上げて、プロジェクトフォルダに移動。

npm install -g tsd

じゅもん　を　となえた。
いんすとーる　は　かんりょう　した！

石器時代の開発者には何が起こってるかよくわかってないのですｗ

この辺から参考資料を一旦、Reactのこと中心に書いてある

を参考にし始めます。

reactの定義ファイルを得るために、さらにじゅもんととなえてみた。

tsd install react-global --save

typings　フォルダ　が　できた！
react フォルダ　が　つくられた！
なんか　ファイル　が　はいった！
tsd.d.ts ファイルもできた！
プロジェクトエクスプローラでもみえた！

#　サンプルコードを書いてみる。
さて、ここまででとりあえずコード補完に身をまかせながら、TypeScriptが書けそうです。
参考サイトのコードを写経してみました。
今回は、scriptフォルダを作成し、そこにHelloWorld.tsxを追加して・・・

ん？エラーが出てます。

'--jsx' フラグが指定されていないと、JSXを使用できません。

ちょっとハマる

フラグ。

参考サイトでは以下のような記述。

プロジェクトの設定
プロジェクトのプロパティを開いて、TypeScriptビルドを開いて以下の項目を変更します。
TSXファイルでのJSXコンパイルを「応答」に変更
モジュールシステムを「CommonJS」に変更

プロジェクトのプロパティにそんな項目はない。
ちょっと検索したところ、どうもtsconfig.jsonで設定できそう。
コード補完にたよって、jsx！出てきた！値は、reactとpreserve。とりあえず、reactを選択。
さらにmoduleを追加。

tsconfig.json

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

エラーが消えました。
なるほど、設定はここで行うわけだ・・・。

走らせる

サンプルページではここで、実行して結果を得られてます。
同じようにこっちも実行。

…

でません。

そりゃ、TypeScriptのトランスパイル設定が無いからかと思います。
その辺をやってくれるようにするのが、どうやらgulpのようです。

gulp。

いろんなタスクを自動化してくれるやつ。
今回はJSXのトランスパイルを担当してもらう。

先にあげた参考資料には設定のコードが乗っていたので、トランスパイル部分のみをなるべく抜き出しつつ、ちゃんと通るように変更を行った結果がこちらになります。

gulpfile.js

'use strict';

var gulp = require('gulp');                         //必須。
var tsc = require('gulp-typescript');　             //タイプスクリプトのトランスパイラ　プラグイン
var tsProject = tsc.createProject('tsconfig.json'); //タイプスクリプトの設定を読み込む


//いろんなパスの設定。
var paths = {webroot: "./wwwroot/"};
paths.tsOutputPath = paths.webroot + 'js'; //出力先
paths.allTypeScript = "./script/**/*.ts";  //.tsの場所
paths.allTSX = "./script/**/*.tsx";        //.tsxの場所。これを忘れていてtsxが対象外となった。
paths.typings = './typings'; 
paths.libraryTypeScriptDefinitions = './typings/**/*.ts'; //定義ファイルの場所

//パスの*はminmatchというマッチライブラリ。
//**は「セパレータを含んでも関係なく探す」やつ。
//./typings/**/*.tsなら、「typingsフォルダ以下ならどこにいても最後が.tsのやつは見つけ出す！」という意味に。

gulp.task('compile:ts', function () {

//対象を指定
    var sourceTsFiles = [paths.allTypeScript,
                         paths.allTSX,
                         paths.libraryTypeScriptDefinitions];                     

    return gulp.src(sourceTsFiles)                       //さっき設定した場所にたいして
               .pipe(tsc(tsProject))                     //TypeScriptのトランスパイルをおこなって
               .dts.pipe(gulp.dest(paths.tsOutputPath)); //結果を出力先へ。
    
});

一番重要なのは最後のreturn行。
srcで対象を指定して
pipeでそれに対する処理を設定。今回は'gulp-typescript'を実行。
さらにpipeで処理を追加。gulp.destは結果を引数の場所へ出力する処理。
最後の行のdtsはこれをつけておくと、開いていたファイルの更新確認をしませんでした。
この辺のいろんなメソッドをちゃんと覚えたほうが楽しそうですね。

Visual Studioのタスクランナーエクスプローラより実行し、エラーが出なくなったのを確認した後
実行してみると…

動いた！ちゃんとうごいたよ！

何とか、目標は達成できた様子。

とりあえずいろんなコンポーネントをいじくって、自分にReactが合うか、実装すべき処理が対応できるかなど、触って勉強していかないといけませんね。まだまだスタートラインに立ったばかりです。

まとめ

定義ファイルのインストールとタスクランナーの設定で何とかなる。

課題

今回はbowerでインストールしたけど、npmでもインストールできるようだし、NuGetにもある様子。いったいどれ使えばいいのさ。
星の数ほどあるモジュール(npm,bower,gulpプラグインなどなど）に何があるかとかをどうやって勉強するべきか。

で、そもそもなんか作りたいものあるんだっけ？