【NodeでWebアプリ】(1) Express.jsをセットアップ

1. Expressとは

ExpressはNode.js上で稼働するサーバーサイドのWEBアプリケーションフレームワークです。公式サイトの言葉を借りると、ExpressはFast（高速）で、Unopinionated（自説に固執しない）で、Minimalist（ミニマリスト）な、Node.js用Webフレームワークです。

Screen Shot 2019-06-20 at 22.09.17.png
https://expressjs.com/

この言葉にあるように、ExpressはNodeの特徴でもある高速性を重視しているため、Express本体は最小限で最軽量な構成になっています。ORM（DBのインターフェース）もなければ、テンプレートエンジンもない状態です。これらの機能に関しては必要に応じてパッケージを加えていくことになりますが、「どのような構成がよいか？」ということに関してExpressのスタンスはUnopinionatedなので、そこはプログラマの意思に委ねられているというわけです。このようなExpressの設計思想は、下図のようにRuby on RailsやLaravelと比較すると解りやすいかもしれません。

Screen Shot 2019-06-20 at 23.12.16.png

2018年にNode.js Foundationが行ったユーザー調査「2018 Node.js User Survey Report」では、Expressが人気フレームワークの１位になっています。

https://nodejs.org/en/user-survey-report#Tools-Technologies-Used

1.1 Express ジェネレータとは

express-generatorはアプリケーション・スケルトンを作成するためのツールです。スケルトンは、他のフレームワークではScaffold（足場）とよばれることもあります。
express-generatorは、npm パッケージとしてExpress本体とは別にインストールします。

1.2 今回作成するもの

第１回〜３回のレッスンでは、Expressジェネレータを使ったWEBアプリの実装方法をざっくり把握することを目的とし、「データベースに保存されたユーザーのリストを画面に表示する」という機能を作成します。この機能に特に実用性はありませんが、以下のようなポイントを把握できると思います。

express-generator (スケルトン生成)
ルーティング
MVC (Model View Controller)
ORM (Object-Rerational Mapping)
RDB (Rerational Database)
テンプレートエンジン

1.3 セットアップ

ExpressのHello Worldには２段階あります。

１つ目は、Express ジェネレータを使わないで素のExpressだけで表示するHello Worldです。この実装方法に関しては、公式ページに解りやすいマニュアルがありまし、スキップすることもできるので、ここでは特に触れないことにします。
https://expressjs.com/ja/starter/installing.html
https://expressjs.com/ja/starter/hello-world.html

２つ目は、Express ジェネレータでスケルトンを作成して表示するHello Worldです。
今回はここから進めていきます。

1.4 Express ジェネレータをインストールする

nodeはインストール済みという前提で、Expressジェネレータのインストールから始めます。以下のコマンドを実行してexpress-generatorをインストールします。

1	$ npm install express-generator -g

インストールが成功したことを確認するために、ヘルプ情報を表示してみます。

1	$ express -h

ヘルプ情報が表示されれば成功です。

1.5 スケルトンを生成

それではスケルトンを作成します。（スケルトンはScaffold(足場)と呼ばれることもあります。）スケルトンの作成にはexpressコマンドを使います。コマンドの引数に、テンプレートエンジンの種類と、アプリケーション名を指定します。

1	$ express --view=[テンプレートエンジンの種類] [アプリケーション名]

今回はテンプレートエンジンにEJSを使うことにし、アプリケーション名を「myapp」にします。

1	$ express --view=ejs myapp

コマンドを実行すると、下図のようなスケルトンが生成されます。

スクリーンショット 2019-06-11 19.40.57.png

モジュールの依存情報がpackage.jsonに定義されていますので、モジュールをインストールしましょう。

1.6 Nodeモジュールをインストールする

次のコマンドを実行してモジュールをインストールします。

1 2	$ cd myapp $ npm install

コマンドを実行するとnode_modulesディレクトリにモジュールがインストールされ、以下のようなフォルダ構成になります。

スクリーンショット 2019-06-11 19.44.55.png

1.7 アプリを起動してみる

1	$ npm start

ブラウザで以下のURLを開いてみましょう。

http://localhost:3000/

ExpressのWelcome画面が表示されれば成功です。

スケルトンにはもうひとつ/users/というページが存在しています。この後のレッスンで使いますので、以下のURLも開いてみましょう。

http://localhost:3000/users/

respond with a resourceという文字が表示されれば成功です。

確認ができたらCtrl+cで終了しておきましょう。

まとめ

インストールから起動までのコマンド

$ npm install express-generator -g
$ express --view=ejs myapp
$ cd myapp
$ npm install
$ npm start

確認URL

http://localhost:3000/