Node.js入門⑧　Expressフレームワークを使おう

ここまで①サーバーを作り、②フォームを作り、③ルーティングを構築して④GETやPOSTに対しての処理を分岐して任意のページ表示することをサーバー側から制御するということをやってきました

気が付けばいろいろ勉強したというところです

まだまだアプリケーションを作るところに至っていない基本を学んでいる段階です

上記の①～④だけでもそこそこ大変な作業でした

もっと簡単にアプリケーションを作ることはできないか

フレームワークを使えばできるんです

JavascriptでフレームワークといえばReactやVue.jsが思い浮かびますが、Node.jsにもフレームワークが存在します

それがExpressと呼ばれるものです

今回はExpressの基本形を学び、さらに簡単にアプリケーションを作る環境を整えられるExpressGeneratorというExpress専用のプログラムを使ってみようとおもいます

内容はかなり濃くなります

Expressをインストールする前に

まずはExpressをインストールをするまえにnpmの初期化を行います

アプリケーションを作る適当な場所にフォルダを作成しましょう

ターミナルで

npm init

というコマンドを実行するだけです

色々な設定の内容を尋ねられますが、今回はすべてEnterでOKです

これら質問に答えた内容は何に反映されるかというと

npmを初期化した際につくられているpackage.jsonというファイルに収められています今回の基本コードと一緒にサンプルとしてpackage.jsonのファイルも載せています見ていただくと質問に答えたことがそのまま記載されていることがわかると思います

初期化の際にアプリケーションの基本的な情報を聞いてくれて、しかもそれをjsonファイルにまとめてくれるということですね

便利です

また、package.jsonは今後アプリケーションを作っていくうえで大切なファイルになりますので覚えておきましょう

Expressをインストールする

続いて、Expressをインストールしましょう

当然ですがさきほどつくったフォルダの中にインストールします

npm install express

でインストールします

expressを使用する際に必要なパッケージがすべてまとめてインストールされますので驚かないようにしてください

ではつづいてindex.jsファイルを作成してください

これがアプリケーションを起動した際に読み込まれるファイルとなります

Expressの基本形となるスクリプト

こちらがExpressの基本形となるシンプルなスクリプトです

ではひとつずつ解説をしていきます

1行目「const express = require(‘express’);」　Expressをロードして

2行目「var app = express();」expressオブジェクトを用意し

3行目「app.get(‘/’,(req,res)=>{処理}」ルーティングの設定をして

7行目「app.listen(3000,()=>{処理}」待ち受けを開始　

というシンプルなコードです

起動するとWebブラウザに「Hello YouTube!」と表示されます

これまで勉強してきたことで十分理解できる内容だと思います

これがExpressの基本形です

ここまでの内容の解説動画です

ExpressGeneratorを使ってプロジェクトを作ろう

Expressの基本形からいろいろ組み合わせてアプリケーションを作っていくこともできそうです

が、まだまだいろいろな設計をしないといけませ

しかも何から準備すればいいのかちょっとわかりずらいですね

そこで利用したいのが

ExpressGeneratorというExpress専用のプログラムです

こちらを使うとExpressを使ったプロジェクトを作ることができます

アプリケーションを作っていくうえで必要となるライブラリだけでなく、indexファイルやアプリケーションの設定まで簡単に作ることができるので非常に便利です

ExpressGeneratorをインストールする

では実際にExpressGeneratorをインストールしてみましょう

npm install -g express-generator

とコマンドを実行しましょう

今回はーｇをつけて、グローバル環境でインストールをして、Node.js全体で利用できるようにインストールを実行します

※MacOSの場合は管理者モードでコマンドを実行するsudoを付ける必要があるケースがあるようです

ExpressGeneratorをつかってプロジェクトを作成

インストールが無事終了したら実際にプロジェクトを作成してみましょう

いつもは先にフォルダを作ってそこに必要なファイルを作成していきますがExpressGeneratorを利用することで必要なフォルダも作成されます

ですので、次のコマンドを実行するのはプロジェクトを作成する親ディレクトリとなるフォルダに移動してからです

適当なフォルダに移動したら次のコマンドを実行してください

express –view=ejs アプリケーション名　※viewの前のハイフンは２つです。

アプリケーション名は自由につけてくださいね

実行するとアプリケーション名でフォルダが作成され、その中にたくさんのファイルが作成されていると思います

これでExpressを使った簡単なアプリケーションが作られたことになります

当然ほぼ空っぽですが・・・笑

Express Generatorで自動生成されたファイルを見てみよう

• bin：アプリケーション実行用のファイル「www」が含まれていてこれをコマンドで打ち込んでスタートする
• public：公開ディレクトリで、直接アクセス可能
• routes：ここにファイルを追記してルーティングを追加していく
• views：テンプレートファイルが納められる
• node_modules：パッケージ類
• app.js：メインプログラム
• package.json：パッケージ情報

重要な内容をあわせていくつか詳しく見ていきましょう

必要なパッケージのインストールをしましょう

パッケージのインストールをしなければ必要なモジュールが使用できません

まずはインストールしましょう

npm install

とコマンド実行をしてすると、必要なパッケージをインストールしてくれます

何が必要かどうかはどこで判断しているか

必要なパッケージの情報はpackage.jsonに書かれています

ここに書かれたパッケージがコマンドによりインストールされるのです

package.jsonについて

package.jsonについて詳しく確認しましょう

これまで一つずつ必要なパッケージをインストールしてきました

今回はまとめてどばっとインストールする形になりました

製作するアプリケーションによっては多数のパッケージを必要とする場合もあると思います

その場合、かなりの手間になります

また、バージョンの組み合わせなども含めるとさらに面倒な作業となるわけです

Express Generatorを使用する場合も、いくつかのパッケージを利用するようになっています

そこで、それらの情報がpackage.jsonのdependenciesに記述されていて、それをインストールする形をとるわけです

まず起動してみましょう

作成されたアプリケーションを実行してイメージをつかみましょう

コマンドがこれまでと違いますpackage.jsonに”start”: “node ./bin/www”

とありますが、実はこれがスタートのコマンドになります

入力してみましょう

そしてhttp://localhost:3000/にアクセスしてみましょう

このようにただいくつかのコマンドを実施するだけで、簡単なアプリケーションが作成できました

その他の起動方法

実は起動方法は他にもあります

npm start

でもアプリケーションを起動できます

また、VSCodeのエクスプローラーをみると

app.jsがモジュール化されてロードされているわけです

このように、NPMスクリプトというのが表示されていると思います

ここにある「スタート」が先ほど確認したpackage.jsonに書かれていた起動用のスクリプトに連動しています

こちらを押しても実行できます

ここまで位の内容のYouTubeもどうぞ

binフォルダについて

binの中にあるwwwというファイルがプログラムの起動に関係しているのはここまでの内容で何となく理解できると思います

※ここはいじることがないので飛ばしてもOKです

実際に中身をみてみると

var http = require(‘http’);

とあります

httpモジュールがありますし.createServerがありますのでサーバーが作成されているということがわかります

var server = http.createServer(app);

引数にappが渡されています

これはサーバーを作成してappを実行するということです

app.jsファイルについて詳しくは後程みていきましょう

とりあえず、そこで実際にアクセスがあった時の処理が記されていると認識しておきましょう

ちなみにappは最初にrequireでロードされています

そして、app.set(‘port’,port);で待ち受けポートが設定されています

という説明でわかりますでしょうか

ちょいちょいこういう説明をみて「は？もうちょいくわしく！」ってなってたのでここもしらべておきました

モジュール化とは

モジュール化の説明を挟みます

すでに理解している人は次の項目に移って下さい

app.jsの中身をみてもらうと、最後に

module.exports = app;

とあります

他のjsファイルの最後にもこのmojdule.ecports=オブジェクト名となっています

これによってそのスクリプトをモジュール化して外部からアクセスできるようにしているわけです

アクセスの仕方はもうお分かりだと思います

var app = require(‘../app’);

このようにロードすることで使用可能となります

wwwのその後の処理について

この後のlistenで待ち受け状態をつくって、serverの.on( )でerror,listeningという2つのイベントを設定し、エラー時と待ち受け時の処理を行っています

この後に記されているのは、

function normalizePort(val) {処理}

という関数です

これはポート番号を引数に入れて呼び出されていた関数です

そして、onError( )関数、onListening( )関数についての処理も記されています

このように、wwwファイルによって、サーバー作成が行われ、メインプログラムであるappが実行されているということがわかりました

app.js　使用モジュールの確認をしましょう

最初に使用されているモジュールを確認してみましょう

http-errors	HTTPエラーの処理のためのモジュール
express	Express本体
path	ファイルパスを処理するためのモジュール
cookie-parser	cookieのパース処理のためのモジュール
morgan	HTTPリクエストのログ出力のためのモジュール
./routes/index ./routes/users	ルートごとのスクリプトをモジュール化したもの モジュール化の項目を参照

このように最初に必要なモジュールがロードされています

./routes/indexと./routes/users２つのモジュールはルート用のモジュールとなります

あとで確認するroutesフォルダーに作られたindex.jsとusers.jsというファイルのスクリプトをモジュール化してロードしています

これによって/indexにアクセスがあった時の処理を実行します

要するに、もともとapp.jsにあったルーティングの処理を他のファイルにわけてroutesフォルダ内に入れ、それをモジュール化してapp.js内で扱うようにしているということです

このExpressGeneratorでプロジェクトを作成してアプリケーションを作成する際は、アドレスごとにそこにアクセスした際に実行するスクリプトを別ファイルに記述して、routesフォルダに収めて、それをrequireでロードして呼び出せるようにしておいて実行するわけですね

では続いて、Expressオブジェクトの設定を見ていきましょう

app.set( )で各種設定

var app = express();でexpressオブジェクトを作成してappに代入しています

その後、expressのset()メソッドで各種設定をおこなっています

これで

テンプレートファイルの収まっているフォルダ:views

テンプレートエンジン:EJS

を指定しています

プロジェクト作成時に選んだテンプレートエンジンになっているはずです

ここでpathモジュールをつかっているわけですね

app.use( )メソッド

ということでこの後ずらりと並んだapp.use( )メソッドは何を意味するのか

引数にはロードしたモジュールの様々なメソッドの戻り値が設定されています

これによってアプリケーションで各種機能を組み込んでいます

モジュールを組み込んで拡張していく際にはこのような処理をするということです。

そして、

この２つは第1引数にパスを指定して、第2引数にそのための処理を割り当てています

indexRouterとuserRouterは先ほどロードしたルーティング用のスクリプトのモジュール化したものが設定されて処理が行われるということです

複数のルート処理を実施する場合このあたりを利用するということですね

その他の処理

この後のapp.use()では引数にerrが渡されていることからもわかる通り、上記以外のパスへのアクセス時など、エラー発生時の処理について記述されています

とくに今のところ意識すべき点はなさそうです

そして最後に

module.exports = app;

とすることで外部からオブジェクトにアクセスできるようにしているわけですね

ルーティング処理について　routesフォルダ

では続いてroutesフォルダのファイルについて確認しておきましょう

このフォルダにあるファイルは

app.jsでrequireでロードされて呼び出されて

app.use(‘/’, indexRouter);やapp.use(‘/users’, usersRouter);という形でアクセスしたときの処理として実行される内容でしたね

この2つのファイルはそれほど違いはありませんね

usersのほうがレンダリング処理ではなく、sendでメッセージを送信しているという点が違うようです

ということで、ここではindex.jsを確認していきましょう

expressのRouterオブジェクトを利用して、その後ルーティングの設定をしているようです

router.get(‘パス名’,function){処理}

HTTPのGETメソッドによるアクセスを設定しています

第1引数にアクセスするパス、第2引数に処理するための関数を割り当てています

関数を詳しく見ていくと

function(req, res, next){処理}

リクエストオブジェクトとレスポンスオブジェクト、nextオブジェクトが渡されています

処理で実行されている内容は

res.render(‘index’, { title: ‘Express’ })

ということでindex.ejsをレンダリングしています

拡張子がついていませんが、ExpressがEJS以外のテンプレートエンジンにも対応しているため.ejsを付ける必要はないということです

{ title: ‘Express’ }はテンプレートに組み込まれたtitleにExpressという文字列を渡しているだけですね

そしてここでも最後に

module.exports = router;という形で外からオブジェクトにアクセスできるように処理が行われています

再度の確認ですが、これによってモジュール化がされてapp.js内でロードして処理ができるようにしているわけです

当然users.jsについても最後に同じ処理が行われています

テンプレートを確認しよう

EJSファイルはこのようになっています

何の変哲もないejsファイルです

 <%= title %>ここでレンダリングされた際の引き渡された値が反映されているのがわかります

ExpressGeneratorまとめ

これである程度ExpressGeneratorによって作られるプロジェクトの全体像が明らかになりました

今後手を加えるとすれば

1. viewsフォルダに新しいテンプレートを作成し
2. ルーティング用スクリプトを作成し
3. app.jsを修正する

という形になると思われます