【Node.js】Express入門

2021.08.16

この記事ではNode.jsのフレームワークであるExpressの導入方法を解説します。 OSはMacを前提として進めていきます。

準備

まずPCにNode.jsとnpmをインストールしておいてください。

一先ずHello Worldしてみる

インストール

まずアプリケーションディレクトリを作成して、作成したディレクトリに移動します。今回はsample-appというディレクトリを作成します。

次にnpm initでpackage.jsonを作成します。

対話式で入力していきますが、ほとんどエンターでOKです。メインファイルの名前を変更したい場合はentry pointで任意の名前を入力してエンターを押してください。今回はapp.jsとしました。

最後にこれで良いか聞かれますのでyesと入力し、エンターで完了します。

最後にExpressをインストールします。

メインファイルの作成

npm initのentry pointで指定した名前（今回はapp.js）で以下のようにメインファイルを作成します。

サーバーの起動

下記コマンドを実行するとポート3000番でローカルサーバーが立ち上がりますのでhttp://localhost:3000にアクセスします。

Hello World!と画面に表示されていれば成功です。停止する場合はCtrl+Cを入力します。

Express Generatorでアプリを作成する

Express Generatorを使うとアプリケーションに必要なルーティング・テンプレートエンジンの設定、ディレクトリの作成などを自動で行ってくれます。 Webアプリの作成は通常こちらを使うと良いでしょう。

Express Generatorのインストール

まずグローバルでExpress Generatorをインストールします。

-hオプションでコマンドオプションを確認できます。

アプリケーションの作成

先ほど作成したsample-appディレクトリの中身を一旦全て削除して、下記コマンドを実行します。テンプレートエンジンはejsを指定しています。

最後にディレクトリ名を指定すると指定したディレクトリを作成し、その中に必要なファイルも作成されます。

次にnpm installで必要なモジュールをインストールします。

起動

下記コマンドでサーバーを起動します。

http://localhost:3000にアクセスして下記画像の画面が表示されれば成功です。

新しいページを作成

デフォルトでは/と/usersページが作成されていますが、新しく/shopsというページを作成してみたいと思います。

まず/routes/index.jsを複製して同じ階層にshops.jsというファイルを作成します。 res.render()の第一引数にレンダリングするejsファイル名、第二引数に渡す値をjsonで記述します。

次に/views/index.ejsを複製して同じ階層にshops.ejsを作成します。中身はそのままでOKです。

最後にapp.jsに以下のハイライト部分（2行）を追記します。

これでファイルの編集は完了しましたのでCtrl+Cで一旦サーバーを停止して、DEBUG=sample-app:* npm startで再度サーバーを起動します。

http://localhost:3000/shopsにアクセスして/でExpressだった文字がShopに変わっていれば成功です。

注意点

ファイルを変更してから反映するためには一度サーバーを停止してから再度起動して、ブラウザもリロードしなければいけません。開発中にこの一連の作業を毎回するのは面倒ですがpm2とBrowsersyncを使用すると、この作業を自動化できます。詳しくは下記記事をご覧ください。【Node.js】Express+pm2+Browsersyncでホットリロードを実現

準備