XXとしてる: 動的インポートとJSでのポインタ渡し

webpackとOpenLayerを使うと大体こんな感じのコードになると思う。

```js

import Feature from 'ol/Feature.js';
import Geolocation from 'ol/Geolocation.js';
import Point from 'ol/geom/Point.js';
import {Draw, Modify, Snap} from 'ol/interaction.js';
import {Tile as TileLayer, Vector as VectorLayer} from 'ol/layer.js';
import Map from 'ol/Map.js';
import {OSM, Vector as VectorSource} from 'ol/source.js';
import {Circle as CircleStyle, Fill, Stroke, Style} from 'ol/style.js';
import View from 'ol/View.js';

// なんらかの処理

```

<div style="text-align:center;">毎回このインポート書くの面倒だなぁ・・・</div>

というわけで、いわゆるc言語での必要なヘッダーをすべてインクルードした`all.h`みたいなものを作ってみた。

さらにES6では動的インポートというものも導入されたそうなのでそれも使ってみる。

これで不要なものはインポートしなくて済むから効率的だし一つのファイルをインポートするだけで使えるし、よかったよかった。

```js
// olDynamic.js All.h的なもの
export default {
  Map: () => import(/* webpackChunkName: "ol/Map" */ 'ol/Map'),
  View: () => import(/* webpackChunkName: "ol/View" */ 'ol/View'),
  Layer: () => import(/* webpackChunkName: "ol/layer" */ 'ol/layer'),
  source: () => import(/* webpackChunkName: "ol/source" */ 'ol/source'),
  Feature: () => import(/* webpackChunkName: "ol/Feature" */ 'ol/Feature'),
  Geolocation: () => import(/* webpackChunkName: "ol/Geolocation" */ 'ol/Geolocation'),
  interaction: () => import(/* webpackChunkName: "ol/interaction" */ 'ol/interaction'),
  style: () => import(/* webpackChunkName: "ol/style" */ 'ol/style'),
  geom: {
    Point: () => import(/* webpackChunkName: "ol/geom/Point" */ 'ol/geom/Point')
  }
}
```

```js
// 使う側
import olDynamic from './olDynamic'

const Map = await olDynamic.Map()
const Feature = await olDynamic.Feature()
const Geolocation = await olDynamic.Geolocation()
const Feature = await olDynamic.Feature()
const Point = await olDynamic.geom.Point()
const {Draw, Modify, Snap} = await olDynamic.interaction()
const {Tile as TileLayer, Vector as VectorLayer} = await olDynamic.Layer()
const {OSM, Vector as VectorSource} = await olDynamic.source()
const {Circle as CircleStyle, Fill, Stroke, Style} = await olDynamic.style()
const View = await olDynamic.View()

// なんらかの処理

```

<div style="text-align:center;">あんまり変わってなくない？</div>

require()を使っているみたいでバージョンが逆戻りしている感じになっているし、毎回同期待ちしているのも効率的ではないから、悪くなっているぞ！

## 本題

という感じの経緯を辿ったが、やっぱり毎回importを書くのは面倒だし、動的インポートは使いたい。

だから、下のコードみたいに読み込めるようにした。
これだと[Quick Start](https://openlayers.org/en/latest/doc/quickstart.html)みたいに`ol.XXX`で使えるから割と理想的。

```js
import olDynamic from './js/ol-dynamic'

async function main() {
  const ol = await olDynamic.imports(['Map', 'View', 'Layer', 'source', 'Feature', 'Geolocation', 'interaction', 'style', 'geom/Point'])

// 何らかの処理
  const map = new ol.Map({...})
}

main()
```

`olDynamic.imports`の内容は以下のもの

```js
imports = async function(list) {
  let importList = []
  for(const l of list) {
    const dynamicImport = getProperty(this, l)
    importList.push(dynamicImport())
  }
  const modules = await Promise.all(importList)
  let ol = {}
  for (let i=0; i<list.length; ++i) {
    setProperty(ol, list[i], modules[i])
  }
  return ol
}
```

重要な部分は`Promise.all`とgetProperty/setProperty関数だ。

`Promise.all`のおかげで、はじめの失敗例みたいに一つ一つ読み込むのではなく並列的に読み込むようになった。

そして、`Promise.all`に渡すパラメータを生成するためにgetProperty関数を利用してリストを作った。

getProperty関数の内容は次のものになる

```js
function getProperty(obj, path) {
  let prop = obj
  for(const p of path.split('/')) {
    if (!prop[p]) {
      throw new Error(`Access unknown property name... path=${path}`)
    }
    prop = prop[p]
  }
  return prop
}
```

最後に`Promise.all`の返り値からインポートしたモジュールのリストを作る。

setProperty関数をつかうのだが、それははじめgetProperty関数と似た感じになっていた。

しかし、実行してみるとちゃんと動いてくれない。

```js
//問題のあるsetProperty関数
function setProperty(obj, path, value) {
  let prop = obj
  for(const p of path.split('/')) {
    prop[p] = {}   // この2行で意図しない処理になる
    prop = prop[p] // ...
  }
  prop = value // 意図しない処理になる
}
```

<div style="text-align:center;">値が空オブジェクトになっているぞ！！</div>

上のコメントで書いてある部分が悪さをしているコードになる。

## ポイント渡し風にするときは再帰関数を使う

JSではオブジェクトは参照渡しになっているが、上のコードを書いたときC言語で言うポインタ渡しになっていることを期待していた。

が、オブジェクトに他の値を代入すると参照関係が切れてしまって、`obj`とは全く関係のない値になってしまっていた。

このような場合は再帰関数を使うと期待した通りに動作してくれる。

少し読みづらくなっているが、predがその再帰関数となる。

```js
//修正後のsetProperty関数
function setProperty(obj, path, value) {
  const pred = (prop, pathList, value) => {
    const p = pathList[0]
    if (pathList.length === 1) {
      prop[p] = value
    } else {
      if (!prop[p]) {
        prop[p] = {}
      }
      pathList.shift()
      pred(prop[p], pathList, value)
    }
  }
  pred(obj, path.split('/'), value)
}
```

pred関数内で行っている処理の内容は修正前のsetProperty関数と変わっていないが、再帰関数にしたことによってコードはちょっと見た目が変わっている。

が読みづらいし、Blogなので見栄をはってif文を消し関数型言語っぽくしてみるとこうなる。

```js
function setProperty(obj, path, value) {
  const pred = (prop, pathList, value) => {
    const p = pathList[0]
    pathList.length === 1
      ? prop[p] = value
      : pred(prop[p] ? prop[p] : prop[p] = {}, pathList.slice(1), value)
  }
  pred(obj, path.split('/'), value)
}
```

こっちのほうが見やすいかどうかは別としてすっきりとした。<strike>分岐はしているのは許して</strike>

## 終わりに

```import {Map, View} from 'ol'```でいいことには作ってから気がついた。

動的インポートだから差別化はできているからよし。多分。

（画像は以下のものを使用させていただきました。）

XXとしてる

2019年3月22日金曜日

動的インポートとJSでのポインタ渡し

0 件のコメント:

コメントを投稿