# モチベーション

https://github.com/typicode/json-server

`json-server` を使ってモックサーバーを建てるとき、公式のREADMEにもあるようにリソースに対する基本的な操作はデフォルトで用意されている。つまり、特定のリソースの取得や単項目のリソースの登録、そしてパスでリソースを指定した上での更新・削除などは、自分で定義せずとも `db.json` をもとに自動でREST APIが用意される。

ただ、中にはデフォルトで用意されないものもある。例えば、配列で定義されたリソースに対して、複数項目を一括で登録・更新・削除するためのREST APIはデフォルトでは存在していない。今回はこれについてやり方をまとめておく。

以下の情報をベースにしている。

https://stackoverflow.com/questions/57868537/post-collection-of-objects-in-json-server

# server.js の書き方

## ベース部分

ありがたいことに、`json-serve` のREST APIは、`server.js` を作成すれば簡単に拡張することができる。`server.js` は以下のように書く。

```js:server.js
const path = require('path');

const jsonServer = require('json-server');
const server = jsonServer.create();
const router = jsonServer.router(path.join(__dirname, 'db.json'));
const middlewares = jsonServer.defaults();
const _ = require('lodash');

server.use(middlewares);
server.use(jsonServer.bodyParser);

// ここに独自のAPIを定義する

server.use(router);
server.listen(8080, () => {
  console.log('JSON Server is running');
});
```

上記のコードは `db.json` と `server.js` が同一ディレクトリに置かれることを前提としている。このAPIサーバーは次のコマンドで起動する。

```
node path/to/server.js
```

## 配列のリソースに対する複数件の一括操作

上記の `// ここに独自のAPIを定義する` の箇所にAPIを実装する。ここではTodoリストのようなものを想定し、`todos` というリソースが配列であることを想定している。

つまり、`db.json` が以下のような形の場合である。

```json:db.json
{
  "todos": []
}
```

### 登録

`/todo` のエンドポイントに `POST` を定義する。リクエストボディに入っているTodoの配列を使ってDBを更新する。

```js
server.post('/todos', (req, res) => {
  const db = router.db;
  if (Array.isArray(req.body)) {
    req.body.forEach((element) => {
      insertTodo(db, 'todos', element);
    });
  } else {
    insertTodo(db, 'todos', req.body);
  }
  res.sendStatus(200);

  function insertTodo(db, collection, data) {
    const table = db.get(collection);

    // data.idのtodoが存在しなければ新たに作成する
    if (_.isEmpty(table.find({ id: data.id }).value())) {
      table.push(data).write();
    } else {
      table
        .find({ id: data.id })
        .assign(_.omit(data, ['id']))
        .write();
    }
  }
});
```

### 更新

`/todo` のエンドポイントに `PUT` を定義する。リクエストボディに入っているTodoの配列を使ってDBを更新する。

```js
server.put('/todos', (req, res) => {
  const db = router.db;
  if (Array.isArray(req.body)) {
    req.body.forEach((element) => {
      updateTodo(db, 'todos', element);
    });
  } else {
    updateTodo(db, 'todos', req.body);
  }
  res.sendStatus(200);

  function updateTodo(db, collection, data) {
    const table = db.get(collection);

    // data.idのtodoが存在する場合のみ、todoの中身を更新する
    if (_.isEmpty(table.find({ id: data.id }).value())) {
      return;
    } else {
      table
        .find({ id: data.id })
        .assign(_.omit(data, ['id']))
        .write();
    }
  }
});
```

### 削除

`/todo` のエンドポイントに `DELETE` を定義する。以下は削除対象の `id` をクエリパラメータで渡すことを想定している。

例： `/todo?id=foo&id=bar&id=baz`

```
server.delete('/todos', (req, res) => {
  if (!req.query.id) {
    res.sendStatus(400);
    return;
  }
  const db = router.db;
  if (Array.isArray(req.query.id)) {
    req.query.id.forEach((id) => {
      deleteTodo(db, 'todos', id);
    });
  } else {
    deleteTodo(db, 'todos', req.query.id);
  }
  res.sendStatus(200);

  function deleteTodo(db, collection, id) {
    const table = db.get(collection);

    // data.idのtodoが存在する場合のみ、todoを削除する
    if (_.isEmpty(table.find({ id: id }).value())) {
      return;
    } else {
      table.remove({ id: id }).write();
    }
  }
});
```

## 補足

json-serverにおけるDB周りの処理は [`lowdb`](https://github.com/typicode/lowdb) に依存しているので、その他の操作についてはlowdbのREADMEを確認するのが良い。

また、上記で挙げたREST APIはレスポンスでステータスコードのみ返しているが、もし例えば更新後のTodo全量をレスポンスボディで返したいという場合は、`res.sendStatus()` を以下のように書きかえれば良い。

```js
res.status(200).jsonp(db.get('todos').value());
```


json-serverで複数項目の登録・更新・削除のAPIを定義する

# openerとブラウザプロセス

タイトルの通り、Webアプリケーションにおいて遷移先画面に `opener` (遷移元画面 `Window` への参照) を渡してしまうと、アプリケーションのパフォーマンス問題を招く可能性がある。JavaScriptの `window.open` における `windowFeatures`、あるいはHTMLのanchor要素における `rel` 属性の設定を考えたことのある人なら、おそらく一度はぶつかる話である。

今に始まった話ではないので、この件に関してWebで検索すれば日本語のものも含めいくつも情報を見つけることができる。その中の多くは以下の記事を元ネタにしている。

https://jakearchibald.com/2016/performance-benefits-of-rel-noopener/

一部抄訳して引用すると、

> ほとんどのブラウザは、Firefox を除いて（そして彼らはそれに取り組んでいます）、マルチプロセスです。各プロセスには、私たちがよく「メイン」スレッドと呼ぶものを含め、複数のスレッドがあります。ここでは、構文解析、スタイル計算、レイアウト、ペイント、および非ワーカー JavaScript が実行されます。つまり、あるドメインで動作するJavaScriptは、別のドメインで動作するウィンドウ/タブとは別のスレッドで実行されます。
>
>しかし、DOM が window.opener を介して与える同期的なクロスウィンドウ アクセスにより、target="_blank" で起動したウィンドウは同じプロセスおよびスレッドで終了します。iframeやwindow.openで開かれたウィンドウも同様です。

最初、この記事が執筆されたのが2016年だったので、もしかすると今では状況も変わっているのではないかと期待したが、手元で検証してみたところ2022年の現在でも状況は変わっていなかった。

ということで、引き続きアプリケーションのパフォーマンスを考えるのであれば　（セキュリティリスクを無視できるとしても） `opener` は渡すなというのが結論になるのであるが、今後いつ状況が変わるかわからない（あるいは永遠に変わらないかもしれない）ので、いつでもサクッと状況を確認できるように検証アプリを用意した。

# 検証アプリ

検証アプリは以下にデプロイしている。

https://yukiyokotani.github.io/performance-impact-of-passing-window-opener/

アプリの中には3つのボタンがある。

- `Open in New Tab`  
  新しいタブで画面を開く。このとき、新しいタブには遷移元から `opener` が渡るようになっている。
- `Exclusive thread for 10 seconds`  
  ループで10秒間スレッドを専有するようにしている。実行すると処理の間、自タブは勿論 `opener` を通じて `Window` への参照を共有している他タブもレンダリングがストップする。
- `+1`  
  カウンターのインクリメントボタン。レンダリングがストップしていることを確認するためにある。ループがスレッドを専有している間はクリックしても反応しない。

ソースコードは以下のリポジトリに上げている。

https://github.com/yukiyokotani/performance-impact-of-passing-window-opener

# 補足：なぜopenerを渡したいか

`opener` を渡さなければいけないケースというのは実際のところかなり少ないとは思うが、あえて渡すとしたら以下のようなケースが考えられる。

- 別タブで開いた遷移先windowから遷移元windowの内容を参照したい
- 別タブで開いた遷移先windowから遷移元windowへ [`window.postMessage()`](https://developer.mozilla.org/ja/docs/Web/API/Window/postMessage) でメッセージを送りたい。

パフォーマンス問題が起きた場合、もし遷移元と遷移先が同一オリジンであれば [`BroadcastChannel API`](https://developer.mozilla.org/ja/docs/Web/API/BroadcastChannel) を利用したメッセージのやり取りで問題は回避できると思われる。ただ、遷移元と遷移先でオリジンが異なる場合、 `opener` を渡さずに (つまりパフォーマンス問題を回避して) 要件を達成する方法を自分は知らない。

# 補足：openerの渡し方

遷移先に `opener` を渡す方法、あるいは渡さない方法について簡単にまとめておく。

## window.open

`window.open` で遷移する場合のopenerの指定は引数の `windowFeature` によって行う。デフォルトでは `opener` が渡るので、渡したい場合は特に何もしなくて良い。渡したくない場合は `noopener` もしくは `noreferrer` を設定する必要がある。この両者の違いは遷移先に `referrer` を渡すかどうかなので、それをもとに判断すればよく、両方設定する必要はない。

動作確認する際は、遷移先のコンソールで `document.referrer` を見てみればよい。ちなみに `opener` についてもコンソールで `window.opener` を見れば、`opener` が渡っているかを簡単に確認することができる。

https://html.spec.whatwg.org/multipage/window-object.html#apis-for-creating-and-navigating-browsing-contexts-by-name

## anchor要素

`target='_blanck'` の場合が問題になる。Chromiumは `target='_blanck'` の場合にデフォルトで `opener` を渡さないようになっているので、渡したくない場合は何もしなくて良い。渡したい場合は `rel=opener` で明示的に設定する必要がある。

https://html.spec.whatwg.org/multipage/links.html#link-type-opener


Articles

json-serverで複数項目の登録・更新・削除のAPIを定義する

別タブで開いた画面にopenerを渡すことによって引き起こされるパフォーマンス問題について