第6回「Node.js入門」テンプレート「Express」を導入 node.js

こんにちは。前回の記事公開から、3か月程経っていました。

実は最近、結構ハードスケジュールでみっちりお仕事していましたが、一区切りついたので、再度「勉強していこう!」とおもいます^^

 

 と、その前にこないだの台風の次の日に「サザンビーチ茅ケ崎」へ行ってまいりました。

実は私、猛烈な「サザンオールスターズ」のファンなのです!!

死ぬまでに行きたい場所の一つが、「神奈川の茅ケ崎の海」でした。

 

 サザンのメンバーが育った街という事で、茅ケ崎の商店街は、「サザン診療所」や「サザン商店街」といったサザンの名前を使ったものが多かったです!(噂には聴いていたのですが、実際に目撃するとテンションが上がりました!

茅ヶ崎駅 南口から30分ほど、まっすぐ歩きます。なんか町が活気があり、みんな元気そう!!そして人が多いのが印象でした。

茅ヶ崎駅へは、行かれた事ありますでしょうか。

 桑田佳祐さんは「夕方の海」が好きのようです。

男から見ても、オシャレだよなぁーっと、印象に残ったのが、私が10代のころかな。

砂浜で、波に足だけつかろうとしたら、あるあるなのですが、予想以上の大きな波が来て、少し焦って「おおぉ!」と恥ずかしい声が出て、少し照れてしまいました💦

 でも「まっ、いっか!」と思うのは、海と空だけのノーストレスな場所だったから、そう思えたのでしょうか。

海にいる人は、みんな落ち着いていて、大声で喧嘩をする人は一人もいませんでした。

江の島には、なんどか行ったことがあるのですが、私は茅ケ崎の海の方が好きと感じます。

皆さんも、死ぬまでに一度は行ってみたいところ、ありますか。

私、これでもう満足かと思いきや、実はもっと行きたいところが増えてしまいました(笑)

 

 今思うと、砂浜でブルーシートを敷いて食べた、コンビニのサンドイッチとアイスが、今まで食べたものの中で、一番おいしかった事に気づいた 31歳 奮闘マンです!!

 

始めに

今回、ブログを執筆させて頂くうえで、とても参考になるサイトがありました。

Node.jsのスクリプトの基本を覚えよう (libro様)

おかげさまで、より深く理解でき、何も問題なくプログラムを動かせることができました。
感謝いたします。

※すごく丁寧で分かりやすいサイトですので、良かったら見てみてください。
※本サイトは、著者の自分が解りやすくまとめ、オリジナルをアレンジしたものであり、パクリにならないように気を付けます。

 

目次

・フレームワークの利点と「Express」について

・Express利用のWebアプリケーションを作ろう

・ExpressのWebアプリケーションを作る

・Express利用の基本スクリプト

・Expressの基本処理を整理する

・テンプレートを利用する

・テンプレート利用の処理を作る

・まとめ

・今回の記事を書くにあたって参考にしたサイト

 


・フレームワークの利点と「Express」について

引用元

ここまで、Webアプリケーションの基本的な機能に関する処理の仕方について説明をして来ました。が、正直いって「思ったよりも面倒くさい」と感じたのではないでしょうか。

何しろ、何をやるにもすべて細かく自分で処理を書かないといけない。EJSを導入してテンプレートを使えるようになったけれど、テンプレートファイルを予めロードしておいてそれをレンダリングする、なんて処理を自分で書かないといけない。複数のページを用意したければ自分でURLごとのルーティング処理を作っておかないといけない。POSTされたデータはイベントを使ってデータをすべて取り出し、それをデコードして必要な値を利用できるようにこれまた自分で処理を書かないといけない。これでは、多数のページを持つ複雑なWebアプリケーションを作ろうという気も萎えてきます。

こうした処理の大半は、「Webアプリケーションなら必ず必要となるもの」だったりします。だったら、Webアプリケーションが使う機能をあらかじめすべて実装し、Webアプリケーションとしての基本的なシステムを用意しておけば、圧倒的に簡単に開発が行えるようになるはずです。

こうした考えで誕生したのが「Webアプリケーションフレームワーク」と一般に呼ばれるものです。単に機能を集めたライブラリではなく、Webアプリケーションとしての基本的なシステムそのものを提供するプログラムのことです。

 フレームワークとは、Webアプリケーションを作りやすくする「テンプレート」という事ですね。

前前前回にやった「EJS」も、フレームワークの一つでした。今回、勉強していくのは「Express」というフレームワークです。

引用元

Node.jsにも、このWebアプリケーションフレームワークは用意されています。中でももっとも広く使われているのが「Express」というものでしょう。

Expressは、EJSなどと同じく、Node.jsのパッケージとして提供されています。npmで簡単にインストールし、これを組み込んだサーバープログラムを作ることができます。またテンプレートエンジンにEJSなどを利用できるため、今まで作ったEJSテンプレートをそのまま再利用できます。

 なるほど! 「Express」もデフォルトでNode.jsに含まれているのですね!(・・・実は知っていましたが)

EJSとも一緒に使えるので、更に簡単にWebアプリを作れますね^^

引用元

Expressには、Webアプリケーションのための基本的なシステムが構築されており、これに必要に応じて処理を追加していきます。Node.jsのみでの実装と同様に、イベントに処理を組み込んでいくという基本的な開発スタイルは変わりありませんが、用意されているさまざまなオブジェクトを駆使することで非常に簡単に必要な処理を組み立てることができます。

Expressのサイトは以下になります。ここでドキュメントなども公開されています。(※ただし、npmを利用するため、ここからライブラリファイルなどをダウンロードする必要はありません)

 では、次からExpressを導入していきましょう!

 


・Express利用のWebアプリケーションを作ろう

引用元

 
では、実際にExpressを利用してみましょう。Expressを使うには、まずnpmを使ってインストールを行います。

・コマンドプロンプトを起動
コマンドプロンプト(Mac OS Xならばターミナル)を起動します。

●Expressのインストールについて
では、実際にExpressを利用してみましょう。Expressを使う場合、考えておきたいのは、「Expressをどこにインストールするか」です。これは以下の2通りがあります。

・Node.jsのモジュールとしてインストールする
Node.js本体のモジュールとして保存します。こうすれば、どのWebアプリケーションからでも利用できます。ただし、アプリをサーバーにデプロイしたとき、そのサーバーにExpressがないと動きません。

・Webアプリケーションフォルダ内にインストールする
この方式は、アプリを作るごとに毎回インストールをしないといけません。ただし、アプリにすべてのファイルが用意されますから、サーバーにデプロイした場合、サーバーにExpressがなくとも問題なく動きます。

 「デプロイ」ってなんやね~ん(笑) ググりました!

デプロイとは、システムが動き出す事です。例えば、「node app.js」とコマンドプロんプで実行する事で、システムが動き出しますよね。スタートした時を「デプロイした」というようです。

参考URL:ビルドとデプロイって結局なんやねん!?!?!???みたいな記事

 

 実際に職場で開発チームに入るとよくあるのですが、「本番環境サーバ」と「開発環境サーバ」の二つを使い、開発します。

今回のお話は、 Express というフレームワークが、「開発環境サーバ」には入っているが、「本番環境サーバ」に入っていなければ、本番の時、動かないですよ?というお話です。

Node.jsのモジュールとしてインストールするのは、簡単です。EJSと同じく、コマンドプロンプトから以下のように実行するだけです。

npm install express

ただし、実際に作ったアプリをデプロイすることを考えたら、アプリ内に必要なモジュールをすべてインストールしたほうがよいでしょう。ここでは、その方式でアプリを作成してみましょう。

 EJSと同じですね。

非常に便利で、多くの人が利用する為、最初からファイルが入っており、あとはコマンドプロンプトからインストールするだけです。

 

 


・ExpressのWebアプリケーションを作る

では、実際に簡単なアプリケーションを作ってみましょう。以下の手順にそって作業を進めて下さい。

1. アプリケーションのフォルダを用意する
まずは、アプリケーションを作成するフォルダを用意しましょう。ここではデスクトップに「expressapp」という名前でフォルダを用意することにしましょう。

コマンドプロンプトを起動している場合は、cdでデスクトップに移動し、以下のように実行すればフォルダが作成されます。

mkdir expressapp

 コマンドプロンプトで、デスクトップへ移動するには

cd C:\Users\ユーザー名\Desktop

ユーザー名はご自分のものに書き換えてください。

 

 皆さん、フォルダを作れましたでしょうか。

私の場合、コマンドプロンプトを使わずに、右クリック → 新規作成 → 新しいフォルダ で作りました^^

でも、コマンドプロンプトで操作する方が、なんとなくプログラマっぽいですよね!

私だけでしょうか(笑)

引用元

2. コマンドプロンプトでフォルダに移動
コマンドプロンプト(Mac OS Xならばターミナル)を起動します。そしてcdコマンドで「expressapp」フォルダに移動して下さい。

3. npmを初期化する
npmを初期化します。これは以下のように実行します。

npm init

実行すると、名前、バージョン、説明文、エントリーポイント、テストコマンド、gitリポジトリ、キーワード、作者、ライセンスなどを次々と聞いてきます。わからなかったら、全部そのままEnterキーを押し続けて下さい。これでpackage.jsonファイルが作成されます。

4. Expressをインストールする
Expressをインストールします。これは、以下のように行います。

npm install express --save

これで、アプリケーションの「expressapp」内に「node_modules」というフォルダが作られ、その中に「express」というフォルダが保存されます。これがExpressのファイルが保管されているところです。

 なぜか私はエラーになってしまいましたが、皆さんはうまくできましたでしょうか。

今度までにどこがエラーになっているか知れべておきます!

引き続き、やって行きましょう!

 

追記:正常にインストールされると、下記のようなフォルダとファイルが作成されます。

 

5. EJSをインストールする
続いて、Expressでテンプレートエンジンとして使用するEJSをインストールします。やはりnpmを使います。以下のように実行してください。

npm install ejs

これで「node_modules」フォルダ内に「ejs」フォルダが作られ、そこにファイルが保存されます。

――これで、Webアプリケーション作成のための準備が整いました。後は、ここにスクリプトやテンプレートなど具体的なコードを追加してアプリケーションを構築していけばいいのです。

 

 すごい分かりやすいですよね。プログラムの難しいところって、実は最初の環境構築だったりします。

こんなに親切で丁寧な指導、私も受けてみたいです。

次回から、ゴリゴリ、処理を書いていきましょう!

 


・Express利用の基本スクリプト

 引用元

では、Expressを利用したアプリケーションのスクリプトを作成しましょう。まずは、Expressを利用する、もっとも基本的なスクリプトを考えてみましょう。

テキストエディタを使い、下のスクリプトを記述して下さい。そして、先ほどの「expressapp」フォルダ内に、「app.js」という名前で保存しましょう。

var express = require('express');
var app = express();

app.get('/', function(req, res){
    res.send('Hello World!');
})

var server = app.listen(3000, function(){
    console.log('Server is running!');
})

保存したら、コマンドプロンプトで、このapp.jsがある場所(「expressapp」フォルダ内)に移動し

node app.js

このようにnodeコマンドを実行して下さい。そして、ブラウザから以下にアクセスしてみましょう。

http://localhost:3000/

 

 これで、画面に「Hello World!!」とテキストが表示されます。まだテンプレートもない、ただテキストを出力しているだけの単純なサンプルですが、「Expressを使ったアプリ」の基本はこれでわかります。 

 app.jsは、必ず「utf-8 BOM無し」で保存してください。

app.jsのスクリプトの解説は次回になります。

正しく表示されると、ブラウザでは下記のようになります。

 


・Expressの基本処理を整理する

引用元

このサンプルではExpressを利用するため、従来のスクリプトとは書き方が変わっています。ではポイントを整理しておきましょう。

・Expressをロードする

var express = require('express');

まず最初にExpressのライブラリをロードします。これはrequire(‘express’)で行えます。後は、これを読み込んだ変数expressを使ってExpressの機能を利用していきます。

・ExpressのApplicationオブジェクトを作成する

var app = express();

最初に行うのは、アプリケーションのオブジェクトを用意することです。これは、express関数を呼び出して行います。この関数は、Expressのアプリケーションとなる「Application」オブジェクトを作成して返すものです。

 まずは、ファイルの先頭部分の説明です。

別ファイル(ライブラリ)を読み込んで、更に使いやすくする為に、オブジェクト化しているのですね。

ちょっと単語自体が難しいですね(我ながら💦)

「ファイル先頭で変数を初期化している」で伝わんでしょうね。

 

引用元

・GETを登録する

app.get("/", function(req, res){……略……});

続いて、GETの登録を行います。これは、HTTPのGETによるアクセスの登録です。第1引数にはアクセスしたパスを、第2引数には実行する関数をそれぞれ指定します。これで、第1引数のパスにアクセスがあったとき第2引数の関数を呼び出し実行するようになります。

第2引数のコールバック関数では、requestresponseのオブジェクトがそれぞれ引数として渡されます。これは、既にお馴染みのリクエストとレスポンスのオブジェクトが渡されます。

このgetメソッドで必要なだけアクセス先のパスに関数を登録していけば、いくつでもページを追加していけるわけです。面倒なルーティング処理などは必要なくなるのです。

 前回の「GET/POST送信」で行った、GET処理がすごい短く書かれています^^

これ結構あるあるなのですが、1つのファイルが1万行あるっての、結構多いんです。

なにかを修正する場合、その1万行の中から探したり、他の所に影響してしまったりして、大変だったりします💦

 

これほど短く書けると、管理がとても楽ですね。

内容は、URL「http://ドメイン:3000/」へアクセスすると、Webページに「Hello World!」と表示するといった内容です。

 

 

・ポートをリッスンする

app.listen(3000, function(){……略……});

最後に、ポート番号を指定して「listen」を呼び出します。これで、指定のポート番号で待ち受け状態を開始します。コールバック関数で、リッスン開始後の処理を用意しておくことができます。

これでサーバー起動の処理は完了です。後は、どこからか指定のパスにアクセスがあれば、その処理が実行されるようになる、というわけです。

Node.js単体で作っていたのに比べると、ずいぶんとスッキリとしたスクリプトになることがわかるでしょう。Expressを使えば、ずいぶんと効率的にWebアプリケーションを作れることが想像できますね 

 本当に前回までやっていたことが、短いプログラムで行われていますね!!

これは作業がはかどりそうです!

 

 


 

 

ちょっとここら辺で息抜きを!!

☕をのんだり、散歩したり、ペットと触れ合ったり🐶

休憩しましょう。

もう少しです。

 

 


 

 


・テンプレートを利用する

引用元

とりあえず、Expressを使った基本的な処理の流れはだいたいわかりました。続いて、テンプレートを利用して表示を行ってみることにしましょう。テンプレートファイルを用意し、app.jsのスクリプトを修正すればできそうですね。

まずは、テンプレートから作成しましょう。今回は「test.ejs」というファイル名で作成することにします。下にソースコードを掲載しておきます。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta http-equiv="content-type"
        content="text/html; charset=UTF-8">
    <title><%=title %></title>
    <style>
    body { font-size:12pt; color:#000066; }
    h1 { font-size:18pt; background-color:#DDDDFF; }
    pre { background-color:#EEEEEE; }
    </style>
    </head>
<body>
    <header>
        <h1><%=title %></h1>
    </header>
    <article>
        <%-content %>
    </article>
</body>
</html>

 「test.ejs」は、UTF-8 BOM無しで保存しましょう。

引用元

今回作成したtest.ejsは、Webアプリケーションの中にそのまま配置はしません。Webアプリケーションのフォルダの中に、新たに「views」という名前のフォルダを用意してください。そしてこのフォルダの中にtest.ejsを入れておきます。

Expressでは、画面表示関係のテンプレートは、このように「views」フォルダ内にまとめることになっています(設置場所やフォルダ名などは変更できますが、デフォルトではviewsという名前のフォルダになっているのでここではそのまま作成します)。

 新しいフォルダを作り、名前を「views」へ変更し、その中にtest.ejsを保存します。

この時、test.ejs のスペースの部分は、スペース4個を、タブ1個へ置き換えて保存しましょう。

私の環境(Windows10)だと、なぜかスペースを残していると、バグが発生しておりました。

たぶん、これは重要な事だと思います。

引用元

作成したテンプレートは、基本的に前回までのEJS用テンプレートとほとんど同じです。

ここでは、ヘッダー部分とボディに<%=title %>というタイトルを出力するタグを用意し、またコンテンツの表示用に<%-content %>というタグを用意してあります。Node.jsのスクリプトでは、これらのタグで出力しているtitlecontentといった変数に値を受け渡すように処理を用意すればいいわけですね。

 データベースは後日触れていきますが、データベースに登録された内容を、変数へ入れ表示する事もできると思います。いわゆるブログですね。

あともう少し。

次へ行きましょう。

 


・テンプレート利用の処理を作る

引用元

では、Node.jsのスクリプトを作成しましょう。app.jsを下のリストのように書き換えて下さい。

再び「node app.js」でサーバーを起動し、localhost:3000にアクセスしてみましょう。テンプレートをレンダリングした表示が現れますよ。

var express = require('express');
var ejs = require("ejs");
  
var app = express();
  
app.engine('ejs',ejs.renderFile);
  
app.get("/", function(req, res){
    res.render('test.ejs', 
        {title: 'Test Page' , 
            content: 'this is test.'});
});
  
var server = app.listen(3000, function(){
    console.log('Server is running!');
})

正常に表示されれば、下記の画面になります。

 続いて、app.jsの解説です。

 引用元

テンプレート利用のポイント

これで、EJSを使ったテンプレート機能がExpressでもちゃんと使えるようになりました。では修正点をチェックしましょう。

・EJSのロード

var ejs = require("ejs");

まず、最初にrequireでEJSをロードしておきます。これは既にお馴染みの作業ですからわかりますね。

 ・テンプレートエンジンの設定

app.engine('ejs',ejs.renderFile);

テンプレートエンジンの設定を行います。これはApplicationオブジェクトの「engine」メソッドを使って設定します。第1引数にはテンプレートファイルの拡張子を、第2引数にはテンプレートエンジンのコールバック関数を設定します。このコールバック関数には、ejsオブジェクトのrenderFileプロパティを設定します。これでテンプレートエンジンの設定が完了しました。

 んっ、ここ重要ですね。

app.engine('ejs',ejs.renderFile);
第1引数 テンプレートファイルの拡張子
第2引数 テンプレートエンジンのコールバック関数

y’s note 様の記事を参考にすると、「描画エンジン」の設定とされています。

ここはそこまで深く知るわけではなく、「こう書けばejsファイルは表示されるもの」と覚えておくといいかもしれません。

※違う場合は、この記事を修正します。。

 引用元

・GETのコールバック関数の用意
コールバック関数内で行なっているのは、EJSテンプレートを使ったページの表示です。responserenderメソッドを呼び出していますね。

res.render( テンプレートファイル , オブジェクト );

第1引数には使用するテンプレートファイル名、第2引数にはテンプレート側に渡す変数名をキーとして値を連想配列としてまとめたものを指定します。これでページがレンダリングされます。

 注意して欲しいのは、テンプレートファイル名です。これは「views」フォルダ内に配置されている必要があります。ただし、‘views/test.ejs’なんて具合にviewsフォルダ内のパスを書く必要はありません。ただ、‘test.ejs’とファイル名だけを指定すればOKです。

Expressでは自動的に「views」フォルダ内からファイルを検索するようになっているのです。逆に、「views」フォルダでなく、アプリケーションのフォルダ内にファイルがあったりすると、見つからずにエラーになりますので気をつけて下さい。

――さあ、これでとりあえず、Expressを使ったアプリケーションの基本はわかりました。使い方さえわかれば、Node.js単体で使うよりも全体が整理されてわかりやすいですね!

 「/」へアクセスされた時の処理ですね。「test.ejs」ファイルを読み込み、Web上に表示するといった内容です。

 

今回は、以上です。お疲れさまでした。

 


・まとめ

 いやー、node.js がかなり理解できてきました!

参考にさせて頂いてる「 初心者のための Node.jsプログラミング入門 」を見て動かすと、ちゃんと動くので、全くノーストレスです^^

次回は、ついに「データベース」の章です!

これが習得できれば、ひとまずプログラマなのかな。

少し、何日か休憩して、記事をアップできればと思います。

ではでは

 


・今回の記事を書くにあたって参考にしたサイト

Node.js公式サイト

初心者のための Node.jsプログラミング入門

ビルドとデプロイって結局なんやねん!?!?!???みたいな記事

y’s note 

参考にさせて頂いたサイトの管理者様、今回もありがとうございました。

,,,

Leave a comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です