今回は「Webグラフィックス Advent Calendar 2020」に投稿した記事「SVG + CSS + Node.js + receiptline で電子レシートを発行してみよう」の補足です。

上記の記事では、作成した SVG の電子レシートを貼り付けることができず、仕方なくスクリーンショットを撮って PNG 形式で貼り付けていました。

ところが、翌日に投稿された、カレンダー作成者 warotarock さんの記事には、「動くもの」が CodePen で埋め込まれているではありませんか！

そこで、作成した SVG の電子レシート各種も CodePen でデモしてみたいと思います。

動くもの

See the Pen SVG + CSS + Node.js + receiptline = Digital Receipt by dopperi46 (@dopperi46) on CodePen.

何とかできました！
ハマりどころは、CodePen 埋め込みスクリプトの URL を変更しないと表示されないところ。

<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>

また何か作ったら投稿します。ではまた！

目次：Webアプリ開発ロードマップ

第9回：ニュースフィード投稿サーバIFを作る

今回はニュースフィードを投稿するPOST /newsfeedsを作成します。

ニュースフィードを投稿するIFを登録する

下記のようにapp/rest.tsを修正し、expressにPOST /newsfeedsを追加します。
一旦受信したデータをログに出力するだけにしておきます。

        });
        app.post('/newsfeeds', (request, response, next) => {
            try {
                console.log(request);
                response.sendStatus(200);
            } catch (error) {
                response.sendStatus(500);
            }
        });
    }
    stop() {

作成したIFをクライアントから呼んでみる

Postmanを使って、作成したPOST /newsfeedsを呼び出してみます。
画像のようにPOST http://127.0.0.1:4300/newsfeedsを作成し送信するとレスポンスが受信できていることが確認できます。
1) 画面上部のタブ(＋)をクリックし、新規のタブを追加します。
2) メソッドにPOSTを選択します。
3) request URLにhttp://127.0.0.1:4200/newsfeedsを入力します。
4) Bodyに画像のとおりJSONを設定します。
5) Sendボタンをクリックします。

Sendを押すとレスポンスとして200 OKを受信していることが確認できます。

サーバ側で受信したデータを確認する。

PostmanからPOSTメッセージを呼び出したあと、サーバ側のログにリクエストの中身が出力されました。
bodyの中に送信したデータが入っていることが確認できます。

joiを使ってパラメータチェックを行う。

モジュールをインストールする

下記のコマンドを実行し、joiをインストールします。

$ npm install joi

joiを読み込ませる

下記のようにapp/rest.tsを修正し、joiを読み込ませます。

app/rest.ts

import bodyParser = require('body-parser');
import joi = require('joi');
import {environment} from '../environment';

受信したリクエストBODYをjoiを使ってバリデーションします。

app/rest.ts

      try {
          const body = request.body;
          console.log(body);
          // パラメータのフォーマットを定義
          const scheme = joi.object({
            message: joi.string().required(),
            createdAt: joi.date().required()
          });
          // バリデーション
          const {error, value} = scheme.validate(body);
          if (error) {
            response.sendStatus(400);
          } else {
            response.sendStatus(200);
          }
      } catch (error) {

messageはstring型であること、createdAtはDate型であることをチェックしています。
また、どちらもrequiredで必須パラメータであることを指定しています。

Postmanから様々なパラメータを設定し呼び出してみて、
パラメータエラー(400)を正しく検知できていることを確認しましょう。

最後に

今回はニュースフィードを投稿するPOST IFを一つ作成してみました。
次回はフロントエンドからこのAPIを呼び出してみます。
今回開発したソースコードは GitHub に入っています。

変数を含んだpathでも特定のpathが含まれているかを確認する場合。

const noCheckPaths = /api/v1/user/${userId}などの場合

noCheckPaths.map(o => (`^${o}$`)).some(o => RegExp(o).test(ctx.path))) 

公式

• https://docs.mongodb.com/manual/reference/method/db.collection.initializeUnorderedBulkOp/

イメージ

• 繰り返し処理などで一回一回 db に接続しにいく処理があったとする。

• その処理は結構大変なので、パフォーマンスが激減する。

  • 例えば、洗濯物をタンスにしまうときに、
  • タンスを開ける -> 洗濯物を一枚入れる -> タンスを閉める...
    
  • この処理をその回数分繰り返しているような感じ。
  • 非常に能率が悪いことがわかる。

• BulkOp を使うと、

  • Bulk に貯めといて、一回で db に全部入れておしまい ♪
  • みたいな感じになると思っている。

一例

 async なんかの関数(なんかの引数) {
(省略)
    // mongodb に接続してなんかの db を取得する。　今回は page としよう。
    const pageCollection = mongoose.connection.collection('pages');
    // bulk を作る。 この時点では空っぽ。。。
    const unorderedBulkOp = pageCollection.initializeUnorderedBulkOp();

    // 繰り返し処理
    for (let i = 0; i < pages.length; i++) {
      if (originPages[i].redirectTo !== pages[i].path) {
        throw new Error('The new page of to revert is exists and the redirect path of the page is not the deleted page.');
      }
      // 一回 bulk に貯めとく。
      unorderedBulkOp.find({ _id: originPages[i]._id }).remove();
    }

    //繰り返し処理が終わったら,db に接続する。
    try {
      await unorderedBulkOp.execute();
    }
    catch (err) {
(省略)

どれくらい早くなんの？

• 数十件ならばそんなに変わらない。
• 数千件になると、約1分30秒位変わる。
• つまり多ければ多いほど、この効果を実感できる。