DAppsをReact/Reduxで構築できるDrizzle-Boxを動かしてみる

Drizzleとは

DrizzleとはEthereumのスマートコントラクトをReact/Reduxで扱うフロントエンドのフレームワークのことです。Drizzleは以下の構成になっています。

• drizzel → コントラクトをRedux Storeで扱うライブラリ
• drizzle-react → DrizzleのRedux StoreをReactでいじるライブラリ
• drizzel-react-componet → React Componentライブラリ

React/Reduxは自分も初心者過ぎてまだよく分かっていないのでとりあえずサンプルコードを動かすことで理解していきたいと思います。

サンプルコードはDrizzle-BoxというGitHubにまとまっていて、他にもVue.js、webpack、react-nativeのサンプルコードがあるので色々試してみてください。

セットアップ

環境

• Node.js v8.10.0
• yarn v1.5.1
• Truffle v4.1.5
• Ganache CLI v6.1.0 (ganache-core: 2.1.0)
• Mac OS Sierra 10.12.6

インストール

truffleとganache-cleのインストールtruffleはSolidityのコンパイルとデプロイを実行するのに使用します。ganache-cliはGanacheをCLIから起動できるもので、ローカルでブロックチェーンを簡単に構築することができます。

$ npm install -g truffle
$ npm install -g ganache-cli

drizzle-boxをインストールします。unboxコマンドで取得することができます。

$ mkdir drizzle && cd drizzle
$ truffle unbox drizzle

Node.jsのバージョンが違うせいなのかnode_modulesを入れ直さないと起動できなかったので削除します。

$ rm -fr node_modules
$ yarn

コンパイルとデプロイ

コンパイルはこれだけです。

$ truffle compile

デプロイする前にganache-cliでブロックチェーンをローカル環境に構築します。別ターミナルを起動して下記を実行するとアドレスを10個生成して、100ETHずつ付与してくれます。mnemonicもあるのでこれをMetaMaskに読み込ませることで生成されたアドレスを使うことができます。

// 3 second blocktime.
$ ganache-cli -b 3
Ganache CLI v6.1.0 (ganache-core: 2.1.0)

Available Accounts
==================
(0) 0x3aa12474b1fb2adcd1cba85cfb0609f4a630a135
(1) 0xf278d76ce8bf9bfd243b95779ff2e0ea69610577
(2) 0xcebe12f044f57f11462d2945862e4b21c8ef360e
(3) 0xfff583fe1c84e7cecfdfecd601d2b3cc15d6764d
(4) 0x5889c4f00164ff22cc088dd6110bb8e4b56fb5cc
(5) 0x4fa89afea69a3f9f409d4d71efc56f00e9e22f11
(6) 0xccfa96b7859f9bea13c1032afe986ee6c0971c46
(7) 0x57ea43ca2f66c84a35fb1cda8096d35eaf906662
(8) 0x00ac25c0fc9f3578c062152bdd068c0110b7b320
(9) 0xe80c8c27b7c90de9cd1bd9b979dbe2c4acae4f2d

Private Keys
==================
(0) 92e9e41a76e21c84462fc6319f3c2cfbfc6605a0e94ac1ecfd8d3a9f279b02ba
(1) b190c5e63d6cc6d48a10123f77b4dd4dbd2977d65f89e6ed6c234445b88d661e
(2) 2c715dbc57ede69f309d1c0ae209f46c0baa3bcccb6ebffad69035711392f72e
(3) 2d40fd45da61020b7a3120e96b4183b47b95211096e7eb8e13041d23ccae0fce
(4) 17f76394ae4cac18d70bd88bcea38a706dd5c059091bbcee9b8beea0a722bb39
(5) 813b7a98d322f202ecc10d947d1642262863ed43d79ec70cf8a397a8b0c6f3ab
(6) efeaf9b3e89d8379b535fda29b017cf153b298711482939cad4dc05ff84a9e8d
(7) df8f6f3d1e9b3cf1d867f66751294a316db16e4a5030f8d73ed6cb9779a97445
(8) 62955ac94c0ad88e369bd4eca4621d5530f34fae5bfc3369f354f7362218fef1
(9) 87a3f53ec33de28e0157dea782b4f1f98c4c1721834c574925f14f160be7f097

HD Wallet
==================
Mnemonic:      mixture ivory promote meadow volcano nation cement ceiling glad way style flock
Base HD Path:  m/44'/60'/0'/0/{account_index}

Listening on localhost:8545

デプロイの実行は下記です。このように表示されれば成功です。

$ truffle migrate
Using network 'development'.

Running migration: 1_initial_migration.js
  Deploying Migrations...
  ... 0x090c09ef97c8555b79ca13b277241990177ae00c5b2f4ad248be2a47338f8fd0
  Migrations: 0x60538f8569d5c71e3b94a323cd8c0f6e966df42f
Saving successful migration to network...
  ... 0xf2774c3241faaf062d5f307f05c33adf49c0ced338714df7c803eee35ff4e6bc
Saving artifacts...
Running migration: 2_deploy_contracts.js
  Deploying SimpleStorage...
  ... 0x5ff97a5dde70c5da54fbcaea7323f62e2cc469dc367b96da21758f7a4e104047
  SimpleStorage: 0x6c26231a2df5b97c885eede12e5d424cd5034b31
  Deploying TutorialToken...
  ... 0x3bc1dbda48f337d8df21761b3f045231073a57ce5829ce8ab7a33099924b440a
  TutorialToken: 0xfb23d05ac8de6bffa27787589ad10ef44120ce1e
  Deploying ComplexStorage...
  ... 0xc7d0f5ba40919885f88936aa007cd958e7e18ca61f496d51d004aac956020f8c
  ComplexStorage: 0xaa99acead7c6b0db7f2ab5e7e8585f7bac606739
Saving successful migration to network...
  ... 0x4db065b967b734590939ad945bbb180c8226b9fc0c65ac1c89ac22b9f9ed6342
Saving artifacts...

gacha-cliを実行している方ではこのようなログが6個出ていれば大丈夫です。

eth_sendTransaction

  Transaction: 0x090c09ef97c8555b79ca13b277241990177ae00c5b2f4ad248be2a47338f8fd0
  Contract created: 0x60538f8569d5c71e3b94a323cd8c0f6e966df42f
  Gas usage: 221935
  Block Number: 1
  Block Time: Thu Apr 12 2018 08:54:50 GMT+0900 (JST)

drizzle-boxの起動

やっとdrizzle-boxの起動です。

$ yarn start

起動すると自動的にブラウザまで移動し、画面が表示されます。その時、MetaMaskの接続先をCustom RPCでhttp://localhost:8545にしておいてください。

まとめ

drizzle-boxを使ったReact/Reduxのテンプレートが簡単に構築できたので今後はこのテンプレートをいじって何か作ってみたいと思います。

おすすめ書籍

ブロックチェーンアプリケーション開発の教科書

posted with ヨメレバ

加嵜 長門/篠原 航 マイナビ出版 2018年02月01日

Amazon

Kindle

楽天ブックス

Ethereumを使ったDApps開発を学びたいなら今だとこの１冊が１番良いです！開発環境の構築から使うべきツール、フレームワーク、実装方法・注意点まで網羅的に解説されている書籍なのでおすすめです。出版も2018年1月ということでかなり新しい本で、DMM Bitcoinを作っているネクストカレンシー所属の方が書いているので信頼できます。

ビットコインとブロックチェーン

posted with ヨメレバ

アンドレアス・M．アントノプロス/今井崇也 NTT出版 2016年07月14日

Amazon

Kindle

楽天ブックス

ビットコインとブロックチェーンの詳細をしっかりと学びたい方にはこちらの書籍が非常におすすめです。ウォレットの仕組み、楕円曲線暗号、P2Pプロトコル、公開鍵暗号などビットコインを支える技術について詳細に解説されています。また、サンプルコードを通して実際に手を動かして学べるので非常に濃い内容となっています。

The following two tabs change content below.

• この記事を書いた人
• 最新の記事

髙妻智一

2013年CyberAgent新卒入社 スマホゲームを作る子会社に所属し、サーバーサイドのエンジニアを担当。２年目の終わりから新規子会社の立ち上げに参加し、サーバーサイドのエンジニアリーダーとしてサービースのリリースから運用までを担当。 2018年仮想通貨のスマホウォレットを提供するGinco Incにブロックチェーンエンジニアとして入社。

最新記事 by 髙妻智一 (全て見る)

• Polkadot(Substrate)のアドレスとトランザクションについて - 2023-03-09
• 【無料公開】「Goで始めるBitcoin」3章 Bitcoinノードとの通信　技術書典8 - 2020-03-08
• エンジニアがゼロから技術ブログを書くための方法をまとめました - 2019-05-25