LoginSignup
0
3

More than 3 years have passed since last update.

Node.js Expressフレームワークを使用する(ひな型作成)

Last updated at Posted at 2020-03-05

はじめに

前回の投稿でExpressフレームワークを前準備しましたので、次にexpressコマンドでひな型を生成します。

環境

OS:Windows 10 Pro 64bit
node.js:v12.16.1
npm:v6.13.4
Express:v4.16.1

ひな型の生成

expressコマンドで生成します。
あらかじめコマンドプロンプトで作業フォルダに移動します。
今回は「D:\Node\ExpressTest01」を作業フォルダにします。

D:
CD Node\ExpressTest01

移動しましたら、次のコマンドでひな型を生成します。

express --view=ejs

「--view=ejs」オプションはテンプレートエンジンにEJSを使用すると言う意味になります。

D:\Node\ExpressTest01>express --view=ejs

   create : public\
   create : public\javascripts\
   create : public\images\
   create : public\stylesheets\
   create : public\stylesheets\style.css
   create : routes\
   create : routes\index.js
   create : routes\users.js
   create : views\
   create : views\error.ejs
   create : views\index.ejs
   create : app.js
   create : package.json
   create : bin\
   create : bin\www

   install dependencies:
     > npm install

   run the app:
     > SET DEBUG=expresstest01:* & npm start

これでひな型は生成されました。
Visual Studio Codeで開きますとこのようになります。
express01.jpg

使用するライブラリの一括インストール

次のコマンドを実行して、ライブラリの一括インストールを行います。

npm install

npmはpackage.jsonの「dependencies」に指定されているライブラリを一括インストールする機能があります。
ひな型を生成した際に、必要なライブラリ情報が全て記載されるので便利です。

D:\Node\ExpressTest01>npm install
npm notice created a lockfile as package-lock.json. You should commit this file.
added 53 packages from 38 contributors and audited 141 packages in 5.167s
found 0 vulnerabilities

動作確認

コマンドプロンプトで次のコマンドを実行します。

npm start
D:\Node\ExpressTest01>npm start

> expresstest01@0.0.0 start D:\Node\ExpressTest01
> node ./bin/www

ブラウザで「http://localhost:3000」にアクセスします。
次のキャプチャが表示されればOKです。
express02.jpg

コマンドプロンプトには次のように表示されます。

GET / 304 14.612 ms - -
GET /stylesheets/style.css 304 1.752 ms - -

停止したい時は「Ctrl + C」です。
「バッチ ジョブを終了しますか (Y/N)?」と聞かれますので、「Y」を入力します。

バッチ ジョブを終了しますか (Y/N)? Y

まとめ

このような流れでひな型を生成します。

0
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
3