expressフレームワーク


expressフレームワークとは

expressフレームワークとは,Node.js上でサーバサイドのWebアプリを構築するためのフレームワーク(枠組み)です。MVC(Model, View, Control)モデルに基づく関数のクラスが用意されており,httpモジュールよりも少ない分量で比較的複雑なアプリを作ることができます。

まずはNode.jsのnpmコマンドでexpressをインストールしておきます。-gオプションをつけておくことで,以降に作成するすべてのWebアプリでexpressを使用することができるようになります。

$ npm install express -g

以降ではこのexpressモジュールを使ってNode.js環境をWebサーバとして利用するサーバサイドのアプリケーションを作っていきます。

最初のexpressアプリを作る

以降,expressアプリを作る時には,必ずアプリごとにフォルダを作り,そこに"app.js"という名前でアプリのメインスクリプトを作るようにして下さい。

ここでは"first_app"というフォルダを作り,そこに"app.js"を作ることにします。

まずは,最初の"hellow_server.js"と同様に,ブラウザで3000番ポートにアクセスすると"Hellow, World!"という文字列を表示するアプリを作ります。ソースコードは下記のようになります。

expressクラスのインスタンスとしてappを作り,expressクラスの各関数(メソッド)に必要な機能を無名関数(ハンドラ)として与えていくという形になります。

この場合は

  1. app.getメソッド(GETアクセス時の処理)として,"Hellow, World!"という文字列を返す(res引数に引き渡す)
  2. app.listenメソッドで,port番ポートで,サーバとして起動してポーリングを行い接続を待つ
という処理を行っています。

起動する際には,前回同様,下記のようにnodeコマンドでapp.jsを起動し,ブラウザで"localhost:3000"もしくは"127.0.0.1:3000"にアクセスして"Hellow, World!"文字列が表示されることを確認して下さい。

nodemonの利用

これ以降のサーバサイドのプログラム開発を行っていくにあたって,デバッグ時にいちいちサーバを止めて(nodeコマンドを[CTRL + C]で止めて)スクリプトを修正し,またnodeコマンドで実行する・・・というやり方ではまどろっこしいので,スクリプト修正時には自動的にリロードしてくれるnodemonというモジュールを利用していくことにします。

下記の要領でnpmコマンドを使ってnodemonをインストールし,コンソール画面から起動することを確認して下さい。

以降では特に支障ない限りnodeコマンド代わりにnodemonでスクリプトを起動していくことにします。

HTMLファイルの読み込みとフォーム入力の受け取り

今まではお試し的に文字列だけをブラウザに返していましたが,Webアプリとしては,複雑な出力結果はHTMLできれいに表示させたいところです。

ここでは静的なHTMLファイルを読み込んで文字列入力フォームを作って表示し,その結果を受け取ってコンソールに出力するアプリとすべく,app.jsを書き換えていきます。

ただし,CSSなしの出力を行っても,スマホ,タブレット,PCと,多様な出力デバイスに対応することは難しいので,Twitterのデザインチームが構築しているBootstrapを利用していくことにします。

Bootstrapは,2022年現在,広く利用されているJavaScript用のCDN(Contents Derivery Network)を介して自分のHTMLに読み込むことができます。例えばBootstrap 5.2.0の場合は下記のようにCSSファイルとJavaScriptファイルを取り込みます。セキュリティ確保のためのコードが埋め込まれていますので,必ず公式ページからタグをコピペして使用しましょう。

CDN経由のBootstrap 5.2.0の取り込み例

以下,特に断らない限りBootstrap 5.2の利用を前提とした静的HTMLファイルを使用していくものとします。Bootstrapの機能は沢山あるので,必要に応じて自分で調べながら創意工夫をしてみて下さい。

なお,フォームからの入力を受け取って正しく解釈するためのbody-parserモジュールをあらかじめnpmコマンドでインストールしておいて下さい。

ではapp.jsを次のように書き換えます。

が一番の変更点になります。

first_express/static/template.htmlは例えば下記のように作っておきます。デザインや記述については適宜,自分の好きなように(自己責任で)書き換えてみて下さい。

ブラウザの表示画面は下記のようになります。

完成したら,次の要領でnodemonコマンドでapp.jsを実行し,フォーム入力した文字列がコンソールに表示されていることを確認して下さい。

Pugエンジンによるフォーム作成

ここでは入力文字列の出力もHTMLできれいに表示するようにapp.jsを書き換えます。そのためには先ほどのHTMLファイルをコピペして新しい出力用のHTMLファイルを作ればいいのですが,同じタグを使いまわすより,Node.jsで利用できるHTMLエンジンを利用して,より少ないコード量でテンプレートを作り,必要なところだけをブロック単位で書き換えて利用する方が効率的です。

Node.jsで使用できるHTMLエンジンは複数存在しますが,ここではPugエンジンを使うことにします。使用前にnpmコマンドでインインストールしておいて下さい。

前のtemplate.htmlをPugで書き換えたものをviews/layout.pugとして作成したものを下記に示します。HTMLタグと異なり,インデントブロック単位でタグ位置を示しているところが一番の違いです。

22行目のblock main_contentの部分がブロックにあたり,この部分を書き換えてHTMLを生成していきます。

例えばフォームを表示するviews/form.pugは下記のように書きます。ブロック部分以外はviews/layout.pugを読み込んで使用します。

同じ要領で,出力用のviews/show_input.pugも,次のように書くことができます。

ここまで準備ができたら,app.jsを下記のようにPugテンプレートを読み込んで使用するために書き換えます。

完成したら,app.jsを実行し,ブラウザからアクセスしてフォームに文字列を入力し,下記のようにHTMLで結果が表示されるようになったことを確認して下さい。


Copyright (c) 2014-2022 幸谷研究室 @ 静岡理工科大学 All rights reserved.
Copyright (c) 2014-2022 T.Kouya Laboratory @ Shizuoka Institute of Science and Technology. All rights reserved.