かずきのBlog@hatena

すきな言語は C# + XAML の組み合わせ。Azure Functions も好き。最近は Go 言語勉強中。日本マイクロソフトで働いていますが、ここに書いていることは個人的なメモなので会社の公式見解ではありません。

yoを使ってExpressJSをTypeScriptで始めてみよう(VS Code)

Yeomanを使って簡単にTypeScriptでExpressJSを始めてみたいと思います。

The web's scaffolding tool for modern webapps | Yeoman

npm install -g yo # まだインストールしてない場合
yo

yoコマンドを打ち込んだらウィザードが始まります。Install a generatorを選んでジェネレータをインストールします。

検索画面になるのでtypescriptと打ち込んでexpress-tsを選んでEnterを押します。 そうするとジェネレータがインストールされます。

次にyoコマンドを打ち込んだらExpress TSを選んでEnterを押します。 そして、プロジェクトフォルダを作るかと切れるのでそのままEnter。 適当な名前を入れてEnter。 テンプレートエンジンを選ぶように促されるのでデフォルトのjadeを選んでEnter。

npmとかの依存ライブラリのインストールが始まります。そして、終わったらプロジェクトフォルダに移動して、TypeScriptの型定義ファイルをインストールします。

tsd install

そして、gulpfile.js用に以下のコマンドを打ち込んでgulpとgulp-typescriptを入れておきます。

npm install gulp gulp-typescript --save-dev

ここまで終わったらcode .と打ち込んでVS Codeを起動します。

gulpfile.jsを作ってsrcフォルダの中身をコンパイルしてappフォルダに出力するスクリプトを書きます。

var gulp = require('gulp');
var ts = require('gulp-typescript');

gulp.task('build', function() {
    var project = ts.createProject('./tsconfig.json');
    return gulp.src('./src/**/*.ts')
        .pipe(ts(project))
        .js
        .pipe(gulp.dest('./app'));
});

Ctrl + Shift + Bでビルドします。

F5を押してデバッグ実行でNode.jsを選択します。app/bin/www.jsが選ばれてるはずなので、そのままもう一度F5を押して実行します。

http://localhost:3000/にアクセスすれば画面が表示されます。

f:id:okazuki:20160110220359p:plain