プログラミング  ·  2021/04/12

Node.jsの新規アプリケーションを作ろう！

Node.jsの新規アプリケーションを作ろう！

目安時間：30分

この記事では、ローカル環境で新しいExpressのアプリケーションを作成する方法についてご紹介します。
記事内の画像はWindowsでの操作になっておるが、macOSでも同じ手順で進められるぞ。
◯ 必要なもの・知識

 

1. 新規アプリケーションをつくろう

まず、新規アプリケーション用のフォルダを作成していきましょう！
好きな場所に「list-app」というフォルダを作ってください。
例では、ユーザーフォルダに作成しているが、どこでも構わないぞ。

次に、エディタを起動し「Open Folder...」から、先程作成したフォルダ「list-app」を選択してください。

2. コマンドを実行し、パッケージをインストールしよう

 

次に、list-appフォルダでコマンドを実行するためにターミナルを起動します。エディタ上で「Terminal」メニュークリックし、「New Terminal」をクリックしてください。
起動したターミナル上で以下のコマンドを実行してください。 
npm init --yes

 

これは、npmの設定ファイルであるpackage.jsonを生成するコマンドです。package.jsonには、npmパッケージの設定情報などが書き込まれていきます。 
次に、npmパッケージのインストールをしましょう。今回は、expressと ejsをインストールします。以下のコマンドを実行してください。 
npm install express ejs
※npm install express npm install ejsと1つずつinstallコマンドを実行していくことも可能ですが、 npm intall インストールしたいパッケージ① インストールしたいパッケージ②... というようにパッケージ名を列挙することで、一度にまとめてインストールすることができます。よく使う便利な方法なので覚えておきましょう。

 

このような画面が表示されたら、インストール完了です。

サーバーを起動してページを表示しよう

これでひとまず必要なパッケージは揃いました！早速、サーバーを起動してページを表示してみましょう。

 

まず、必要なファイルを作成します。以下の緑で囲ったフォルダとファイルを作成してください。ここまでの手順が正常に行われていれば、その他のファイルはすでに作成されています。 
次に、作ったファイルにコードを記述していきましょう。
以下のコードをコピーして、それぞれのファイルに貼り付けてください。
  • app.js 
const express = require('express');

const app = express();

app.get('/', (req, res) => {
  res.render('hello.ejs');
});

app.listen(3000);
  • views/hello.ejs 
<h1>Hello World</h1>
これでファイルの準備はできました。サーバーを起動していきましょう。 ターミナルかコマンドプロンプトのlist-appフォルダで以下のコマンドを実行します。 
node app.js

 

ブラウザを開いて「localhost:3000」というURLにアクセスします。 このように Hello World と表示されれば成功です！ 
jsファイルを変更した際にはサーバーを再起動しないと反映されないので注意するのじゃぞ。
一度サーバーを停止してから再度サーバーを起動することで再起動ができます。

 

ファイルの変更を反映したい場合は、Ctrl + Cでサーバーを停止した後に、 node app.js でサーバーを再起動しましょう。

3. ファイル更新時に自動でサーバーが再起動するようにしよう

ページを表示することはできましたが、jsファイルの変更を反映するには、毎回サーバーを再起動する必要があります。
手動でサーバーを再起動する必要がないように、ファイルが変更されると自動でサーバーを再起動してくれるnodemonというnpmパッケージをインストールしていきましょう。

  

npm install -g nodemon
次に、nodemonを使ってサーバーを起動していきましょう。nodemonを実行するには、以下のコマンドを実行してください。(コピーしたコマンドはCtrl + Vもしくは Ctrl + Shift + V で貼り付けることができます。)
  • Windowsの場合 
nodemon app.js
  • Macの場合 
nodemon app.js

 

以下の図のように表示されれば、nodemonでのサーバー起動は成功です。
確認

 

nodemonでサーバーを起動できましたか?