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

「Node.js超入門」の感想・忘備録1の続き

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のインストール

  1. ディレクトリを作成し、そこへ移動
  2. npm init(質問にはすべてEnterキーでOK)
  3. package.jsonが生成される
  4. npm install --save express
  5. インストールされる
    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の特徴

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

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

Express Generatorでのインストール

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

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

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

  1. スケルトンの作成
    任意のフォルダに移動してexpress -e アプリケーション名
    -eオプション:テンプレエンジンにEJSを指定(未指定の場合はJade(最近名前がPugに変わった)になる)
  2. 作成されたアプリケーションのフォルダに移動し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の使い方

  1. npm isntall --save express-validatorでインストール
  2. var validator = require('express-validator');で読み込み
  3. app.use(validator());でアプリに追加
    ※app.use()をコールするので、上記2つはroutes/xxx.jsではなくapp.jsに記述
  4. req.check().xxx();でルールを追加
    ※POST値だけはcheckBody()、クエリストリングだけはcheckQuery()
  5. 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');
    }
  });
});

サニタイズ

Express Validatorにはサニタイズ機能も用意されている。
ただし、テンプレートで<%= %>を使えばエスケープされるので、使うことはほとんどないはず。
(あえて<%- %>で表示するような場合だけ)

  • エスケープ
    req.sanitize('xxx').escape();
  • トリミング
    req.sanitize('xxx').trim();

【新しい記事】

【古い記事】

コメントを残す

メールアドレスが公開されることはありません。