【Node.js入門③】超簡単にWebアプリ開発！Expressの使い方!

npm install express --save

npm install express --save

npm init

npm init

npm install express

npm install express

const express = require('express'); //expressの読み込み
const app = express(); // Expressアプリケーションのインスタンスを作成
const port = 3000; //port変数に3000代入

// ↓app.get = getリクエスト受信時↓
app.get('/', (req, res) => { //path無しの時（例:http://localhost:3000/)
  res.send('Hello World!'); // res = 返答 send = "送る"
});

app.listen(port, () => { //portでlisten(聞く)つまり、3000で外部からのアクセスに備えて待機する
  console.log(`Example app listening on port ${port}`);//console=コンソール log=ログ(記録)
});

const express = require('express'); //expressの読み込み
const app = express(); // Expressアプリケーションのインスタンスを作成
const port = 3000; //port変数に3000代入

// ↓app.get = getリクエスト受信時↓
app.get('/', (req, res) => { //path無しの時（例:http://localhost:3000/)
  res.send('Hello World!'); // res = 返答 send = "送る"
});

app.listen(port, () => { //portでlisten(聞く)つまり、3000で外部からのアクセスに備えて待機する
  console.log(`Example app listening on port ${port}`);//console=コンソール log=ログ(記録)
});

node index.js

node index.js

npx express-generator

npx express-generator

npm install http-errors path cookie-parser morgan

npm install http-errors path cookie-parser morgan

npm start

npm start

var createError = require('http-errors');   // エラー作成用モジュールを読み込み
var express = require('express');           // Express本体を読み込み
var path = require('path');                 // パス操作用モジュールを読み込み
var cookieParser = require('cookie-parser');// クッキー解析用モジュールを読み込み
//クッキーは、ウェブサイトがユーザーのブラウザ（ChromeやSafariなど）
//に保存する小さなテキストファイルのことです。
//あの「パスワードを保存する」もこれを利用しています
var logger = require('morgan');             // ログ出力用モジュールを読み込み

var indexRouter = require('./routes/index'); // 自作のルーター（トップページ用）を読み込み
var usersRouter = require('./routes/users'); // 自作のルーター（ユーザーページ用）を読み込み

var app = express(); // Expressアプリケーションのインスタンスを作成（ここからアプリの設定が始まります）

// view engine setup （画面表示の設定）
app.set('views', path.join(__dirname, 'views')); // 画面テンプレートファイルがある場所を 'views' フォルダに指定
app.set('view engine', 'jade');                  // テンプレートエンジンとして 'jade' を使う設定

// ミドルウェアの設定（リクエストが来るたびに実行される処理）
app.use(logger('dev'));                          // 開発用モードでログを出力する設定
app.use(express.json());                         // JSON形式のリクエストボディを解析して使えるようにする
app.use(express.urlencoded({ extended: false }));// フォームから送信されたデータ（URLエンコードされたデータ）を解析する
app.use(cookieParser());                         // クッキーを解析して req.cookies で使えるようにする
app.use(express.static(path.join(__dirname, 'public'))); // 'public' フォルダを静的ファイル（画像やCSS）置き場として公開する

// ルーティングの設定（URLに応じた処理の振り分け）
app.use('/', indexRouter);      // 'http://localhost:3000/' にアクセスが来たら indexRouter に任せる
app.use('/users', usersRouter); // 'http://localhost:3000/users' にアクセスが来たら usersRouter に任せる

// 404エラーのハンドリング（どのルートにもマッチしなかった場合）
app.use(function(req, res, next) {
  next(createError(404)); // 404エラーオブジェクトを作って、次のエラー処理へ渡す
});

// エラーハンドラー（エラーが起きた時の最終的な処理）
app.use(function(err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message; // 画面表示用にエラーメッセージをセット
  res.locals.error = req.app.get('env') === 'development' ? err : {}; // 開発環境なら詳細なエラー情報を、本番なら空情報をセット

  // render the error page
  res.status(err.status || 500); // ステータスコードを設定（なければ500）
  res.render('error');           // 'error.jade' テンプレートを使ってエラー画面を表示
});

module.exports = app; // 設定済みの app オブジェクトをエクスポート（wwwファイルで使うため）

var createError = require('http-errors');   // エラー作成用モジュールを読み込み
var express = require('express');           // Express本体を読み込み
var path = require('path');                 // パス操作用モジュールを読み込み
var cookieParser = require('cookie-parser');// クッキー解析用モジュールを読み込み
//クッキーは、ウェブサイトがユーザーのブラウザ（ChromeやSafariなど）
//に保存する小さなテキストファイルのことです。
//あの「パスワードを保存する」もこれを利用しています
var logger = require('morgan');             // ログ出力用モジュールを読み込み

var indexRouter = require('./routes/index'); // 自作のルーター（トップページ用）を読み込み
var usersRouter = require('./routes/users'); // 自作のルーター（ユーザーページ用）を読み込み

var app = express(); // Expressアプリケーションのインスタンスを作成（ここからアプリの設定が始まります）

// view engine setup （画面表示の設定）
app.set('views', path.join(__dirname, 'views')); // 画面テンプレートファイルがある場所を 'views' フォルダに指定
app.set('view engine', 'jade');                  // テンプレートエンジンとして 'jade' を使う設定

// ミドルウェアの設定（リクエストが来るたびに実行される処理）
app.use(logger('dev'));                          // 開発用モードでログを出力する設定
app.use(express.json());                         // JSON形式のリクエストボディを解析して使えるようにする
app.use(express.urlencoded({ extended: false }));// フォームから送信されたデータ（URLエンコードされたデータ）を解析する
app.use(cookieParser());                         // クッキーを解析して req.cookies で使えるようにする
app.use(express.static(path.join(__dirname, 'public'))); // 'public' フォルダを静的ファイル（画像やCSS）置き場として公開する

// ルーティングの設定（URLに応じた処理の振り分け）
app.use('/', indexRouter);      // 'http://localhost:3000/' にアクセスが来たら indexRouter に任せる
app.use('/users', usersRouter); // 'http://localhost:3000/users' にアクセスが来たら usersRouter に任せる

// 404エラーのハンドリング（どのルートにもマッチしなかった場合）
app.use(function(req, res, next) {
  next(createError(404)); // 404エラーオブジェクトを作って、次のエラー処理へ渡す
});

// エラーハンドラー（エラーが起きた時の最終的な処理）
app.use(function(err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message; // 画面表示用にエラーメッセージをセット
  res.locals.error = req.app.get('env') === 'development' ? err : {}; // 開発環境なら詳細なエラー情報を、本番なら空情報をセット

  // render the error page
  res.status(err.status || 500); // ステータスコードを設定（なければ500）
  res.render('error');           // 'error.jade' テンプレートを使ってエラー画面を表示
});

module.exports = app; // 設定済みの app オブジェクトをエクスポート（wwwファイルで使うため）

#!/usr/bin/env node
// ↑ これはシェバンと言い、このファイルをnodeコマンドで実行することを指定しています。

/**
 * Module dependencies.
 */

var app = require('../app'); // 先ほど解説した app.js を読み込みます
var debug = require('debug')('hello-world:server'); // デバッグログツールを初期化
var http = require('http'); // Node.js標準のHTTPサーバーモジュールを読み込み

/**
 * Get port from environment and store in Express.
 */

var port = normalizePort(process.env.PORT || '3000'); // ポート番号を決定（環境変数PORTがあればそれ、なければ3000番）
app.set('port', port); // Expressアプリにポート番号を設定

/**
 * Create HTTP server.
 */

var server = http.createServer(app); // Expressアプリを使ってHTTPサーバーを作成

/**
 * Listen on provided port, on all network interfaces.
 */

server.listen(port); // 指定したポートでサーバーを待機状態（起動）にする
server.on('error', onError); // エラーが起きたら onError 関数を実行するよう登録
server.on('listening', onListening); // 起動が完了したら onListening 関数を実行するよう登録

/**
 * Normalize a port into a number, string, or false.
 * ポート番号が正しい形式かチェック・変換する関数
 */

function normalizePort(val) {
  var port = parseInt(val, 10); // 数値に変換

  if (isNaN(port)) {
    // named pipe (数値でなければパイプ名としてそのまま返す)
    return val;
  }

  if (port >= 0) {
    // port number (正の数ならポート番号として返す)
    return port;
  }

  return false; // それ以外は不正
}

/**
 * Event listener for HTTP server "error" event.
 * サーバーエラー発生時の処理
 */

function onError(error) {
  if (error.syscall !== 'listen') { // listen以外のエラーなら
    throw error; // そのままエラーを投げる
  }

  var bind = typeof port === 'string'
    ? 'Pipe ' + port
    : 'Port ' + port;

  // よくある特定のエラーに対する親切なメッセージ処理
  switch (error.code) {
    case 'EACCES': // 権限がない場合（例：低いポート番号を使おうとした）
      console.error(bind + ' requires elevated privileges');
      process.exit(1); // プログラム終了
      break;
    case 'EADDRINUSE': // すでにポートが使われている場合
      console.error(bind + ' is already in use');
      process.exit(1); // プログラム終了
      break;
    default:
      throw error; // その他のエラーはそのまま投げる
  }
}

/**
 * Event listener for HTTP server "listening" event.
 * サーバー起動成功時の処理
 */

function onListening() {
  var addr = server.address(); // サーバーのアドレス情報を取得
  var bind = typeof addr === 'string'
    ? 'pipe ' + addr
    : 'port ' + addr.port;
  debug('Listening on ' + bind); // "Listening on port 3000" のようなログを出す
}

#!/usr/bin/env node
// ↑ これはシェバンと言い、このファイルをnodeコマンドで実行することを指定しています。

/**
 * Module dependencies.
 */

var app = require('../app'); // 先ほど解説した app.js を読み込みます
var debug = require('debug')('hello-world:server'); // デバッグログツールを初期化
var http = require('http'); // Node.js標準のHTTPサーバーモジュールを読み込み

/**
 * Get port from environment and store in Express.
 */

var port = normalizePort(process.env.PORT || '3000'); // ポート番号を決定（環境変数PORTがあればそれ、なければ3000番）
app.set('port', port); // Expressアプリにポート番号を設定

/**
 * Create HTTP server.
 */

var server = http.createServer(app); // Expressアプリを使ってHTTPサーバーを作成

/**
 * Listen on provided port, on all network interfaces.
 */

server.listen(port); // 指定したポートでサーバーを待機状態（起動）にする
server.on('error', onError); // エラーが起きたら onError 関数を実行するよう登録
server.on('listening', onListening); // 起動が完了したら onListening 関数を実行するよう登録

/**
 * Normalize a port into a number, string, or false.
 * ポート番号が正しい形式かチェック・変換する関数
 */

function normalizePort(val) {
  var port = parseInt(val, 10); // 数値に変換

  if (isNaN(port)) {
    // named pipe (数値でなければパイプ名としてそのまま返す)
    return val;
  }

  if (port >= 0) {
    // port number (正の数ならポート番号として返す)
    return port;
  }

  return false; // それ以外は不正
}

/**
 * Event listener for HTTP server "error" event.
 * サーバーエラー発生時の処理
 */

function onError(error) {
  if (error.syscall !== 'listen') { // listen以外のエラーなら
    throw error; // そのままエラーを投げる
  }

  var bind = typeof port === 'string'
    ? 'Pipe ' + port
    : 'Port ' + port;

  // よくある特定のエラーに対する親切なメッセージ処理
  switch (error.code) {
    case 'EACCES': // 権限がない場合（例：低いポート番号を使おうとした）
      console.error(bind + ' requires elevated privileges');
      process.exit(1); // プログラム終了
      break;
    case 'EADDRINUSE': // すでにポートが使われている場合
      console.error(bind + ' is already in use');
      process.exit(1); // プログラム終了
      break;
    default:
      throw error; // その他のエラーはそのまま投げる
  }
}

/**
 * Event listener for HTTP server "listening" event.
 * サーバー起動成功時の処理
 */

function onListening() {
  var addr = server.address(); // サーバーのアドレス情報を取得
  var bind = typeof addr === 'string'
    ? 'pipe ' + addr
    : 'port ' + addr.port;
  debug('Listening on ' + bind); // "Listening on port 3000" のようなログを出す
}

extends layout        // layout.jade を継承します

block content         // layout.jade の content 部分に以下を埋め込みます
  h1= title           // 変数 title の内容を h1タグで表示
  p Welcome to #{title} // "Welcome to [titleの中身]" という段落を表示

extends layout        // layout.jade を継承します

block content         // layout.jade の content 部分に以下を埋め込みます
  h1= title           // 変数 title の内容を h1タグで表示
  p Welcome to #{title} // "Welcome to [titleの中身]" という段落を表示

extends layout        // layout.jade の内容を継承（ベースにする）します

block content         // layout.jade 内の "block content" の部分を以下の内容で上書きします
  h1= message         // 変数 message の内容を h1タグとして表示
  h2= error.status    // 変数 error.status の内容を h2タグとして表示
  pre #{error.stack}  // 変数 error.stack（エラーの詳細ログ）を preタグで表示

extends layout        // layout.jade の内容を継承（ベースにする）します

block content         // layout.jade 内の "block content" の部分を以下の内容で上書きします
  h1= message         // 変数 message の内容を h1タグとして表示
  h2= error.status    // 変数 error.status の内容を h2タグとして表示
  pre #{error.stack}  // 変数 error.stack（エラーの詳細ログ）を preタグで表示

doctype html
html
  head
    title= title      // ページタイトルを変数 title から設定
    link(rel='stylesheet', href='/stylesheets/style.css') // CSSファイルを読み込み
  body
    block content     // ここに、継承した各ページ（index.jadeなど）の内容が差し込まれます

doctype html
html
  head
    title= title      // ページタイトルを変数 title から設定
    link(rel='stylesheet', href='/stylesheets/style.css') // CSSファイルを読み込み
  body
    block content     // ここに、継承した各ページ（index.jadeなど）の内容が差し込まれます

var express = require('express');
var router = express.Router(); // ルーターオブジェクトを作成

/* GET home page. */
// '/' (ルート) に GETリクエストが来た時の処理
router.get('/', function(req, res, next) {
  // 'index' というテンプレート（index.jade）を使ってレスポンスを返す
  // その際、テンプレート内で使う title 変数に 'Express' という文字を渡す
  res.render('index', { title: 'Express' });
});

module.exports = router; // ルーターをエクスポート（app.jsで使うため）

var express = require('express');
var router = express.Router(); // ルーターオブジェクトを作成

/* GET home page. */
// '/' (ルート) に GETリクエストが来た時の処理
router.get('/', function(req, res, next) {
  // 'index' というテンプレート（index.jade）を使ってレスポンスを返す
  // その際、テンプレート内で使う title 変数に 'Express' という文字を渡す
  res.render('index', { title: 'Express' });
});

module.exports = router; // ルーターをエクスポート（app.jsで使うため）

var express = require('express');
var router = express.Router();

/* GET users listing. */
// '/users/' に GETリクエストが来た時の処理
router.get('/', function(req, res, next) {
  res.send('respond with a resource'); // 文字列をそのままレスポンスとして返す（画面表示）
});

module.exports = router;// ルーターをエクスポート（app.jsで使うため）

var express = require('express');
var router = express.Router();

/* GET users listing. */
// '/users/' に GETリクエストが来た時の処理
router.get('/', function(req, res, next) {
  res.send('respond with a resource'); // 文字列をそのままレスポンスとして返す（画面表示）
});

module.exports = router;// ルーターをエクスポート（app.jsで使うため）