プログラミング

Ethereumで作るDapps!フレームワークtruffle box(トリュフ)の使い方

dapps

MyCryptoHeroesなど、最近はDappsが日本でも盛り上がりを見せていますね。面白いゲームに出会うとつい自分でも作りたくなってしまう方も多いのではないでしょうか?今回はEthereumのDapps開発に多用されるフレームワーク「truffle」を「react」から使えるようにしたtruffle boxというツールの使い方についてご紹介したいと思います。

truffle box

Truffle Boxes are helpful boilerplates that allow you to focus on what makes your dapp unique.
In addition to Truffle, React and Webpack, some Truffle Boxes contain lightweight scaffolding with react-router, authentication via your dapp’s smart contracts or uport, and minimal front-end views built with the Pure CSS framework.

トリュフボックスは、あなたがあなたのdappを他と違うものにするものに集中することを可能にする役に立つボイラープレートです。 Truffle、React、Webpackに加えて、いくつかのTruffle Boxには、act-routerによる軽量足場、あなたのdappのスマートコントラクトまたはuportによる認証、およびPure CSSフレームワークで構築された最小限のフロントエンドビューが含まれています。

簡単にいうとtruffle boxは、truffleというDapps開発のためのフレームワークをReactやReduxの開発環境を想定した物にカスタマイズした便利グッズです。今回はreduxのバージョンではなく、純粋なReactのアプリをtruffle boxを使って開発するための方法についてご紹介します。

Github

インストール

以下のコマンドを入力することでtestディレクトリ内にreactバージョンのtruffle boxを展開します。

mkdir test
cd test
npx truffle unbox react
yarn add truffle

この時のファイル構成は以下のようになっていると思います。

  • LICENSE          
  • client           
  • contracts        
  • migrations       
  • test             
  • truffle-config.js

clientディレクトリ以下はreactのアプリケーションが入っています。contractsディレクトリ以下はsolidityで書かれたスマートコントラクトのファイルが入っています。migrationsディレクトリ以下は書かれたコントラクトのmigrationファイルが入っています。testディレクトリ以下は文字通りテストコードが書かれています。スマートコントラクトを書いて行く際はcontractsディレクトリ内のファイルをいじることになると思いますが、基本的に編集する場所はclientディレクトリ以下のReactの部分です。

設定

続いてTruffleの初期設定からReactからtruffleで立ち上がっているローカルのブロックチェーンに接続するために方法についてご紹介します。

 truffle develop 

このコマンドを実行することによって、truffleのコンソールが開かれます。同時に10個のテストアカウントが作成されるので、アドレスと秘密鍵が表示されるのを確認してください。

truffle(develop)>  compile
truffle(develop)>  migrate

はじめにデフォルトで書かれているスマートコントラクトをコンパイルします。成功したらローカルにデプロイします。migrateコマンドを実行してください。ここまでできたらターミナルから行う操作はひとまず終わりです。あとで秘密鍵が必要になるので画面はそのままにしておいてください。

Metamask設定

chromeからReactアプリを立ち上げ、ブロックチェーンに接続するためにはMetamaskの拡張機能が必要になります。インストールが完了したら初期設定を行い、画面右上のキツネマークからこの画面までいってください。

するとアカウントのインポートという項目が現れます。ここを押すと秘密鍵を入力することができるので、先ほどtruffle developのコンソールで表示された秘密鍵の一番上のものをコピーして入力してみましょう。うまくいけば新しいアカウントが追加されるはずです。続いてネットワーク選択のところでカスタムRPCを押します。すると任意のポートを選べるので http://127.0.0.1:9545/を入力します。

うまくいけばエラーもなく動いた感があると思います。これでMetamask側の設定は完了です。最後にこのネットワークにReactからアクセスしてみましょう。

react設定

最後にclientディレクトリ以下のreactアプリの設定に移っていきたいと思います。まずは以下のコマンドを入力します。

cd client
yarn
yarn start

これでclientディレクトリ以下のReactアプリのサーバがhttp://localhost:3000/で自動的に起動します。先ほどのmetamask設定がうまくいっていれば、

このような確認画面が表示されます。ここはConnectを押して接続しましょう。デフォルトで書かれたスマートコントラクトが動作してトランザクションが発生するかもしれませんが、ローカルで掘っているETHが送信されるだけなので特に問題ありません。

ここまでの作業が全てうまくいけばこのような画面が表示されます。この画面は普通にreactから編集することができるので自分でカスタマイズしてみてください。

Metamaskに入力したアドレスがcoinbaseに設定されている場合は、ローカルでマイニングしたETHがどんどんたまっていきます。これを使ってスマートコントラクトの開発を行ってみるのもいいですね。

最後に

今回はEthereumのDapps開発フレームワークtruffleの使い方について説明しました。僕もdappsが大好きなので、これを読んだ方の中から面白いDappsを作ってくれる人が出てくれればいいなと思います。僕も作ってみます。

ABOUT ME
gitackt
お金をかけないサバイバル術の記事を書きます。温泉と餃子が好きです。プログラミングが得意です。趣味はメルカリです。