Hardhat + TypeScript (+ React) のセットアップ
株式会社 CauchyE エンジニアの @yutaro_elk です。
最近は Ethereum にふれているんですが、 TypeScript フレンドリーな環境構築方法を共有できればと思います。
TL;DR
- 補完ラバーにとっては TypeScript の型が自動で生成されると嬉しい
- 自動生成される型を合わせるには、依存するライブラリのバージョンに注意
Hardhat で Solidity + TypeScript 環境を構築する
hardhat の v2.6 以降、 TypeScript 環境の Scaffold が追加されています。楽ちんですね。
今日現在 Hardhat v2.6.7 では依存ライブラリとしてこのようなものがインストールされます。
(ESlint 関連が割としっかり入りますね)
"devDependencies": {
"@nomiclabs/hardhat-ethers": "^2.0.2",
"@nomiclabs/hardhat-etherscan": "^2.1.7",
"@nomiclabs/hardhat-waffle": "^2.0.1",
"@typechain/ethers-v5": "^7.2.0",
"@typechain/hardhat": "^2.3.1",
"@types/chai": "^4.2.22",
"@types/mocha": "^9.0.0",
"@types/node": "^16.11.6",
"@typescript-eslint/eslint-plugin": "^4.33.0",
"@typescript-eslint/parser": "^4.33.0",
"chai": "^4.3.4",
"dotenv": "^10.0.0",
"eslint": "^7.32.0",
"eslint-config-prettier": "^8.3.0",
"eslint-config-standard": "^16.0.3",
"eslint-plugin-import": "^2.25.2",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-prettier": "^3.4.1",
"eslint-plugin-promise": "^5.1.1",
"ethereum-waffle": "^3.4.0",
"ethers": "^5.5.1",
"hardhat": "^2.6.7",
"hardhat-gas-reporter": "^1.0.4",
"prettier": "^2.4.1",
"prettier-plugin-solidity": "^1.0.0-beta.13",
"solhint": "^3.3.6",
"solidity-coverage": "^0.7.17",
"ts-node": "^10.4.0",
"typechain": "^5.2.0",
"typescript": "^4.4.4"
}
TypeChain が入ってるためコントラクトの型を自動で生成してくれます。テストを書くときなど補完が効いて便利です。
Hardhat と Hardhat-React で Solidity + TypeScript + React 環境を構築する
hardhat-react は Solidity の sol ファイルを元に、コントラクトへのクライアントを hooks ベースで自動で生成してくれるようにしてくれる hardhat 用プラグインです。
上記の Scaffold に hardhat-react をそのまま追加できるといいんですが、残念ながらうまくいかず... hardhat-react のドキュメントに記載されている依存ライブラリが最近更新されているようなので、そこらへんが原因なんじゃないかと思うんですが今の所うまくいっていません。
そのため、hardhat-react が用意している ボイラープレートを使用して環境を構築します。
ボイラープレートでも型エラーが発生
ただドキュメントの通りにセットアップしてみましたが、そのまま開発サーバーを立ち上げても型エラーになってしまいました。
問題の箇所は hardhat-react で生成されるファイル内に Provider の型が微妙に違うようです。
ここの解決がなかなかできなかったのですが、気づいてしまえば簡単なことで、フロントエンドと hardhat 側でethers のバージョンが違ったのが原因でした。
/root
"ethers": "^5.0.21"
/frontend
"ethers": "^5.0.17"
バージョンをそろえてあげると無事開発サーバーが立ち上がり、環境の構築ができました。
まとめ
今回 React での環境構築で試した hardhat-react はライブラリの更新が追いついていないようで、依存ライブラリが少し古めです。
機能としてはとても便利そうなので、バージョンアップが待たれますね。
ただ依存ライブラリが多いと今回のようなハマりどころがあるので、React でのクライアントは TypeChain を利用して自作するのが良いかもなと思いました。
今回は環境構築でまででしたので、この上に簡単な Dapp を実装する記事を近々公開できればと思います。
CauchyE は一緒に働いてくれる人を待っています！
ブロックチェーンやデータサイエンスに興味のあるエンジニアを積極的に採用中です！
以下のページから応募お待ちしております。
Discussion