Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
1
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

posted at

updated at

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

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 を使っておけばよいかなあ、という判断を現在はしています。

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
1
Help us understand the problem. What are the problem?