Expressとは
Node.jsで動作するWebアプリのフレームワークの一つ。
2017年1月現在、Nodeのフレームワークではこれが主流で使われている。
テンプレートエンジン
Expressでは様々な種類のテンプレートエンジンを使用できる。
有名なものを簡単に紹介する。
Pug(jade)
Hamlの影響を受けたJavascript製のテンプレートエンジン。特徴としてはタグで囲まずに記述できる。
※商標名登録の関係で、2017年からjadeがPugという名前に移行しました。
ygknさんご指摘ありがとうございます！
ejs
htmlライクに書ける。
なお、expressをインストールする際に、テンプレートエンジンを指定する方法は次の書き方。
ここではejsを使用した例
express -e ejs hoge //hoge.ejsを作成
Hello world
それでは実際にExpressをいれて「Hello world」を行いましょう。
ターミナルで下記のコマンドを実行します。
npm install express
すると、npm_moduleというフォルダが生成されているはずです。
ターミナルで実行したフォルダと同じ階層で適当な名前のjsファイルを作成し、以下のコードを打ち込みます。ぼくは名前をapp.jsとしました。
const express = require('express'); //expressモジュールのインストール
const app = express();
app.get('/', (req, res) => {
res.send('Hello Express!'); //記述内容
});
app.listen(3000); //3000ポートでサーバーが立てられる。
ここまで記述したら、あとはターミナルで上に作成したjsファイルを実行します。
node app.js
ここでエラーが出なければ、ブラウザでlocalhost:3000を開いてみてください。
上で作成したjsファイルのsend()の中身のメッセージが実行されているはずです。
express-generator
なにやらexpress-generatorというライブラリをインストールすると自動でアプリの雛形を作ってくれる優秀なライブラリがあるとのこと。
途中ハマりましたが、なんとか脱出。要はグローバルインストールしたら解決した。これだけいれればexpressコマンドが使えるので、express個別でのインストールはいらない？
まず、npmが入ってる状態で、次のコマンドを実行
npm install -g express-generator
すると次のような結果がでるはず。
/Users/.nodebrew/node/v7.2.1/lib
└─┬ express-generator@4.14.0
├─┬ commander@2.9.0
│ └── graceful-readlink@1.0.1
├─┬ mkdirp@0.5.1
│ └── minimist@0.0.8
└── sorted-object@2.0.0
これでexpressコマンドが使えるようになりました。
アプリケーションの作成はexpress ApplicationNameですが、デフォルトだとviewの中のファイルがjadeで作成されています。
今回はejsを使用したいので、ここでは express -e ApplicationName とすると、あら不思議、ejsファイルが出来上がっています。
その他のコマンドを見るにはexpress --helpをしましょう。
$ express --help
Usage: express [options] [dir]
Options:
-h, --help output usage information
--version output the version number
-e, --ejs add ejs engine support
--pug add pug engine support
--hbs add handlebars engine support
-H, --hogan add hogan.js engine support
-v, --view <engine> add view <engine> support (ejs|hbs|hjs|jade|pug|twig|vash) (defaults to jade)
-c, --css <engine> add stylesheet <engine> support (less|stylus|compass|sass) (defaults to plain css)
--git add .gitignore
-f, --force force on non-empty directory
次にアプリケーションフォルダの階層に移動してnpm installします。
そんでやっとDEBUG=ApplicationName:* npm startで実行できます。お疲れ様でした！！！
中身のファイルをいじっておらず、起動している場合、ブラウザでlocalhost:3000を開くと、Expressの文字が出てきます。