expressの備忘

express

参考

• Express

インストール

# package.jsonの作成
# entry point: (index.js) はお好みで。"app.js" もよくある。
npm init

# --save でpackage.jsonに追加されるので、後で構築しやすくなる。
# これはモジュールのみnode_modulesにインストールされる
npm install express --save

Hello Wolrd サンプル

• 000.HelloWolrd_index.js

  const express = require('express')
  const app = express()
  const port = 3000
  
  app.get('/', (req, res) => res.send('Hello World!'))
  app.listen(port, () => console.log(`Example app listening on port ${port}`))
  

• 実行

  # 以下を実行後ブラウザで、http://localhost:3000 でアクセスできる。
  node 000.HelloWolrd_index.js
  

Express application generator

Express アプリケーションのスケルトンを作成できる。

• generatorの実行方法

  • Node.js 8.2.0以降

    npx express-generator
    

  • Node.js 8.2.0以前

    # express-generatorをインストールする
    npm install express-generator --save
    
    # 以後はexpressコマンド
    # npm "-g" でグローバルにインストールしていない場合は、
    # node_moudles\.bin\express を使用する。
    express -h
    

• generatorの使い方

  # ビューテンプレートとしてpugを使用してmyappを作成
  express --view=pug myapp
  
  # インストール
  cd myapp
  npm install
  
  # 実行(Mac)
  DEBUG=myapp:* npm start
  # 実行(Win)
  SET DEBUG=myapp:* & npm start
  

  • "npm start" はそのフォルダのpackage.json内の"scripts"を参照する。
    "start": "node ./bin/www" となっているので、実際は"./bin/www" が実行される。

ルーティング(Routing)

• 基本構造

app.METHOD(PATH, HANDLER)

• app : expressのインスタンス

• METHOD : post, get, put ...（HTTPメソッドを小文字にしたもの）

• PATH : サーバ上のパス（URLのパス？）

• HANDLER: URLがPATHとマッチしたしたときに実行するメソッド

• サンプル

// "/" にアクセスされたら、"Hello World!" を返す
app.get('/', function(req, res){
  res.send('Hello World!')
})

// "/" への POST リクエスト
app.post('/', function(req, res){
  res.send('Got a POST request')
})

// "/user" への PUT リクエスト
app.put('/user', function(req, res){
  res.send('Got a PUT request at /user')
})

// "/user" への DELETE リクエスト
app.delete('/user', function(req, res){
  res.send('Got a DELETE request at /user')
})

静的なファイル(static files)

画像やCSSやjavascriptなどの扱い方。
組み込みミドルウェアの "static" を使用する。

• 基本構造

  express.static(root, [options])
  

  • root: 静的ファイルを扱うディレクトリ

• サンプル

  // 以下を指定すると "public" フォルダが静的ファイルを扱う。
  app.use(express.static('public'))
  
  // 以下のようにアクセスできるようになる
  // public\image\sample.jpg  => http://localhost:3000/image/sample.jpg
  // public\css\style.css     => http://localhost:3000/css\style.css
  // public\js\jquery.js      => http://localhost:3000/js\jquery.js
  
  
  // 実際のフォルダ名とURLを変えたいとき
  app.use('/static', express.static('public'))
  
  // 以下のようにアクセスできるようになる
  // public\image\sample.jpg  => http://localhost:3000/static/image/sample.jpg