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

express2-2.png

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が人気フレームワークの1位になっています。

Screen Shot 2019-06-24 at 17.24.50.png

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

1.1 Express ジェネレータとは

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

1.2 今回作成するもの

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

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

1.3 セットアップ

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

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

2つ目は、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画面が表示されれば成功です。

Screen Shot 2019-06-21 at 15.13.23.png

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

http://localhost:3000/users/

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

Screen Shot 2019-06-25 at 12.01.50.png

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

まとめ

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

1
2
3
4
5
$ npm install express-generator -g
$ express --view=ejs myapp
$ cd myapp
$ npm install
$ npm start

確認URL

http://localhost:3000/

writer | 太田直毅
株式会社OTAシステム開発。フルスタックエンジニア。 仙台市生まれ。大学卒業後に米国系通信会社にエンジニアとして就職。 1998年に独立し、WEBアプリケーションの開発を中心に活動。2児の父。趣味は家族キャンプ。
この記事をシェアする