N予備校「プログラミング入門Webアプリ」を受講しています。
今回が最後、第4章20〜24節です。
Sequelizeを利用したデータの削除
テストデータの一括削除。
function deleteScheduleAggregate(scheduleId, done, err) {
Availability.findAll({
where: { scheduleId: scheduleId }
}).then(availabilities => {
const promises = availabilities.map(a => { return a.destroy(); });
return Promise.all(promises);
}).then(() => {
return Candidate.findAll({
where: { scheduleId: scheduleId }
});
}).then(candidates => {
const promises = candidates.map(c => { c.destroy(); });
promises.push(promiseCommentDestroy);
return Promise.all(promises);
}).then(() => {
return Schedule.findByPk(scheduleId).then(s => { return s.destroy(); });
}).then(() => {
if(err) return done(err);
done();
});
}
Promise.all
複数のPromiseオブジェクトをまとめたPromiseを作成。
引数で渡したPromiseの処理を待って次の処理を実行する。
data属性
button(class=`availability-toggle-button btn-lg ${buttonStyles[availability]}`
data-schedule-id=schedule.scheduleId
data-user-id=user.userId
data-candidate-id=candidate.candidateId
data-availability=availability) #{availabilityLabels[availability]}
data-
プロパティを設定することで、JavaScriptから取得できる。
値渡しという点では、inputのhiddenと似てるような気もする。
$('.availability-toggle-button').each((i, e) => {
const button = $(e);
button.click(() => {
const scheduleId = button.data('schedule-id');
const userId = button.data('user-id');
const candidateId = button.data('candidate-id');
const availability = parseInt(button.data('availability'));
const nextAvailability = (availability + 1) % 3;
$.post(
`/schedules/${scheduleId}/users/${userId}/candidates/${candidateId}`,
{ availability: nextAvailability},
data => {
button.data('availability', data.availability);
const availabilityLabels = ['欠', '?', '出'];
button.text(availabilityLabels[data.availability]);
}
);
});
});
classで検索すると配列が返ってくる。
iはインデックス、eは エレメント。
this
基本的にはthisが書かれた処理の関数が所属するオブジェクトを指す。
entry.js
import $ from 'jquery';
globalThis.jQuery = $;
import bootstrap from 'bootstrap';
globalThis
Node.jsにおいて実行環境のグローバルオブジェクトを参照する。
グローバルオブジェクトのjQueryというプロパティに jQueryを代入している。
こうすることで、BootstrapがjQueryを利用できるようになる。
CSRF脆弱性への対策
ミドルウェアのcsurfをインストール
yarn add csurf@1.8.3
schedule.js
const csrf = require('csurf');
const csrfProtection = csrf({ cookie: true });
// 新規作成画面の前に認証のチェック
router.get('/new', authenticationEnsurer, csrfProtection, (req, res, next) =>{
res.render('new', {user: req.user, csrfToken: req.csrfToken() });
});
new.pug
input(type="hidden" name="_csrf" value!=csrfToken)
まとめ
今回で「プログラミング入門コース」を終了。修了の方がいいのか。
11月末からはじめて、最後の方は解説動画を参考にしながらでしたが、なんとかここまで進められました。
とはいえ、自分で手打ちしながらではあっても、実際に自分で一から何かを作ってみないと、本当の意味での理解はできないと思ってます。ここからですね。
↧