Expressを使ったアプリ開発
バックエンドの勉強をしようとExpressの勉強を始めました。
UdemyでExpressの勉強をしたので、復習をしながら勉強の記録を残します。
開発環境
OS : Windowos
エディター : VSCode
package.jsonの作成
sampleapp> npm init
package name: (sampleapp)
version: (1.0.0)
description:
entry point: (index.js) app.js // エントリーポイントを変更
test command:
git repository:
keywords:
author: Mellbrother
license: (ISC)
sampleapp> npm install express --save
sampleapp>
フォルダ構成
sampleapp> tree
.
|-app.js
|-package.json
app.js
expressのサンプルコードを使用(https://www.npmjs.com/package/express)
constexpress=require("express");constapp=express();app.get("/",function(req,res){res.send("Hello World");});app.listen(3000);http://localhost:3000にアクセスするとHello Worldと表示される。
HTTP response
上記のapp.jsのresはHTTP responseです。
resのプロパティー、メソッドのうち調べたものを下にまとめました。
res.locals
レスポンスのローカル変数を保持している。リクエストとレスポンスの一サイクルの間にview(ejsなど)で使用することができる。
リクエストのパス名や認証されたユーザーなどの情報を公開する際に使えます。
app.use(function(req,res,next){res.locals.url=req.url;next();});app.get("/",function(req,res){res.send(res.locals);});// 出力// {"url":"/"}res.append(field [, value])
Express v4.11.0+からサポート
指定したレスポンスヘッダーのフィールドを追加します。
valueには文字列または配列を指定可能です。
※res.append()の後にres.set()を呼ぶとヘッダーのvalueがリセットされます。
res.append('Link',['<http://localhost/>','<http://localhost:3000/>'])res.append('Set-Cookie','foo=bar; Path=/; HttpOnly')res.append('Warning','199 Miscellaneous warning')res.cookie(name, value [,options])
cookieにnameとvalueを保存します。
valueはstringまたはjsonを指定できます。
optionsにはcookieの有効期限やsecure設定などcookieに関するオプションを設定できます。
res.cookie('name','tobi',{domain:'.example.com',path:'/admin',secure:true})res.cookie('rememberme','1',{expires:newDate(Date.now()+900000),httpOnly:true})res.get()
HTTPレスポンスヘッダーのフィールドを指定することによりフィールドの中身を得ることができます。
res.get('Content-Type')// => "text/plain"res.json([body])
json形式のレスポンスを返すときに使います。
配列, string, boolean, number, nullなどをJSON形式に変換します。
res.json(null)res.json({user:'tobi'})res.status(500).json({error:'message'})res.redirect([status,] path)
与えられたURLにリダイレクトします。
statusにはHTTPステータスコードを設定できます。
指定しない場合は302番になります。
// http://localhost:3000/hogeにいるときres.redirect('/foo/bar')// http://localhost:3000/hoge/foo/barres.redirect('http://example.com')res.redirect(301,'http://example.com')res.redirect('../login')// http://localhost:3000/loginres.render(view [,locals][, callback])
viewをレンダリングし、レンダリングされたHTMLをクライアント側にレスポンスします。
localsに設定した値はテンプレートエンジンなどを用いたviewで使うことができます。
callbackを指定した場合、明示的にHTMLをレスポンスする必要があります。
// send the rendered view to the clientres.render('index')// if a callback is specified, the rendered HTML string has to be sent explicitlyres.render('index',function(err,html){res.send(html)})// pass a local variable to the viewres.render('user',{name:'Tobi'},function(err,html){// ...})res.send([body])
HTTPレスポンスを返します。
bodyにはバッファーオブジェクト、文字列、配列などを使えます。
res.send(Buffer.from('whoop'))res.send({some:'json'})res.send('<p>some html</p>')res.status(404).send('Sorry, we cannot find that!')res.status(500).send({error:'something blew up'})res.sendFile(path [, options][, fn])
Express v4.8.0からサポート
pathにあるファイルを表示します。
optionsでrootを設定することで相対パスを指定できます。
app.get("/",function(req,res){res.append("Set-Cookie","foo=bar; Path=/; HttpOnly");res.sendFile("index.html",{root:path.join(__dirname,"public"),});});renderメソッドとの違いはテンプレートエンジンを使えるかどうかです。テンプレートエンジンを使う場合にはrenderを使いましょう。htmlファイルの表示の際はどちらでも構いません。
res.sendStatus(statusCode)
HTTPステータスを設定し、ステータスコードにあった文字列を返します。
res.sendStatus(200)// equivalent to res.status(200).send('OK')res.sendStatus(403)// equivalent to res.status(403).send('Forbidden')res.sendStatus(404)// equivalent to res.status(404).send('Not Found')res.sendStatus(500)// equivalent to res.status(500).send('Internal Server Error')res.set(field [, value])
HTTPresponseヘッダーを設定します。一度に複数フィールドの設定ができます。
res.set({'Content-Type':'text/plain','Content-Length':'123',ETag:'12345'})res.status(code)
HTTPステータスをセットします。
res.status(403).end()res.status(400).send('Bad Request')res.status(404).sendFile('/absolute/path/to/404.png')おわりに
思ったよりメソッドの数が多くて驚きました。
次回はRouterについて調べます。