Node.jsとExpressの基本 - osamu38/node-express-curriculum GitHub Wiki

Node.jsとExpressの基本

目次

  • Node.jsの基本
  • Expressの基本
  • Node.jsでの開発効率をあげるための便利なmodule、nodemon

Node.jsの基本

Node.jsはクライアントのJavaScriptと基本的には一緒ですが、少し違う部分があるので知っておきましょう。

  • サーバーサイドのソースを変更してもサーバーを再起動しないと反映されない
  • console.log();で表示される場所がターミナル
  • requireを使って他の~.jsを参照できる
  • thisの参照の違い

などがあります。他にも違いはあるのですが、ひとまずここらへんを理解しておきましょう。

Expressの基本

今回はExpressというFrameworkを利用して作業します。 Expressを利用するとあなたが作成した任意のディレクトリ以下に

  • bin
  • node_modules
  • public
  • routes
  • views
  • app.js
  • package.json

というディレクトリ及びファイルが追加されます。ではこのディレクトリやファイルが何をしているか説明します。

bin（サーバーサイド）

binの中にwwwというファイルが存在します。このwwwをターミナルからnode ./bin/wwwと叩くことによってサーバーを起動させ、アプリケーションがスタートします。

node_modules（サーバーサイドとクライアントサイド）

Expressで使うmoduleやあなたがnpm installしたmoduleが入る場所。作業をする上でこのディレクトリをいじることはない。

public（クライアントサイド）

静的なファイルの保管場所。中を見るとimagesやjavascriptsやstylesheetsなどのフォルダがあり、imagesには画像を置き、javascriptsにはクライアントサイドのJavaScriptファイルを置きます。stylesheetsにはCSSファイルを置きます。

routes（サーバーサイド）

このディレクトリではどのURLにリクエストがきた時に何をするかを定義します。例えばindex.jsでは

router.get('/', function(req, res, next) {
  res.render('index', { title: 'Express' });
});

このように書いてあります。これは/に対してリクエストがきた時にviews/index.ejsをレンダリング（描画）しています。

views（クライアントサイド寄りのサーバーサイド）

ここにはindex.ejsやerror.ejsなどのファイルが置いてあると思います。これらは画面側を作る上で必要なViewファイルです。既にhtmlを勉強している人ならわかると思いますが、index.htmlと変わりません。唯一の違いはサーバーサイドからこのファイルに対して動的な値を渡すことが出来ます。 routesの中のindex.jsの6行目で

res.render('index', { title: 'Express' });

と書いてあります。これはindex.ejsファイルに対してtitleというkeyでExpressというvalueを渡しています。 そのため、index.ejs内の

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
  </head>
  <body>
    <h1><%= title %></h1>
    <p>Welcome to <%= title %></p>
  </body>
</html>

<%= title %>部分にExpressという値が渡るため、

<!DOCTYPE html>
<html>
  <head>
    <title>Express</title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
  </head>
  <body>
    <h1>Express</h1>
    <p>Welcome to Express</p>
  </body>
</html>

となり

このように表示されます。このように動的な値を表示できるViewファイルをtemplate engineと呼びます。

ちなみに今回はEJSというtemplate engineを使っていますが、他にも種類はたくさんあり、JadeやECT等があります。

app.js（サーバーサイド）

app.jsはExpressの設定周りを担っています。ここでは書ききれないほど色々なことをしています。template engineの定義などもここでやっています。

package.json（サーバーサイドとクライアントサイド）

アプリケーションで使うnpmモジュールの管理をしています。なのでアプリケーションを作る上で必要なmoduleがあれば必ずここに記述しなければいけません。でも毎回npm installするたびにpackage.jsonに記述するのは非常に手間です。 なのでnpm installするときは--saveもしくは--save-devオプションを追加してみてください。

--saveを追加するとpackage.jsonの"dependencies"にnpm installしたタイミングでmoduleを記述してくれます。

--save-devを追加するとpackage.jsonの"devDependencies"にnpm installしたタイミングでmoduleを記述してくれます。

"dependencies"と"devDependencies"はどのような違いがあるかと言うと、"dependencies"は本番でも使うmodule、"devDependencies"は開発環境のときにしか使わないmoduleです。

例）

$ npm install --save mysql (mysqlは本番でも使うmoduleなので--save)
$ npm install --save-dev gulp (gulpは開発環境にしか使わないmoduleなので--save-dev)

npmの使い方についてわかりやすく説明してある記事を見つけたので、詳しく知りたい人はnpmコマンドの使い方をみてください。

Node.jsでの開発効率をあげるための便利なmodule、nodemon

Node.jsで開発する際にサーバーサイドのソースを更新するとその度にcontrol + cでサーバーを停止させ、DEBUG=node-test:* npm startでサーバーを起動するのは非常に面倒です。なのでソースコードを保存した際に、自動で再起動をかけてくれるmodule、nodemonを導入しましょう。

$ npm i -g nodemon (nodemonをグローバルインストール)
$ nodemon node-test (ディレクトリを監視)

実はgulpというNode.js製のタスクランナーを導入すると、ソースコードを保存した際にサーバーを再起動させ、その後ブラウザを自動でリロードをすることも可能です。

今後はnodemon node-testでサーバーを起動し、npm install ~するときだけcontroll + cでサーバーを停止します。
npm install ~したあとはnodemon node-testでサーバーを起動してください。

前のページ：Node.jsを始めてみよう

次のページ：MySQLを使ってデータベースを構築しよう

Add a custom footer
⚠️ **GitHub.com Fallback** ⚠️