「Node.js超入門」の感想・備忘録2

Node.js 超入門第2版

posted with ヨメレバ

掌田津耶乃秀和システム 2018年08月25日頃

JavaScriptの復習

ローカルストレージ

保存
<script>localStorage.setItem('name', 'hoge');</script>
取得
<script>localStorage.getItem('name');</script>
削除
<script>localStorage.removeItem('name');</script>

クライアント側でしか使うことができないので、クッキーとの使い分けをしっかりと考えるようにする。
なお、localStorageは削除しない限り永続的に保存される。
sessionStorageにすると閉じたら削除される。

document.querySelectorAllメソッド

document.querySelectorAll(セレクタ);
でjQueryと同じようにDOM要素を取得できる。
getElementByID()はもう古い。

bodyタグのonloadイベント内など、ロード完了後でないとDOM要素が存在しないので注意。
また、返却されるのはDOMオブジェクトでなので注意(.textContentや.valueで値の読み書き)
jQueryオブジェクトではないので、val()などは使えない。

JSONの生成、パース

JSON.parse()
JSONテキスト⇒オブジェクト
JSON.stringify()
オブジェクト⇒JSONテキスト
※eval()よりもJSON.parse()の方が安全

Express

Expressのインストール

ディレクトリを作成し、そこへ移動
npm init（質問にはすべてEnterキーでOK）
package.jsonが生成される
npm install --save express
インストールされる
npmのver5以降はpackage-lock.jsonも生成される

npm initを実行するとpackage.jsonが生成される。
package.jsonには依存パッケージなどの情報がまとめられている。
npm install -gによるグローバルへのインストールはローカルで動かす目的にだけ使う。

–saveオプション：package.jsonのdependenciesにバージョン付きで書き込む

index.js

var express = require('express');
var app = express();

app.get('/', (req, res) => {
    res.send('Hello Express!');
})
app.listen(3000, (req, res) => {});

node index.jsで実行。
getメソッドのコールバック関数の引数req, resはNode.jsのhttpオブジェクトのものではなく、Express独自のオブジェクト。

テンプレート

viewsフォルダに格納しなくてはならない。

var ejs = require('ejs');でEJSを読み込み
Applicationオブジェクト.engine('ejs', ejs.renderFile);でテンプレートエンジンにEJSを指定
※第1引数はテンプレートファイルの拡張子、第2引数は使用するメソッド
res.render('index.ejs', {name: 'hoge'});でレンダリング
※res.json(オブジェクト);でJSON出力

var express = require('express');
var ejs = require('ejs');

var app = express();
app.engine('ejs', ejs.renderFile);
app.get('/', (req, res) => {
    res.render('index.ejs', {name: 'hoge'});
});
app.listen(3000, (req, res) => {});

jsファイルおよびcssファイル

Applicationオブジェクト.use(express.static('xxx'));で公開フォルダを指定

var express = require('express');
var ejs = require('ejs');

var app = express();
app.engine('ejs', ejs.renderFile);
app.use(express.static('public'));
app.get('/', (req, res) => {
    res.render('index.ejs', {name: 'hoge'});
});
app.listen(3000, (req, res) => {});

クエリストリングの取得

req.query.name;で取得可能

クエリパラメータ（/100や/hoge/abcdなど）はreq.query.xxxで取得可能。

var express = require('express');
var ejs = require('ejs');

var app = express();
app.engine('ejs', ejs.renderFile);
app.use(express.static('public'));
app.get('/', (req, res) => {
    res.render('index.ejs', {name: req.query.name});
});
app.listen(3000, (req, res) => {});

POST値の取得

require('body-parser');でExpressのBody Parserオブジェクトを取得
※npm install --save body-parserでインストールしておく。
Applicationオブジェクト.use(Body Parserオブジェクト.urlencoded({extended: false}));
これによりURLエンコードされた値を取得する。(他にJSONなどが指定できる)
※第2引数のextendedはfalseにするとquerystringを利用するという意味。とりあえずこうしておくもの。
app.post()で処理を定義。POST値はreq.body.xxxで取得可能。

var express = require('express');
var ejs = require('ejs');
var bodyParser = require('body-parser');

var app = express();
app.engine('ejs', ejs.renderFile);
app.use(express.static('public'));
app.use(bodyParser.urlencoded({extended: false}));
app.post('/page3', (req, res) => {
    res.render('page3.ejs', {name: req.body.name});
});
app.listen(3000, (req, res) => {});

パーシャル

Expressでパーシャルを使う場合、view変数のfilenameは指定する必要はない。
テンプレートで
<%- include('ファイル名', パラメータ) %>とするだけでOK。

Express Generator

Expressアプリケーション生成ツール。

Express Generatorの特徴

スケルトンの生成機能がある
Expressのモジュール(body-parserなど)が全てインストール済み
ページ単位でjsファイルを追加していく方式(index.jsにすべて書くのではなく)

プログラムは、これまでのExpressの基本的な書き方とは異なり、Express Generator用の書き方になる。

Express Generatorでのインストール

npm install -g express-generator
※generatorは開発環境にだけ必要なのでグローバルインストールするべき

Expressバージョン3まではexpress.generatorとして組み込まれていたが、バージョン4から独立した。

Express Generatorアプリケーションの作成

スケルトンの作成
任意のフォルダに移動してexpress -e アプリケーション名
-eオプション：テンプレエンジンにEJSを指定(未指定の場合はJade(最近名前がPugに変わった)になる)
作成されたアプリケーションのフォルダに移動しnpm install
スケルトンを生成するだけではアプリとして実行はできない。なぜなら必要なパッケージ類が足りないから。
作成されたアプリケーションのフォルダに移動しnpm installを実行することでpackage.jsonを読み込み、必要なパッケージをインストールしてくれる。

Express Generatorアプリケーションの実行

npm start

node bin/wwwでも実行できる。
package.jsonにアプリを起動するためのstartという定義があり、
"start": "node ./bin/www"
と設定されているだけ。

ファイル構成

app.js：メインプログラム
bin/www：起動用スクリプト
routes/xxx.js：ルート毎の処理。app.jsでrequireされている。
views：テンプレート

ページ追加手順

app.jsに以下2行を追加
var hogeRouter = require('./routes/hoge');
app.use('/hoge', hogeRouter);
routes/hoge.jsを作成
views/hoge.ejsを作成

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

router.get('/', function(req, res, next){
    res.render('hello', { 
        msg: 'Hello World'
    });
});
module.exports = router;

// router.get()の第1引数は'/であり'/hoge'ではないので注意

セッション

Express Sessionモジュールを使う。
Express Generatorを使ってもインストールされないため、手動でインストールする。
npm install --save express-session
※Expressバージョン3まではexpress.sessionとして組み込まれていたが、バージョン4から独立した

app.jsに以下を追記。

var session = require('express-session');
app.use(session({
  secret: 'xxxxx',
  resave: false,
  saveUninitialized: false,
  cookie: {maxAge: 60 * 60 * 1000}
}));

secret：ハッシュキー
resave：変更がなくてもリクエストの度にセッションデータを保存し直すか
saveUninitialized：初期化されていない値を保存するか
cookie：セッションIDを保存するクッキーのオプション
※maxAgeはミリ秒

routes/xxx.jsのreq.session.xxxで参照・代入が可能になる。
※なぜかrenderをコールした後だと、セッションへの保存ができなかった

Express Validator

Express Validatorの使い方

npm isntall --save express-validatorでインストール
var validator = require('express-validator');で読み込み
app.use(validator());でアプリに追加
※app.use()をコールするので、上記2つはroutes/xxx.jsではなくapp.jsに記述
req.check().xxx();でルールを追加
※POST値だけはcheckBody()、クエリストリングだけはcheckQuery()
req.getValidationResult().then((result) => {処理});でチェックの実行
result.array()はキーにparam, msg, valueを持つ配列を返す

router.get('/', function(req, res, next) {
  req.check('name', '名前が入力されていません').notEmpty();
  req.check('mail', 'メールアドレスが正しくありません').notEmpty().isEmail();
  req.check('age', '年齢が正しくありません').notEmpty().isInt();
  
  req.getValidationResult().then((result) => {
    if (!result.isEmpty()) {
        res.render('form', result.array());
    } else {
        res.redirect('/complete');
    }
  });
});