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




どうも高妻です。Twitterでプログラミングのことや暗号通貨のことをつぶやいているのでよかったらフォローしてください。  

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から起動できるもので、ローカルでブロックチェーンを簡単に構築することができます。

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

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

コンパイルとデプロイ

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

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

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

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

drizzle-boxの起動

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

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

まとめ

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

おすすめ書籍

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

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

The following two tabs change content below.

高妻智一

2013年CyberAgent新卒入社 スマホゲームを作る子会社に所属し、サーバーサイドのエンジニアを担当。2年目の終わりから新規子会社の立ち上げに参加し、サーバーサイドのエンジニアリーダーとしてサービースのリリースから運用までを担当。 現在はTwitterなどSNSのテキスト解析を行うソーシャルメディア分析のサーバーサイドを開発中。言語はNode.js、Kotlinを使用。






よく読まれている関連記事はこちら



コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です