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のテンプレートが簡単に構築できたので今後はこのテンプレートをいじって何か作ってみたいと思います。
おすすめ書籍
Ethereumを使ったDApps開発を学びたいなら今だとこの1冊が1番良いです!開発環境の構築から使うべきツール、フレームワーク、実装方法・注意点まで網羅的に解説されている書籍なのでおすすめです。出版も2018年1月ということでかなり新しい本で、DMM Bitcoinを作っているネクストカレンシー所属の方が書いているので信頼できます。
ビットコインとブロックチェーンの詳細をしっかりと学びたい方にはこちらの書籍が非常におすすめです。ウォレットの仕組み、楕円曲線暗号、P2Pプロトコル、公開鍵暗号などビットコインを支える技術について詳細に解説されています。また、サンプルコードを通して実際に手を動かして学べるので非常に濃い内容となっています。
髙妻智一
最新記事 by 髙妻智一 (全て見る)
- Polkadot(Substrate)のアドレスとトランザクションについて - 2023-03-09
- 【無料公開】「Goで始めるBitcoin」3章 Bitcoinノードとの通信 技術書典8 - 2020-03-08
- エンジニアがゼロから技術ブログを書くための方法をまとめました - 2019-05-25
コメントを残す