SolidityとEthereumによる実践スマートコントラクト開発 ―Truffle Suiteを用いた開発の基礎からデプロイまで

10章さらに大規模なDApp

　大規模なアプリケーションのコントラクトが完成したところで、クライアント側を作成し、ユーザーがWebブラウザを使ってコントラクトとやり取りできるようにしてみよう。アプリケーションのフロントエンドを作成すれば、ユーザーがFundraiserインスタンスを作成して自分のホームページに表示できるようになる。また、個々のFundraiserインスタンスの詳細を確認し、寄付を行うことも可能になる。本章では、ここまで作成してきたFundraiserコントラクトを使う。

　さっそくアプリケーションの開発に取りかかろう。

10.1　React Truffle Boxから始める

　ここでもReact Truffle Boxを使ってWeb3アプリケーションのフロントエンドコードを生成し、すばやく立ち上げてWeb3とやり取りさせることにする。まず、Fundraiserアプリケーションのための新しいディレクトリを作成し、そこで新しいTruffle React Boxアプリケーションを作成する。

　最初に、Fundraiserアプリケーション用の空のリポジトリを新たに作成する必要がある。続いて、そのディレクトリに移動してReact Truffle Boxを展開する。

$ mkdir fundraiser-dapp
$ cd fundraiser-dapp
$ truffle unbox react

　8章と同様に、FundraiserスマートコントラクトおよびWeb3とやり取りするように設定されたReactアプリケーションの土台がすばやく作成される。React Truffle Boxの展開が完了したら、コントラクトとマイグレーションをすべてインポートしてみよう。

　SimpleStorageコントラクトのマイグレーションを含んでいる ...