スマートコントラクトアプリ作り始めたけどweb3.js周りが辛かった

10月からethereumのスマートコントラクトを用いたアプリケーション開発を始めましたが、だいぶリポジトリの構成に苦戦しました。

初めはAngular（&typescript）でやろうとしていたのですが、webpackの構成でnodejs shimをoffにしているがweb3がnodejsアプリとのコンパーチブルで開発されているのでパッチを当てる必要¹があったり、web3.js自体がbetaで破壊的変更を繰り返しているため@type/web3のtype定義が合っていないなどに加え、web3.jsのメジャー1がまだbetaでとてもbuggyなため、初心者にはどこに問題があるかの切り分けが大変でした。²

ちょうどその頃、twitterでethereumの月間活動報告みたいなreportが流れてきて、typescriptネイティブで書き直されたというweb3xというPJを知りました。

typescriptベースでアプリケーションを作ろうとしたら非常に興味深いPJなので記事にまとめてみます。

web3.jsの辛いところ

githubスター7000超えでmetamaskやtruffleやgethなどあちこちの重要PJに使われていますが、けっこうしんどい状況だなと思います。

コードアセットが古い
- nodejsアプリを前提にして作られているためかブラウザアプリ開発としては一世代古いコード資産になっている
- 開発環境が古く、babelやtypescriptといったトランスパイラもなし
- node6（まだ一部のES2015しか導入されていない）レベルが中心になってる
- 非同期ハンドリングがコールバックのみでPromiseがない。
開発の迷走
- メジャー1がbetaで開発中だがbetaだけに安定しない。
- 途中でd.tsが追加されたが、現在は除外されている。
- ESModule移行ブランチが起こされたが保留になっている。今見ると消えているので諦めた？
- beta36が8月にリリースされたがbuggyでダウングレードするPJが相次ぐ。³

web3xとは

リポジトリ: https://github.com/xf00f/web3x

web3のjsオルタナ実装です。良さみを挙げていきます。

typescriptネイティブである
- libraryもbuild targetもES2015で構成されている。
  - IEのサポートは要らないし、通信アダプタなのでSEO/OGPの考慮も要らないのでこれで良いですね。
- 当たり前ながら全てに型を付けられる。
- 外部境界であるABI.jsonも専用ツールで型ファイルを作ることができる。
  - OpenAPI（swaggerなど）のようにというか、function定義まで入ってくるのでAST（abstractSynataxTree）というか。
- 非同期はPromiseベース。ただしES2017targetではないのでasync/awaitはネイティブではないpolyfillになる。
  - async/awaitでリポジトリ検索しても大半はテストファイルにしか使われていないが一部ライブラリコードにも使われているのでバグ解析では考慮必要かも。
commonjsとESModuleの二つのビルド
- 割り切ってNPM packageが2つに分かれている。⁴
- ブラウザアプリ開発ではweb3x-esをincludeする。
- 静的解析が効くのでwebpackやrollupのtreeShakingが行える。
  - web3.jsだと800kbだが、web3xだと150kbになるとのこと。⁵

注意点

ライセンスがLGPL-3なのでツールやサイドチェーンに組み込む際には注意。ただし、移植作業が進みコードの書き換えが増えればMITに移行できるかもねとのこと。⁶
ピュアな移植ではなく破壊的変更を明記しているのでweb3ドキュメントと一部APIが変わる。
現状では適用できる場面がweb3を生で使う時に限定される。ツールやサイドチェーンがweb3.jsをdependenciesに組み込んでいると使えない、もしくは二重化必至。

web3xを使ってみませんか？

おそらく普段最新環境でやっているwebフロントエンドの開発者でも満足できるだけのレベルに引き上がってきてるんじゃないでしょうか。私はそうです。なんといってもtypescriptネイティブなので、本体と型定義がずれることもなければ、型安全もかなり行き届ける可能性が上がるわけです。contractのABIにもツールを開発しているのは驚きがありました。

もちろんweb3.jsが動いてくれるのが最善ではあると思う⁷のですが、既存稼働アプリとの互換性などありtypescriptベースで書き換えするのは難しそうな気がします。ES Module移行ブランチも諦められたようですし。（これはnodejs界隈からしてカオスなので仕方がないとは思う。）

もし、web3xがおもしろそうだなと思ったらリポジトリにスター付けたりコントリビューションしていきましょう！

https://gist.github.com/niespodd/1fa82da6f8c901d1c33d2fcbb762947d ↩
https://github.com/ethereum/web3.js/issues/1916#issuecomment-432547562 ↩
https://github.com/loomnetwork/loom-js/pull/142 ↩
tsconfigのmoduleを分けている。ブラウザアプリ用 https://www.npmjs.com/package/web3x-es nodejs用 https://www.npmjs.com/package/web3x ↩
https://github.com/xf00f/web3x/blob/master/README.md ↩
https://github.com/xf00f/web3x/issues/10#issuecomment-445048343 ↩
この記事を書いている日に約4ヶ月ぶりの最新1.0.0-beta37がリリースされました🎉 ↩