技術と魚

技術調査、開発TIPS、駄文

JSライブラリを自前で作る時に何を導入するのが良さそうか

f:id:norainu234:20180128135749p:plain

「自分でJSのライブラリ作ろう!」と思った時、ソース・テストのディレクトリ構成、ES6+で書くべきか、型定義、テストFW、CI、ビルド方法、ドキュメント作成など考えておきたいことが色々あって、そんなこと考えている間に飽きてしまうことってよくありますよね。え、ない?

そこで、メジャーなOSSがどうしているのかを見ておけば、大体の指針を得られるのではないか、と思いざっと調べてみました。

※ライブラリの選び方は適当です

ImmutableJS

https://github.com/facebook/immutable-js

. ImmutableJS
種類 Utility(Isomorphic)
ソース記述 ES6+
テスト記述 TypeScript
型記述 TypeScript + Flow
テストランナー/FW/レポート Jest
チェック/整形 eslint / tslint / prettier
ベンチマーク benchmark
CI Travis
スクランナー npm script + gulp
ビルド rollup
ドキュメント React

ソース・テスト階層

src/**/*.js
__tests__/**/*.ts

express

https://github.com/expressjs/express/

. express
種類 WAF(NodeJS)
ソース記述 Legacy JS
テスト記述 Legacy JS
型記述 -
テストランナー/FW/レポート mocha / should / istanbul
チェック/整形 eslint
ベンチマーク wrk
CI Travis / AppVeyor
スクランナー npm script
ビルド -
ドキュメント -

ソース・テスト階層

lib/**/*.js
test/**/*.js

Semantic UI React

https://github.com/Semantic-Org/Semantic-UI-React

. Semantic UI React
種類 React Component Library(Browser)
ソース記述 ES6+
テスト記述 ES6+
型記述 TypeScript
テストランナー/FW/レポート karma + mocha + chai + enzyme + sinon
チェック/整形 eslint + tslint + satisfied
ベンチマーク -
CI CircleCI + Codecov
スクランナー npm script + gulp
ビルド webpack
ドキュメント React + doctoc

ソース・テスト階層

src/**/*.js
test/**/*-test.js

Material UI

https://github.com/mui-org/material-ui

. Material UI
種類 React Component Library(Browser)
ソース記述 ES6+
テスト記述 ES6+
型記述 TypeScript
テストランナー/FW/レポート karma + mocha + chai + enzyme + sinon + nyc(istanbul)
チェック/整形 eslint + eslint(spellcheck) + prettier + size-limit
ベンチマーク -
CI CircleCI + Codecov + Argos-CI
スクランナー npm script
ビルド webpack
ドキュメント React + next

ソース・テスト階層

src/**/*{.js,.d.ts}
src/**/*.spec.js

備考:

Sequelize

https://github.com/sequelize/sequelize

. Sequelize
種類 ORM(NodeJS)
ソース記述 ES6+
テスト記述 ES6+
型記述
テストランナー/FW/レポート mocha + chai + istanbul
チェック/整形 eslint
ベンチマーク -
CI Travis + AppVeyor + Codecov
スクランナー npm script
ビルド -
ドキュメント esdoc

ソース・テスト階層

lib/**/*.js
test/**/*.test.js

Redux

https://github.com/reactjs/redux/

. Redux
種類 Utility(Browser)
ソース記述 ES6+
テスト記述 ES6+
型記述 TypeScript
テストランナー/FW/レポート jest
チェック/整形 eslint + prettier
ベンチマーク -
CI Travis
スクランナー npm script
ビルド rollup
ドキュメント GitBook

ソース・テスト階層

src/**/*.js
test/**.spec.js

Bluebird

https://github.com/petkaantonov/bluebird

. Bluebird
種類 Promise Library(Isomorphic)
ソース記述 Legacy JS
テスト記述 Legacy JS
型記述 -
テストランナー/FW/レポート mocha + assert + istanbul
チェック/整形 jshint
ベンチマーク -
CI Travis
スクランナー npm script
ビルド -
ドキュメント -

ソース・テスト階層

src/**/*.js
test/**/*.js

Commander

https://github.com/tj/commander.js

. Commander
種類 Library for CLI(NodeJS)
ソース記述 Legacy JS
テスト記述 Legacy JS
型記述 TypeScript
テストランナー/FW/レポート Shell
チェック/整形 eslint
ベンチマーク -
CI Travis
スクランナー npm script
ビルド -
ドキュメント -

ソース・テスト階層

index.js
test/**/*.js

考察

記述言語や型:

  • Nodeのみのライブラリは、Legacyで書かれているものも多い。その他多くはES6+で書かれている。
    • 移行がダルいか、Blurbirdのようなprimitive系はLegacyとの互換性を意識しているため等じゃなかろうか、知らんけど。
  • 型についてはTypeScript>Flow。ただし、実装コードで使用するケースは少なく、あくまで型定義の公開に留めているものが多い。
    • ImmutableのようにテストだけTypeScriptで書くという手もあるようだ。

UIライブラリ

  • UIライブラリは、他のnpmライブラリに比べるとテストが細かい
    • MaterialUIのテスト技術スタックがとても参考になる

テスト・カバレッジ

  • テストFWはmochaがほとんど。jestが少々。
  • カバレッジツールとしてistanbulがかなり普及している

整形

  • ほとんどのライブラリが整形にeslintを採用している
  • まれにprettierを使用して整形しているものもある

CI

  • 小さいものはTravis。大きいものはCircleCI、Codecov、AppVeyorなど。

スクランナー

  • スクランナーについては、あまりgulpが使われていなくて、npm scriptで完結するパターンが多い。

ビルド

  • isomorphicなユーティリティライブラリはrollupを使ってビルドされているものが多い

ドキュメント化

  • ドキュメント化については、Reactライブラリ系はReactで書かれている。
  • ジェネレータ系でメジャーなものはあまりなさそう。
    • Markdown → doctocというのがあるらしい
    • HTML → ESDocが良さげ

ディレクトリ構成

  • ディレクトリは srctest の並列が多いが、MaterialUIのようにsrcにテストを含めるケースも存在する。

その他感想

  • istanbulは使ったことがないので今後調べたい
  • Argos-CIは知らんかった。こんなんあるんや。
  • ReduxのGitBookが読みやすいので使ってみたい

www.wantedly.com