検索
連載

Node.jsのMVCフレームワーク「Express」の基礎知識とインストール：MEANスタックで始めるWebアプリ開発入門（3）（2/3 ページ）

MEANスタックを用いたWebアプリの開発方法について紹介していく連載。今回は、サーバーサイドJavaScriptのNode.js用MVCフレームワーク「Express」についての概要、インストールとひな型作成の方法を紹介します。次世代フレームワーク「Koa」の紹介も。

[中村修太，クラスメソッド株式会社] PC用表示 関連情報
Share
Tweet
LINE
Hatena
前のページへ | 次のページへ

Expressの主な機能【2】テンプレートエンジン

　Expressでは「ejs」「ect」「haml」「jade」など、いろいろなテンプレートエンジンを使用してビューを記述できます。ここでは代表的な2つのテンプレートエンジンを見てみましょう。

「Haml」の影響を受けたJavaScript製テンプレートエンジン「jade」

　「jade」は、「Haml」の影響を受けたJavaScript製テンプレートエンジンです。通常のHTMLとは違い、タグを< >なしで書き、インデントでタグの関係を記述します。また、ファイル内にJavaScriptを書くこともできます。

　例えば下記のようなHTMLは、

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>Template Engine Sample</title>
  </head>
  <body>
    <p>Hello, Template Engines!</p>
  </body>
</html>

　jadeでは次のように記述できます。

!!! 5
html(lang = "ja")
  head
    meta(charset = "utf-8")
    title Template Engine Sample
  body
    p Hello, Template Engines!

　タグの記述やネストがすっきり書けていいですね。ただ、この少し特殊な記法はちょっとだけ慣れが必要かもしれません。

「ejs」に似た記述が可能なテンプレートエンジン「ect」

　「ect」は、パフォーマンスに優れ、「ejs」に似た記述が可能なテンプレートエンジンです。タグは通常のHTMLと同じように書きますが、CoffeeScriptのシンタックスも使用可能になっています。

・
・
  <body>
    <% if @users?.length : %>
      <ul>
        <% for user in @users : %>
             name:<%= user.name %>
        <% end %>
      </ul>
    <% else : %>
      <p>List is empty</p>
    <% end %>    
  </body>
・
・

　パフォーマンスや機能的にも優れているectですが、後述するExpressの自動生成機能ではectを使用できないので注意してください（自動生成後に自分で書き換える必要がある）。

Expressの主な機能【3】アプリのひな型を自動生成

　Express 4.xでは、「express-generator」というnpmモジュールを使用すると、アプリのひな型を自動生成することができます。ビューのテンプレートエンジンも選択でき、すぐに動作を確認することが可能です。

　express-generatorについては次の章で説明します。

Expressのインストール

　では、Expressをインストールして実際に動かしてみましょう。まずはnpmでexpressモジュールをインストールします。

% npm install express

　モジュールがインストールできたら、下記のようにjsファイルを作成しましょう。getメソッドでのルーティング処理を定義し、3000番ポートでアプリを起動します。

var express = require('express');
var app = express();
 
app.get('/', function (req, res) {
  res.send('Hello Express!');
});
 
app.listen(3000);
app.js

　nodeコマンドでアプリを実行し、「http://localhost:3000」にブラウザーでアクセスしてみてください。画面にメッセージが表示されます。

Copyright © ITmedia, Inc. All Rights Reserved.

前のページへ | 次のページへ