koa
koa は Expressのチームによって設計された、新しいWebフレームワーク。
ES2015 の generator/yield を使用することにより、Expressでよくある callback地獄を回避し、簡潔にコーディング出来るようになった。
ECT
ECT は ejs や jade のような templateエンジン。
非常に早い事が特徴。
必要なモジュールのインストール
npm で必要なモジュールをインストール。
$ mkdir web-app
$ cd web-app
$ npm init
# Enter連打
$ npm install --save koa koa-route koa-static koa-views ect- koa-route : ルーティングを行う、koa のミドルウェア。
- koa-static: 静的ファイルを公開するための koa のミドルウェア。
- koa-views : テンプレートエンジンを使用してレスポンスを組み立てるための koa のミドルウェア
フォルダ構成
以下の様なフォルダ構成を作成。
{PROJECT_ROOT}
|- public
| |- css
| |- js
| `- images
`- views
app.jsの作成
プロジェクトのルート直下に app.js というファイルを作成し、
そこにコーディングしていく。
app.js
// app.js
var app = require('koa')();
var route = require('koa-route');
var serve = require('koa-static');
var views = require('koa-views');
// ectをテンプレートエンジンとして指定
app.use(views(__dirname + '/views', {
map: {
html: 'ect'
}
}));
// GET /test
app.use(route.get('/test', function *version(){
yield this.render('test.ect', {
title: 'TEST APPLICATION',
version: '1.0.0'
});
}));
// static files
app.use(serve(__dirname + '/public'));
app.listen(3000);http://localhost:3000/test にリクエストがあった場合に views/test.ect に title と version を埋め込んで、レスポンスとして返す。
Viewの作成
viewファイルを作成していく。
views/layout.ect
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title><%- @title %></title>
<link rel="stylesheet" href="/css/bootstrap.min.css">
<link rel="stylesheet" href="/css/style.css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed"
data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
</div>
</nav>
<div class="container">
<% content %>
</div>
<footer class="footer">
<div class="container">
<% include 'views/footer.ect' %>
</div>
</footer>
</body>
</html>ECT 単体で使用した場合、include では ファイルが同一階層にあれば <% include 'footer' %> で取り込めるが、 koa のテンプレートエンジンとして使用した場合、ファイルの指定を app.jsからの相対パス とし、ファイルの拡張子を指定しないとViewファイルが見つけられず、例外が発生する。
public に配置された css などは、koa-static によって / (ルート) に公開されている。
<link> や <script> のパス指定は /css/{file_name}, /js/{file_name} とルートからのパスを指定する。
views/footer.ect
<p class="text-muted">
© <%- (new Date()).getFullYear() %> -
<a href="https://kazunori-kimura.github.io/" target="_blank">Kazunori.Kimura</a>
</p>コピーライトの年表示に JavaScript を埋め込んでいる。
views/test.ect
<% extend 'views/layout.ect' %>
<div class="jumbotron">
<h1><%- @title %></h1>
<p>version info: <%- @version %></p>
</div>app.js でViewに渡されたパラメータをHTMLに埋め込む。
layout.ect での include と同様に、 extend でレイアウトファイルを指定する場合も app.jsからの相対パス とする必要があることに注意。
実行
$ node app.jsnodejs のバージョンが 0.12.x 未満の場合は --harmony オプションが必要になる。
アプリを実行したら、ブラウザで http://localhost:3000/test にアクセスし画面が表示されることを確認する。
0 件のコメント:
コメントを投稿