LoginSignup
2
1

More than 3 years have passed since last update.

turfjs の import 戦略について考える

Last updated at Posted at 2020-11-30

turf.js を使うには、

  • 全てのモジュールが含まれた @turf/turf を import する
  • 個々の機能の @turf/xxxx を複数選んで import する

の方法があります。

全てのモジュールが含まれた @turf/turf を import する方法

npm i --save @turf/turf
// index.js
import { buffer, lineString, LineString, Feature } from '@turf/turf';

const feature: Feature<LineString> = lineString([[130, 34],[131, 35]]);
const buffered = buffer(feature, 5, { units: 'meters' });

個々の機能の @turf/xxxx を複数選んで import する方法

npm i --save @turf/helpers @turf/buffer
// index.js
import { lineString, LineString, Feature } from '@turf/helpers';
import buffer from '@turf/buffer';

const feature: Feature<LineString> = lineString([[130, 34],[131, 35]]);
const buffered = buffer(feature, 5, { units: 'meters' });

個々の機能を選んで import する場合、基本となるデータ型やそれに係わる関数は @turf/helpers に入っているので、実質 @turf/helpers は必須になるでしょう。
この例では Buffer 関数を使うため、 @turf/buffer をインストールし、import します。
@turf/turf を使う場合とでは import 文が変わるだけで、実装コードは変わりません。

@turf/turf の import では接頭辞を付けられるのがよいのだけど…

私はこれまで @turf/turf を好んで使っていました。
しかも、import で * as turf とすることで、すべての型や関数を turf.xxxx と書くようにしていました。

// index.js
import * as turf from '@turf/turf';

const feature: turf.Feature<turf.LineString> = turf.lineString([[130, 34],[131, 35]]);
const buffered = turf.buffer(feature, 5, { units: 'meters' });

どこで turf.js を使っているかが分かりやすいためで、他のライブラリでもこのような書き方をする場合もあります。
特に Feature, Geometry などの GeoJSON 由来の型は、併用することが多い Mapbox GL JS のライブラリ にも存在しており、よく混同します。
なので、turfjs 用の Feature は turf.Feature と明示的に記述して差別化しています。

機能を個々に選択する場合では、以下のように別名をそれぞれ付与することができますが、、、。

// index.js
import { 
  lineString as turf_lineString, 
  LineString as turf_LineString, 
  Feature as turf_Feature
} from '@turf/helpers';
import { default as turf_buffer } from '@turf/buffer';

const feature: turf_Feature<turf_LineString> = turf_lineString([[130, 34],[131, 35]]);
const buffered = turf_buffer(feature, 5, { units: 'meters' });

指定方法がめんどいのと、できれば turf_ ではなく、 turf. と書きたいところです。

んで一括と個別、どちらがよいの?

一括でダウンロードされる? turf.min.js はファイルサイズが 550KB 程度あり小さくはありません。
しかし、webpack などのモジュールバンドラーを使うなら、使わない関数などを刈り取って必要な機能だけに圧縮できそうです。

私の場合、Angular や node.js の Web Server で使うことが多いため、Webpack での shrink に期待して、一括版の @turf/turf を使っておけばよいかなあ、という判断を現在はしています。

「個別版は○○という用途で使うのだ」という知見があれば教えてください。

2
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
1