🔗

Web3アプリ(DApps)を作るための技術選定

2023/01/15に公開

個人でDAppsを開発する時の技術選定について書きます。
EVMでの開発前提です。

選定の基準

  • 導入してすぐに使えるか
  • サイズ・動作が軽いか
  • 継続的に開発されているか
  • 依存性が低いか

フレームワーク

https://ja.reactjs.org/
フレームワークはViewにReactを採用しているNext.jsやVite + React等がおすすめです。
理由はWeb3系の多くのライブラリがReact向けに作られているか、それらのチュートリアル・ドキュメントがReactでの開発を前提としたものであるためです。
もちろんVueやSvelte等でもDAppsの開発は可能ですが、対応しているライブラリや開発者の数を考えると、あまりお勧めできません。
個人的にはホスティング先に囚われづらいVite + Reactの組み合わせが現状一番いいと思っています。

管理

Typescript

通常のWeb開発におけるTypescriptの便利さはもちろん、後に出てくるスマートコントラクトの型を生成できるtypechainを使うためにも必ず採用しています。

yarn workspaces

スマートコントラクトとWebアプリケーションの二つを同時に開発することが多いため、monorepoで開発しています。ただし、1つのプロジェクト内でも同時に開発はできるので、個人開発であれば無理にmonorepoしなくてもいいと思います。
yarnを採用しているのは好みなので、npmでも大丈夫です。

その他にもlinterやCI系のライブラリも使いますが、DApps固有のものではないので割愛します。

開発環境

https://hardhat.org/
Hardhatは、スマートコントラクトの開発・テスト・デプロイと、開発用のローカルネットワークの構築ができる開発環境です。

似た開発環境として、Truffle Suite(https://trufflesuite.com/)というものもあり、1~2年前まではTruffleが主流だったと思いますが、最近はHardhatが使われることが多いです。

HardhatはTruffleに比べ、テストの記述が簡単で、プラグイン機能を使ってコントラクトの型定義を生成したり、独自スクリプトでコントラクトのデプロイとetherscanでのVerifyを自動化できたりと、Truffleの上位互換とも言える開発環境なので、特に理由がなければHardhatの採用をお勧めします。

スマートコントラクト

https://www.openzeppelin.com/contracts
OpenZeppelin ContractsはERC20やERC721といったトークンや、アクセスコントロール、Upgradable Proxy等のよく使われるスマートコントラクトをカスタム可能な形で提供してくれるライブラリです。npmパッケージとしてインストールできます。

フロントエンドライブラリ

ethers.js

https://docs.ethers.org/v5/
JavaScriptからブロックチェーンにアクセスするためのライブラリ。
似たライブラリとしてweb3.jsがありますが、ethers.jsに比べサイズが大きかったり、テストの記述が不十分、web3.jsにできることは基本的にethers.jsでもできるといった理由でethers.jsを選択しています。

web3-react

https://github.com/Uniswap/web3-react
複数タイプのウォレットに接続し、Contextでアプリ上のどこからでも利用できるようにしてくれるライブラリ。
ethers.js単体だとMetaMaskにしか接続できませんが、web3-reactを使うことで、WalletConnectやGnosis Safe等のウォレットにも簡単に接続できるようになったり、そのウォレットをethers.jsかweb3.jsのインスタンスとしてHooksから取得できたりと、煩雑になりがちなウォレット周りをシンプルにしてくれるため、ReactでDApps開発をする場合は必ず導入すべきだと思います。

テスト環境

Mocha & chai

https://mochajs.org/
HardhatやTruffleを使う場合は、Mochaとchaiでテストを書く必要があります。
Jest等のテストスイートも一応使えますが、ローカルノードを立てたり、コントラクトのABIを読み込む必要があったりと手間がかかるのでお勧めしません。

外部サービス

ノードプロバイダー

ノードプロバイダーはブロックチェーンへのアクセスをAPI形式で提供してくれるサービスです。
ブロックチェーンへのアクセスはユーザーウォレットを介しても可能ですが、より安定したアクセスを求める場合や、ウォレットに接続していない状態でもチェーンにアクセスしたい場合、大量のデータを取得する場合にはノードプロバイダーを使います。

Infura

https://infura.io/
1番使われているノードプロバイダー。他のサービスに比べて利用制限は厳しいが、レスポンスは安定している印象。

Alchemy

https://www.alchemy.com/
Infuraに比べて制限も緩く、提供しているネットワークの数も多いが、たまにレスポンスが帰ってくるのに時間がかかる。(無料プランだからかも)

データストレージ(IPFS)

Infura

https://infura.io/
先ほども紹介したInfuraのIPFSストレージ。ファイルサイズや転送量の制限ができる。サブドメインを指定して専用のIPFSゲートウェイが作れる。

Pinata

https://www.pinata.cloud/

NFT.Storage

https://nft.storage/

その他ツール等

TypeChain

https://github.com/dethcrypto/TypeChain
スマートコントラクト(ABI)から型定義を生成するツール。Hardhatプラグインとして導入することで、コンパイル時に自動で型定義を生成してくれる。

Remix

https://remix.ethereum.org/
スマートコントラクト開発のためのIDE。スマートコントラクトの動作確認やデバッグ用のツールとして使いやすいので、コーディングは好みのエディタを使い、動作確認にはRemixを使うと開発効率が良かった。Webアプリの他にデスクトップアプリやVSCodeの拡張機能もある。

TheCreator

Discussion