[Solidity 入門] React を使った初めてのDapp 作成
どうもWeb3 エンジニアを目指すものです。ローマは一日にして成らず、Web3 もある日突然全てが切り替わるはずはありません。既存のWeb2 技術と共存する時代がすぐ来る(もうきてるのかも)ので皆様それに備えましょう。 今回はReact を使用し、初めてのdapp、(ブロックチェーンに干渉するアプリ)を作成しました。Hello Web3 World! といったところでしょうか。 なおこの投稿、及び使用しているコードはこの動画を参考にしています。 Michael Couch様の動画
今回のゴール
こんなものを最終的に動かします。まずローカル環境にネットワークを建てて、スマートコントラクトをデプロイします。次にReact アプリからメタマスク経由でスマートコントラクトを呼び出し、値の変更などを行います。
使用するもの一覧
node - フロントエンドであるReact はnode で実行されます。
Ganache - Truffle、及びGanache でEthereum ローカル環境を構築します。
Remix - ブラウザで動作するSolidity 開発環境です。今回サンプルの1_Storage.sol を使用します。
Metamask - ブラウザで作動するネットワーク上のアドレスを操作可能にするツールです。コントラクトのデプロイなどに使用されます。
全体図
手順1. インストール全般
node、Metamask、Ganache をお使いの環境にインストールします。
それぞれインストールは難しくありませんが、環境依存な点もあるため割愛します。
手順2. Remix でスマートコントラクトのデプロイ
Remix はブラウザで動作するSolidity 開発環境です。
https://remix.ethereum.org/
contracts フォルダにあるサンプルファイル 1_Storage.sol を使用します。Remix のテストネットワークであるJavaScript VM にデプロイし、動作をテストしましょう。
store() - number に格納された値を取得する関数
retrieve() - number に新しく値を格納する関数
左のメニューからこれらを実行し、テストしてみましょう。
手順3. Metamask とGanache ネットワークの連携
Remix で作成したスマートコントラクトを、ローカルのGanache 環境にデプロイすることが可能です。そのためにMetamask を使用します。
- メタマスクを開き、設定 > Advanced からテストネットを表示できる設定になっているか確認します。
- ネットワークのドロップダウンからネットワークの追加をクリックし、Ganache 環境を新規ネットワークとして追加します。すでにlocalhost のネットワークが存在する場合は削除します。
Chain ID = 1337
Currency Symbol = ETH
New RPC URL = http://localhost:7545
- Ganache 上のアカウントをMetamask にインポートします。Ganache 上のアカウント横にある鍵アイコンからPrivate key をコピー可能です。
新規アカウントが表示されていれば準備完了です。
手順4. Ganache ネットワークにスマートコントラクトをデプロイ
- Remix の
DEPLOY & RUN TRANSACTIONS画面のENVIRONMENTから、Injected Web3を選択します。
Remix の開発環境のネットワークではなく、Metamask が保持しているネットワーク先、及びアドレスを使用可能です。 - Deploy をクリックし、スマートコントラクトをデプロイします。デプロイ時のガス代処置のため、Metamask がプロンプトを表示します。
Confirmをクリックし、デプロイを完了します。
- Remix からデプロイされたスマートコントラクトを実行可能かテストしましょう。
store()実行時はガス代がかかるのでMetamask がガス代処理のプロンプトを表示します。
==Remix の画面は開いたままにしてください。のちに使用します。==
手順5. React アプリの起動
以下のコードをダウンロードし、お使いのマシンで展開します。
https://github.com/pokokichi13/react-solidity
cmd やターミナルでディレクトリを開き、必要なモジュールをインストールします。インストールが終わったら、React を起動します。
npm install
npm start
React アプリがスマートコントラクトを実行するまでの流れを、ステップ毎にご紹介します。
Connect Walletをクリックし、このアプリがMetamask が保持するアドレスの取得を許可します。
- 次に
Connect Provider/Signerをクリックし、Metamask が接続しているネットワークと、トランザクション署名のためのキーを取得します。 - Remix の
Deployed Contractsから、スマートコントラクトのアドレスを取得、SOLIDITY COMPILERからABI を取得します。
- 取得した値を入力し、
Connect Contractをクリックします。 Get Valueをクリックし、retrieve()を実行します。- 数字を入力、
Update valueをクリックし、store()を実行します。チェーン上の値を更新するのでガス代がかかります。よってMetamask の画面が表示されます。
store() を再度実行して値を変更可能か、Remix に戻りretrieve()を実行して同じ結果を取得可能であるか、確認するのも良いかと思います。
まとめ
とりあえず動くものができましたね。次の投稿で、React アプリのコード内で行われている、メタマスク連携の流れ、及び詰まった点などを共有します。
