📦

Truffle + React Boxで簡単なスマートコントラクトを体験してみる

2022/11/16に公開

React

ブロックチェーンに 1 のような整数を書き込むだけのサンプルを見つけたので、動作手順をメモしておきます。とりあえずスマートコントラクトを体験してみたい！という人におすすめです。

記事執筆時の環境

Node.js v12.9.0
Truffle v5.5.19
MetaMask v10.17.0

Truffle

まずは Truffle をインストール。

$ npm install truffle

zshだと、インストール後に truffle を実行しても "zsh: command not found: truffle" になってしまう問題が発生することがある。その場合はこのあたりを検索するといろいろと対処法が出てくる。

Truffleには、Dappを作るのに便利なボイラープレートがたくさん用意されている。

Truffle Boxes - Truffle Suite

今回はその中の「React Box」を使うことにする。（Reactの知識があることが望ましい）

適当なディレクトリを作り、React Boxをunboxする。

$ truffle unbox react

すると、次のようなディレクトリ構造が作られる。

truffle/contracts/SimpleStorage.sol が今回重要となるソースコードである。.sol という拡張子の通り、Solidityという言語で書かれている。

// SPDX-License-Identifier: MIT
pragma solidity >=0.4.22 <0.9.0;

contract SimpleStorage {
  uint256 value;

  function read() public view returns (uint256) {
    return value;
  }

  function write(uint256 newValue) public {
    value = newValue;
  }
}

Solidityに関する詳しい解説は省略するが、このSolidityでやっているのは下記の通りである。

SimpleStorage というコントラクトを定義
value という uint256 型の状態変数を用意
read() で value` の値を読み込む
write() で value 型の値をブロックチェーンに書き込む

状態変数とは、コントラクトの永続ストレージにデータを格納するためのものである。つまり、この例では write() を実行するたびにデータを格納するトランザクションが発生し、同時にガス代も発生する。変数を書き換えるためにお金を払う必要があるというブロックチェーンの仕組みは最初驚くことであろう。

public や view 等のワードも重要な意味を持つので、ぜひ調べてみて欲しい。

deploy

コントラクトをdeployするには truffle migrate --network (NetworkName) コマンドを使う。このコマンドを実行すると内部的にコンパイルも行われる。コンパイルだけしたい場合は truffle compile コマンドを使うと良い。

deployの際は、予めネットワークの設定が必要になる。詳しくは下記記事を参照して欲しい。

ここではテストネットであるGoerliにdeployすることにする。

$ truffle migrate --network goerli

deployが成功すると、コントラクトアドレスやガス代などがコンソールに出力される。このログから、スマートコントラクトをdeployするだけでもお金が必要ということがわかる。deployされたスマートコントラクトはetherscanのサイトから参照できる。

実行

deployまでできたので、次はWebブラウザからコントラクトを実行してみる。client ディレクトリに移動して次のコマンドを入力し、Webサーバを起動しよう。

$ npm run start

自動的にブラウザが立ち上がり、localhost:3000 が表示される。

ためしに「write()」ボタンに適当な整数を入力し、マウスでクリックするとMetaMaskが起動する。

ガス代を確認し「確認」をクリックするとトランザクションが開始し、しばらくするとトランザクションが完了した通知が送られてくる。

これで SimpleStorage の value 、すなわちブロックチェーンにデータを書き込むことができたわけである🎉 「read()」をクリックすると、value が書き換わっていることが確認できるはずだ。

フロントエンドからどのようにスマートコントラクトを実行したのか、については client/src 以下をじっくり読んで、ところどころ書き換えてみると理解が深まると思う。

ガス代

今回はテストネットを利用したのでガス代を気にする必要はなかった。しかし、メインネットにコントラクトをdeployする場合はそれなりのEtherが必要になる。じっくり開発環境でテストを実施してからdeployすることをおすすめする。

Truffle

deploy

実行

ガス代

Discussion