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');
}
});
});サニタイズ
Express Validatorにはサニタイズ機能も用意されている。
ただし、テンプレートで<%= %>を使えばエスケープされるので、使うことはほとんどないはず。
（あえて<%- %>で表示するような場合だけ）
- エスケープ
req.sanitize('xxx').escape(); - トリミング
req.sanitize('xxx').trim();