Webページからスマートコントラクトを読み書きする方法

2022/08/17に公開

この記事について

この記事ではethers.jsを使ってWebページからGoerli上のスマートコントラクトを読み書きする方法について紹介します。この記事の関連リソースを下記に示します。

対象とするコントラクト

この記事では下記のシンプルなコントラクトを読み書き対象とします。

MyHelloWorld.sol
// SPDX-License-Identifier: MIT
pragma solidity ^0.8.0;

contract MyHelloWorld {
  string public message;

  constructor() {
    message = "Hello World!";
  }

  function setMessage(string memory _message) public {
    message = _message;
  }
}

https://goerli.etherscan.io/address/0x037f3Aed2C172baAe64792A56e9a5f84a16005fb

スマートコントラクトをデプロイする方法については下記の関連記事をご参照ください。なお、下記の記事ではGoerliではなくMumbaiを対象にしていますが手順は同様です。

コーディングの準備

ターミナルで下記のコマンドを実行してコーディングの準備をします。

npx create-next-app --typescript my-hello-world-ui
npm install --save ethers
mkdir components lib
touch components/connect.tsx
touch components/install.tsx
touch components/read.tsx
touch components/write.tsx
touch lib/abi.tsx
touch lib/create-contract.tsx

コーディング

エディタで下記のファイルを開いて内容を入力します。

pages/index.tsx

components/install.tsx

components/connect.tsx

components/read.tsx

components/write.tsx

lib/create-contract.ts

lib/abi.json

動作確認

ターミナルで下記のコマンドを実行してサーバーを起動します。

npm run dev

ブラウザで http://localhost:3000/ にアクセスします。

Connectボタンをクリックします。

Readボタンをクリックしてメッセージが表示されることを確認します。

新しいメッセージを入力してからWriteボタンをクリックしてトランザクションが表示されることを確認します。

トランザクションが取り込まれた後、再度Readボタンをクリックして新しいメッセージが表示されることを確認します。

参考画像

おわりに

この記事はAlchemyドキュメントのNFT Minter Tutorial: How to Create a Full Stack DAppのチュートリアルをベースにしています。下記2点を検証したかったのでチュートリアルの内容を参考にして改変しました。

  • MetaMaskを使うならAlchemyを使わなくても読み書きができること
  • web3.jsではなくethers.jsを使っても読み書きができること

結果的に上記2点を検証することができました。素晴らしい情報を提供してくれるAlchemyのドキュメントには感謝しかありません。

GitHubで編集を提案

Discussion