N予備校のプログラミング入門メモ18 - はかせだけど博士じゃない

はじめに

中途半端なところで中断してしまった。

4章実践サーバーサイドプログラミング

20.コメントの表示の更新

昨日はjQueryを使ってAJAXで出欠の更新を実装した。

コメントを取得する部分を実装する。予定にアクセスした際に予定に関するコメントを全件取得する。

コメントのRouterオブジェクトを実装。Applicationオブジェクトに登録する。

テストを書く。スタブを使ってログインしてスケジュールを作ってからパスにコメントのオブジェクトを渡してコメントを作成、レスポンスのステータスの確認とDBの確認を書いた。

テンプレートの方にコメントの表示とボタンを書いて、jQuery（app/entry.js）でコメントをPOSTするクリックイベントハンドラを実装。

ここまででwebpackしてからサーバを再起動して確認したところ、テンプレートのインデントを間違えて候補ごとにコメントが出てしまってちょっと笑った。

Promiseのチェインについて。そういえば以前の職場ではthenがすごい入れ子になってて直さないのかなぁと気になっていた。講座ではネストが深い関数についてチェインでリファクタリングした。

21.予定の編集と削除

編集機能を作る。まず編集画面のテンプレートを作成。ちなみに予定作成画面と要素はほぼ同じなので、作成モードと編集モードみたいなパラメータで同じテンプレートを使うようにも作れそうな気がする。どっちがいいんだろうか。

Routerオブジェクトにパスのハンドラを登録。アクセスして表示されるか確認する。

POSTメソッドの処理を実装。対象のスケジュールを取得して自分のIDとの一致を確認、update関数でスケジュールを更新したら、候補を追加する。この際同じ処理を切り出して関数化したりした。

削除機能を作る。編集画面に削除ボタンを追加し、テストで作成した削除関数を持ってきて削除機能は完成。

これで要件はすべて満たせた。

22.デザインの改善

Bootstrapを使ってかっちょいい感じにした。

グローバルオブジェクトを取得するには以下のようにする。

const global = Function('return this;')();

23.セキュリティ対策と公開

脆弱性一覧を見て対策が必要なものを考える。

csurfを使って対策する。

const csrfProtection = csrf({ cookie: true });

router.get('/new', authenticationEnsurer, csrfProtection, (req, res, next) => {
  res.render('new', { user: req.user, csrfToken: req.csrfToken() });
});

router.post('/', authenticationEnsurer, csrfProtection, (req, res, next) => {
  // 中略

みたいにするとトークンを発行・確認する。あとは

input(type="hidden" name="_csrf" value!="#{csrfToken}")

のようにテンプレートでトークンをPOSTするようにして対策完了。csurfの使い方は README.mdを参照。

認証後にアクセスした画面にリダイレクトされるように実装を変更する。

認証する関数でログイン画面にアクセスする際、元のURLをクエリに含めるようにして、ログインのRouterオブジェクト側でクエリの内容をCookieに保存。OAuthのコールバック関数内でCookieから元のURLを取得してそこにリダイレクトするように実装した。

Herokuへの公開の準備をする。

app.jsonでアプリケーション情報を記述、package.jsonにNode.jsのバージョンを追記、DBのURLもHerokuのものを使用するに変更。ここまでをコミットしておく。

Herokuにログインしてサーバーを作成、URLを控えておく。

以下のようにPostgreSQLのDBを作成。

heroku addons:create heroku-postgresql:hobby-dev

一旦Herokuにpush。ここまででトップページが表示できる。

GitHub認証のためにアプリケーションを登録する。Client IDとClient Secretを控える。

Herokuの環境変数に登録。

heroku config:set HEROKU_URL='https://xxx-xxxxxxx-XXXXXX.herokuapp.com/'
heroku config:set GITHUB_CLIENT_ID='000000000000000000'
heroku config:set GITHUB_CLIENT_SECRET='000000000000000000000000000000000'

アプリケーション側でIDと秘密鍵、コールバックするURLを上記を使うように変更する。

以上をコミットしてHerokuにpushするとアプリ開発は完了。

ちなみにトップページを表示する段階でHerokuのエラー画面が出たのでheroku logsして確認して修正してデプロイしなおすなどした。

練習問題は、何かネタを考えてみよう。ひとまず4章は完了。