カレンダー

S M T W T F S
   1234
567891011
12131415161718
19202122232425
262728293031 
<< August 2018 >>

カテゴリー

アーカイブ

【JavaScriptランタイム環境】Node.js勉強中 Part3


0

    こんにちは、ニチロウです。

     

    今日は、Node.jsで使えるテンプレートエンジンの一つである「EJS」を紹介します。

     

    テンプレートエンジンというのは、

    「テンプレート」というWebページの構成が書いてある設計書を用意し、

    サーバ側に保存しているデータと組み合わせることによって、

    HTMLが自動的に生成され、表示することができる優れものです。

     

    その中の「EJS」は、JavaScriptとHTMLが組み合わさった初心者にやさしいテンプレートエンジンです。

    ※EJSは、「Embedded JavaScript Templates」の略語です。

    EJSのページはこれ→http://ejs.co/

     

    では、EJSを使ってみましょう。

    コマンドプロンプトもしくはターミナルを開いて、Node.jsのアプリケーションのフォルダに移動します。

    そこで以下のコマンドを実行してください。

    npm install -g ejs

     

    これで、Node.jsからEJSを利用することができます。

     

    index.ejsというファイルを作り、以下のコードを書きます。

    <!DOCTYPE html>

    <html lang="ja">

    <head>

        <meta http-equiv="content-type"

            content="text/html; charset=UTF-8">

        <title><%=title %></title>

    </head>

    <body>

        <h1><%=title %></h1>

        <p><%=msg %></p>

    </body>

    </html>

    ほとんどHTMLですね。

     

    次に、app.jsはまず以下のコードを書いてください。

    const http = require('http');
    const fs = require('fs');
    const ejs = require('ejs');
    const index_page = fs.readFileSync('./index.ejs', 'utf8');
    var server = http.createServer(getFromClient);
    server.listen(3000);
    console.log('Server start!');
    

     

    これで前回説明した、「httpの用意」、「サーバーの作成」、「待受」ができます。

    また、ファイルを読み込むモジュールである「fs」とEJSモジュール「ejs」も用意し、

    index.ejsをNode.jsで読み込ませます。

     

    そしてサーバー作成の関数getFromClientを書いていきます。

    function getFromClient(request, response){
        var content = ejs.render(index_page, {
          title: "無題",
          msg: "これはindex.ejsの<%=msg %>の変更を行います。"
        });
        response.writeHead(200, {'Content-Type': 'text:html'});
        response.write(content);
        response.end();
    }
    

     

    <%= ~~~ %>の中に何を表示させるかを以下の形のようにプログラムで制御することができます。

    {

        title: 〇〇,

        msg: 〇〇,

    }

     

    では、実際に「node app.js」というコマンドからNode.jsを起動してみましょう。

     

    index.ejsの中の<%=title %>と<%=msg %>にapp.jsで設定したものがちゃんと表示されています。

     

    これを使うことによって、表示するものをユーザーごとに変えるというようなことができます。

    EJSの基本は以上です。

     

    次回はスタイルシートや他のページの設定も行えるように「ルーティング」について説明します。

     

    ではまた(^_^)/~







    | 1/11PAGES | >>