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

2022/11/16に公開
ブロックチェーンに 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の際は、予めネットワークの設定が必要になる。詳しくは下記記事を参照して欲しい。
https://zenn.dev/koogawa/articles/20a567f61e3fa3
ここではテストネットであるGoerliにdeployすることにする。
$ truffle migrate --network goerli
deployが成功すると、コントラクトアドレスやガス代などがコンソールに出力される。このログから、スマートコントラクトをdeployするだけでもお金が必要ということがわかる。deployされたスマートコントラクトはetherscanのサイトから参照できる。
https://rinkeby.etherscan.io/address/0x74c7382e11311530757bedb953d7f302cfaef417

 実行deployまでできたので、次はWebブラウザからコントラクトを実行してみる。client ディレクトリに移動して次のコマンドを入力し、Webサーバを起動しよう。
$ npm run start
自動的にブラウザが立ち上がり、localhost:3000 が表示される。
ためしに「write()」ボタンに適当な整数を入力し、マウスでクリックするとMetaMaskが起動する。
ガス代を確認し「確認」をクリックするとトランザクションが開始し、しばらくするとトランザクションが完了した通知が送られてくる。
これで SimpleStorage の value 、すなわちブロックチェーンにデータを書き込むことができたわけである🎉 「read()」をクリックすると、value が書き換わっていることが確認できるはずだ。
フロントエンドからどのようにスマートコントラクトを実行したのか、については client/src 以下をじっくり読んで、ところどころ書き換えてみると理解が深まると思う。

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

deploy

実行

ガス代

Discussion
