【Node.js】Express入門
この記事ではNode.jsのフレームワークであるExpressの導入方法を解説します。 OSはMacを前提として進めていきます。
準備
まずPCにNode.jsとnpmをインストールしておいてください。
一先ずHello Worldしてみる
インストール
まずアプリケーションディレクトリを作成して、作成したディレクトリに移動します。
今回はsample-app
というディレクトリを作成します。
loading...
次にnpm init
でpackage.json
を作成します。
loading...
対話式で入力していきますが、ほとんどエンターでOKです。
メインファイルの名前を変更したい場合はentry point
で任意の名前を入力してエンターを押してください。
今回はapp.js
としました。
loading...
最後にこれで良いか聞かれますのでyes
と入力し、エンターで完了します。
loading...
最後にExpressをインストールします。
loading...
メインファイルの作成
npm init
のentry point
で指定した名前(今回はapp.js
)で以下のようにメインファイルを作成します。
loading...
サーバーの起動
下記コマンドを実行するとポート3000番でローカルサーバーが立ち上がりますのでhttp://localhost:3000
にアクセスします。
loading...
Hello World!と画面に表示されていれば成功です。
停止する場合はCtrl+C
を入力します。
Express Generatorでアプリを作成する
Express Generatorを使うとアプリケーションに必要なルーティング・テンプレートエンジンの設定、ディレクトリの作成などを自動で行ってくれます。 Webアプリの作成は通常こちらを使うと良いでしょう。
Express Generatorのインストール
まずグローバルでExpress Generatorをインストールします。
loading...
-h
オプションでコマンドオプションを確認できます。
loading...
loading...
アプリケーションの作成
先ほど作成したsample-app
ディレクトリの中身を一旦全て削除して、下記コマンドを実行します。
テンプレートエンジンはejsを指定しています。
loading...
loading...
最後にディレクトリ名を指定すると指定したディレクトリを作成し、その中に必要なファイルも作成されます。
loading...
loading...
次にnpm install
で必要なモジュールをインストールします。
loading...
loading...
起動
下記コマンドでサーバーを起動します。
loading...
http://localhost:3000
にアクセスして下記画像の画面が表示されれば成功です。
![Express トップページ](https://prod-files-secure.s3.us-west-2.amazonaws.com/3b8084dc-07d1-4420-98b2-e8e14c2bc711/4d9be6d5-fa99-4f74-bcbe-ae69eaf967bb/p_91_1.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAT73L2G45HZZMZUHI%2F20240727%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20240727T073940Z&X-Amz-Expires=3600&X-Amz-Signature=7a539580445a5a51067ffb578a273c1396901ec730a9417c39a4a8b1d6cfe581&X-Amz-SignedHeaders=host&x-id=GetObject)
新しいページを作成
デフォルトでは/
と/users
ページが作成されていますが、新しく/shops
というページを作成してみたいと思います。
まず/routes/index.js
を複製して同じ階層にshops.js
というファイルを作成します。
res.render()
の第一引数にレンダリングするejsファイル名、第二引数に渡す値をjsonで記述します。
loading...
次に/views/index.ejs
を複製して同じ階層にshops.ejs
を作成します。
中身はそのままでOKです。
loading...
最後にapp.jsに以下のハイライト部分(2行)を追記します。
loading...
これでファイルの編集は完了しましたのでCtrl+C
で一旦サーバーを停止して、DEBUG=sample-app:* npm start
で再度サーバーを起動します。
http://localhost:3000/shops
にアクセスして/
でExpressだった文字がShopに変わっていれば成功です。
![Express Shopsページ](https://prod-files-secure.s3.us-west-2.amazonaws.com/3b8084dc-07d1-4420-98b2-e8e14c2bc711/efbc18a7-e209-480e-88b4-06851faa0ed1/p_91_2.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAT73L2G45HZZMZUHI%2F20240727%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20240727T073942Z&X-Amz-Expires=3600&X-Amz-Signature=450c70ee81dc6b76f273e2aa8287e8026ae47b0b70a3e5f70198dc5a4ec88a10&X-Amz-SignedHeaders=host&x-id=GetObject)
注意点
ファイルを変更してから反映するためには一度サーバーを停止してから再度起動して、ブラウザもリロードしなければいけません。 開発中にこの一連の作業を毎回するのは面倒ですがpm2とBrowsersyncを使用すると、この作業を自動化できます。 詳しくは下記記事をご覧ください。 【Node.js】Express+pm2+Browsersyncでホットリロードを実現