546 views

node.jsの基本

node.jsの最大の目的は、サーバーサイドもjavascirptで書くことです。
試しに「hello NEM!」とブラウザに表示するサンプルプログラムを作って試してみましょう。
以下のサンプルプログラムを書きます。本書ではC:\Users\konishi\node\nem-serverフォルダの下にindex.jsファイルを作成し、そこに以下のコードを書いています。

const http = require('http');

function index(request, response) {
    response.end("hello NEM!");
}

var server = http.createServer(index);

server.listen(3000);

サンプルプログラムが書けたら、index.jsをnodeで実行します。

node index.js

実行したら、ブラウザを起動し、http://localhost:3000/にアクセスしてみます。
図1のように表示されたら成功です。

図1 ブラウザでhello NEM!を表示する

テンプレート

テンプレートは、サーバーサイドで読み込んだデータをhtmlに埋め込んで表示するための機能です。
djangoやflask、laravelやCakePHPなどで使われるWEBフレームワークの基本です。
今回は、NEMのAPIで取引をすることが目的ですので、サンプルコードを元に必要最低限の説明に留めます。
詳しい解説が知りたい方は、本記事の下に表示されている紹介本、Node.js超入門の2章を読んでみてください。

テンプレートを使うにはejsモジュールが必要です。
コマンドプロンプトからnpmコマンドを実行し、ejsモジュールをインストールします。
index.jsのあるディレクトリに移動してから次のコマンドを実行します。

npm init
npm install ejs

npm initを実行するといろいろと質問が表示されますが、基本的にenterキーを押すだけで大丈夫です。

サンプルコード

index.jsと同じディレクトリにindex.ejsファイルを作成します。
まず、index.ejsのコードをコード1に記します。

コード1 index.jsのサンプルコード

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta http-equiv="context-type" content="text/html; charset=UTF-8">
        <title><%=title %></title>
    </head>
    <body>
        <p><%=message %></p>
    </body>
</html>

次にindex.jsのサンプルコードをコード2に記します。
コード2 index.jsのサンプルコード

const http = require('http');
const fs = require('fs');
const ejs = require('ejs');


function index(request, response) {
    //EJSからコールする
    var content = fs.readFileSync('./index.ejs', 'utf8');
    var ejsContent = ejs.render(content, {title: "サーバーで設定したタイトル", message: "サーバーで設定したメッセージ"});
    response.writeHead(200, {'Content-Type': 'text/html;charset=UTF-8'});
    response.write(ejsContent);
    response.end();
}

var server = http.createServer(index);

server.listen(3000);

サンプルコード解説

コード1 index.ejsについて
5行目：titleタグに<%=title %>が囲まれています。同様に、8行目は<%=message %>がpタグに囲まれています。
<%=title %>はブラウザで表示する直前に「サーバーで設定したタイトル」に置き換わります。
同様に<%=message %>もブラウザで表示する直前に「サーバーで設定したメッセージ」に置き換わります。
置き換える処理は、後述するコード2で行います。

コード2 index.jsについて
8行目でコード1が記述されているindex.ejsファイルを読み込みます。
readFileSyncはファイルが読み込んでから次の9行目の処理を行う関数です。反対にreadFile関数を使うと、ファイルを読み込む前に9行目の処理を行ってしまいます。
今回は、readFileSyncを使用します。

9行目で読み込んだindex.ejsファイルの<%= %>の中身を置き換える処理を行います。
ejs.render関数の第2引数に指定したディクショナリ形式のデータが置き換える対象になります。
キーにtitleとmessageを指定しています。
このキー名に対応するindex.ejs内の<%=キー名 %>が、それぞれの値に置き換わります。