Node.js + Expressの環境構築をしてみた

#1.はじめに
先日Node.js + Expressの環境を構築する機会がありました。せっかくなので、学んだことをOUTPUTしたいと思ってまとめることにしました。

##1-1.Node.jsとExpress

• Node.js：サーバーサイドのjavascript実行環境：https://nodejs.org/ja/
• Express：高速で動作するミニマルなNode.jsフレームワーク：https://expressjs.com/ja/api.html

#1-2.PCの環境

• Windows10 Version 1909
• Node.js v12.13.1
• npm v6.12.1

#2.環境構築
##2-1.Node.jsのインストール
まず、最初にNode.jsをインストールします。
▼Node.jsリンク
https://nodejs.org/ja/

Node.jsには、偶数系統と奇数系統があります。偶数系統がLTS(Long Term Support)版となるので、特に必要がない場合は、偶数系統のインストーラをダウンロードしてインストールすれば良いと思います。

インストールが完了したら、cmdを開いて次のコマンドを実行してください。Node.jsのバージョンを確認することができます。

node -v

##2-2.Expressのインストール
node.jsがインストールできたら、次に__Express-generator__を利用してアプリケーションのひな型を生成します。

1.アプリケーションを作成したいディレクトリに移動

cd [アプリケーションを作成したいディレクトリ]

2.express-generatorのインストール

npm install -g express-generator

3.アプリケーションの生成

express [生成したいアプリケーション名]

上記コマンドを実行すると、カレントディレクトリ配下にアプリケーションのひな型が生成されます。
次のコマンドを実行すると、ファイルまで含めて生成された内容を確認できます。

tree /f

実行結果

└─api_app
    │  app.js　：アプリケーション本体、最初に呼び出される。
    │  package.json　：アプリケーションの環境設定　
    │
    ├─bin
    │      www ：アプリケーションのエンドポイント
    │
    ├─public　：フロントエンドで利用する画像やjs, cssを保管する場所
    │  ├─images
    │  ├─javascripts
    │  └─stylesheets
    │          style.css
    │
    ├─routes　：ルーティングを行っている
    │      index.js
    │      users.js
    │
    └─views　：jadeファイル
            error.jade
            index.jade
            layout.jade

##2-3.express-generatorでアプリケーションのひな型を生成
node.jsがインストールできたら、次に__Express-generator__を利用してアプリケーションのひな型を生成します。

1.アプリケーションを作成したいディレクトリに移動

cd [アプリケーションを作成したいディレクトリ]

2.express-generatorのインストール

npm install -g express-generator

3.アプリケーションの生成

express api_app

api_appの部分は生成したいアプリケーション名を指定してください。
上記コマンドを実行すると、カレントディレクトリ配下にアプリケーションのひな型が生成されます。
次のコマンドを実行すると、カレントディレクトリ配下のファイルが確認できるので、生成された内容を確認します。

tree /f

実行結果

└─api_app
    │  app.js　：アプリケーション本体、最初に呼び出される。
    │  package.json　：アプリケーションの環境設定　
    │
    ├─bin
    │      www ：アプリケーションのエンドポイント
    │
    ├─public　：フロントエンドで利用する画像やjs, cssを保管する場所
    │  ├─images
    │  ├─javascripts
    │  └─stylesheets
    │          style.css
    │
    ├─routes　：ルーティングを行っている
    │      index.js
    │      users.js
    │
    └─views　：jadeファイル
            error.jade
            index.jade
            layout.jade

##2-4.画面表示
アプリケーションのひな型が作成できたら、作成したアプリケーションを起動してみます。
まず、作成したアプリケーションにディレクトリを移動してから、npm installでpackage.jsonに記載されたパッケージがインストールされます。

1.install

cd api_app
npm install

npm installができたら、ブラウザからhttp://localhost:3000/にアクセスしてください。

2.アプリケーションの起動

npm start

正しくアプリケーションが起動できていると、次のような画面が表示されます。

アプリケーションを終了したい場合は、cmd上で「ctrl + C」を実行します。「バッチ ジョブを終了しますか (Y/N)?」と求めてきますので、yを選択すれば抜けることができます。

#3.所感
とりあえず環境構築をすることろまではできました。次はAPI構築あたりの内容を書きたいです。

#参考リンク
https://qiita.com/nkjm/items/723990c518acfee6e473
https://qiita.com/maitake9116/items/7825d90c09f3e2f87dea