Node.js + TypeScript + ExpressでPOSTを処理する@VS2017

投稿者: | 2017-09-09

珍しくHoloLensネタではなく、しかも備忘録です。

Visual Studio 2017からインストーラにNode.js開発ツールが含まれるようになりました。Node.js用のWebAP MVCフレームワークであるExpressのプロジェクトテンプレートも用意されています。
個人的にTypeScriptが最近気に入っており、またサーバ連携するHoloアプリ開発にも今後役立つかなあと思い少しずつ勉強しています。

今回は学習の記録として環境構築、プロジェクト作成、POSTリクエストを処理するところまでまとめたいと思います。

環境構築

Node.jsのインストール
Chocolatey経由でインストールすると楽でした。
Chocolatey
Chocolatey Gallery | Node JS 8.4.0
Visual Studio 2017のインストール
Node.js開発をチェックしてインストールします
TypeScript SDK for Visual Studio 2017のインストール
下記URLからインストーラをDLしてインストール。
https://www.microsoft.com/en-us/download/details.aspx?id=55258

プロジェクト作成

新規プロジェクトから、「TypeScript」→「基本的なNode.js Express 4 アプリケーション」を選択します。

初期状態のプロジェクト構成は以下の通りとなっています。

型定義ファイルとしてtypingsが使われているので、node.d.tsと各モジュールのindex.d.tsをすべて削除して、@typesに乗り換えます。npmのパッケージのインストールはCLIから実施してもいいし、ソリューションエクスプローラの「npm」を右クリックし、「新しいnpmパッケージのインストール」からGUIを使ってインストールすることもできます。インストール結果は以下の通りです。

この状態でアプリをビルドして起動すると、以下のページが表示されます。

POSTリクエストを処理する

デフォルトではテンプレートエンジンとしてPug(Jade)が使われています。その記法に従って、簡単なフォームを作ります。

extends layout

block content
  h1= title
  p Welcome to #{title}
  hr
  form(method='POST' action='./')
    input(type='text', name='name' value='')
    input(type='submit', value='submit')

つづいてrouterスクリプト(MVCのコントローラに該当)である/routes/index.tsを編集します。

/*
 * GET home page.
 */
import express = require('express');
const router = express.Router();

router.get('/', (req: express.Request, res: express.Response) => {
    res.render('index', { title: 'Express' });
});

// 追加
router.post('/', (req: express.Request, res: express.Response) => {
    console.log(req.body.name);
    // 画面に入力値を表示
    // index.pug内の、h1=titleに出力される
    res.render('index', { title: 'Hello ' + req.body.name });
});

export default router;

しかし現時点でインストールされているnpmモジュールだけではリクエストボディ(req.body)を参照することができません。リクエストボディを処理するためにはbody-parserモジュールが必要となります。

型定義ファイルも一緒に導入しました。body-parserモジュールを使えるようにするため、app.tsを編集します。

import debug = require('debug');
import express = require('express');
import path = require('path');
import bodyParser = require('body-parser'); // 追加

import routes from './routes/index';
import users from './routes/user';

var app = express();

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'pug');

app.use(bodyParser.urlencoded({ extended: false }));    // 追加

app.use(express.static(path.join(__dirname, 'public')));
~以下、省略~

この状態でアプリを起動すると、以下の画面が表示されます。

フィールドに文字列を入力してボタンを押すと、コンソールに入力値が表示されます。

また、画面にも入力値が表示されます。

まとめ

Visual Studio 2017にてNode.js + TypeScript + Expressのプロジェクトを作る方法をまとめました。
いちいちtypingsの型定義ファイルを消すのは面倒なので、Expressのプロジェクトテンプレートは自分で作った方がいいかもなあ、と思いました。何かいいテンプレートがあったら教えてください。