Ethereum dAppの構成

Solidityの勉強にはCryptoZombiesが便利です。
しかし、CryptoZombiesでは独自のIDEを使用して開発をするため、実際のアプリケーションを作るまでにはもう１ステップが必要です。
そこで、実際のアプリケーション開発で使うツール群それぞれの役割がわかるように説明するスライドを作成しました。実際の開発手順に沿って説明しているので、なぜそのツールが必要なのかを理解しやすいかと思います。
このスライドの内容を理解できた方は、次はHardhatのTutorialなどに進むのがおすすめです！

Transcript

1. Ethereum dAppの構成
 目的：実環境でスマコン開発する際に登場する周辺ツールの役割を理解する 

2. 筆者紹介
 小宮山 凌平
 Co-Founder/CTO
 
 東京工業大学で制御システム工学を専攻、研究室では、画像処理・コンピュータビジョン (CV)の研究をする。卒業後は東京大学 暦本研究室に進学し、CV・ARを用いた人間拡張 の研究に取り組む。同時期、Sony CSLとシンガポール国立大学で研究インターンを経験 する。
 大学院修了後はRhizomatiksでCV・AR・機械学習を専門とするソフトウェアエンジニアとし て働き、音楽ライブやスポーツの試合で用いられるリアルタイムビジュアリゼーションシス テムの研究・開発、現場でのオペレーションをこなす。同時に、暦本研究室の客員研究員 として、人間のジャンプ力を拡張するバックパック型ドローンの研究に携わる。
 2018年5月、Kyuzanに創業メンバーとして参画。ブロックチェーンゲーム「EGGRYPTO」、 NFTプラットフォーム作成支援サービス「MINT」の開発を中心に、複数の実験的なプロ ジェクトを行なっている。
 twitter: @ryoheikomy

3. 今回理解すべきdApp構成の完成形

4. Blockchain (Ethereum) Devices Web Front-end http jsonrpc Device dApp Browser Browser Wallet Account Address Priv. Key ・ ・ ・ Website HTML CSS Javascript PC Ethereum Node Data Smart Contract Ethereum Library Address Data - network (infura url) - Address - ABI account info account info, gas Metamask : chromeのethereumウォレット拡張 Web3.js : Ethereum Javascript API (Javascriptのライブラリ ) Infura : Ethereumノードへのアクセスを提供するツール Solidity : Ethereumのスマートコントラクトを書くための言語 Truffle : Solidityで開発するための framework Ganache : ローカル開発用の Ethereum Node / Wallet ( )
5. 順を追って見ていく

6. dAppは簡単に考えると、
 Webサービスの「API + データベース」を
 「スマートコントラクト」に置き換えたもの
 
 実際の開発では、フロントエンドとスマートコントラクトの間にバックエンドを挟むことが多いが、 今回は簡略化して、バックエンド部分を省略して説明する。 

7. Web Back-end Devices Web Front-end Device Front-end Database APIs Blockchain (Ethereum) Devices Web Front-end Device Front-end SmartContract http http (GET, POST) http jsonrpc (read, write) App dApp
8. Web Back-end Devices Web Front-end Device Front-end Database APIs Blockchain (Ethereum) Devices Web Front-end Device Front-end SmartContract http http (GET, POST) http jsonrpc (read, write) App dApp
9. Web Back-end Devices Web Front-end Device Front-end Database APIs Blockchain (Ethereum) Devices Web Front-end Device Front-end SmartContract http http (GET, POST) http jsonrpc (read, write) App dApp
10. Web Back-end Devices Web Front-end Device Front-end Database APIs Blockchain (Ethereum) Devices Web Front-end Device Front-end SmartContract http http (GET, POST) http jsonrpc (read, write) App dApp web
11. Web Back-end Devices Web Front-end Device Front-end Database APIs Blockchain (Ethereum) Devices Web Front-end Device Front-end SmartContract http http (GET, POST) http jsonrpc (read, write) App dApp web Ethereum Network
12. 実際にdAppを開発するつもりで
 詳しく見ていく

13. Blockchain (Ethereum) Devices Web Front-end http jsonrpc SmartContract Device Front-end
14. Blockchain (Ethereum) Devices Web Front-end http jsonrpc SmartContract Device Front-end Smart Contractを書きたい

15. Blockchain (Ethereum) Devices Web Front-end http jsonrpc SmartContract Device Front-end Smart Contractを書きたい
 Solidity : Ethereumのスマートコントラクトを書くための言語 Truffle : Solidityで開発するためのframework
16. Blockchain (Ethereum) Devices Web Front-end http jsonrpc SmartContract Device Front-end 書いたSmart Contractをデプロイしたい

17. Blockchain (Ethereum) Devices Web Front-end http jsonrpc SmartContract Device Front-end 書いたSmart Contractをデプロイしたい
 Blockchain側ってどうなってる？

18. Blockchain (Ethereum) Devices Web Front-end http jsonrpc SmartContract Device Front-end 書いたSmart Contractをデプロイしたい
 Blockchain側ってどうなってる？

19. PC Ethereum Node Data Block Transaction ・ ・ ・ ・ ・ ・ others PC Ethereum Node Data Block Transaction ・ ・ ・ ・ ・ ・ others PC Ethereum Node Data Block Transaction ・ ・ ・ ・ ・ ・ others p2p Network 全てのnodeは同じデータを持っている。 分散台帳。 Ethereum Network
20. PC Ethereum Node Data Block Transaction ・ ・ ・ ・ ・ ・ others PC Ethereum Node Data Block Transaction ・ ・ ・ ・ ・ ・ others p2p Network 全てのnodeは同じデータを持っている。 分散台帳。 どこか1つに接続できればいい。 PC Ethereum Node Data Block Transaction ・ ・ ・ ・ ・ ・ others Ethereum Network
21. PC Ethereum Node Data Block Transaction ・ ・ ・ ・ ・ ・ others PC Ethereum Node Data Block Transaction ・ ・ ・ ・ ・ ・ others PC Ethereum Node Data Block Transaction ・ ・ ・ ・ ・ ・ others p2p Network 全てのnodeは同じデータを持っている。 分散台帳。 どこか1つに接続できればいい。 infuraが運用しているNode に接続させてもらう。 Ethereum Network Infura : Ethereumノードへのアクセスを提供するツール
22. Smart Contractをデプロイするときの
 イメージを見ていく

23. PC Ethereum Node Data Block Transaction ・ ・ ・ ・ ・ ・ others ・・・ Ethereum Network
24. PC Ethereum Node Data Block Transaction ・ ・ ・ ・ ・ ・ others ・・・ スマートコントラクトを生成する transactionによって、 スマートコントラクトは生成されている。 Ethereum Network
25. PC Ethereum Node Data Block Transaction ・ ・ ・ ・ ・ ・ others ・・・ スマートコントラクトを生成する transactionによって、 スマートコントラクトは生成されている。 Ethereum Network Solidity : Ethereumのスマートコントラクトを書くための言語 Truffle : Solidityで開発するためのframework
26. PC Ethereum Node Data others Smart Contract Address Data こういうイメージ Ethereum Network
27. PC Ethereum Node Data others Smart Contract Address Data Ethereum Network
28. PC Ethereum Node Data others Smart Contract Address Data Addressによって、 スマートコントラクトの所在を 特定できる。 Ethereum Network
29. PC Ethereum Node Data others Smart Contract Address Data Addressによって、 スマートコントラクトの所在を 特定できる。 どんな関数・変数を持っている？ Ethereum Network
30. PC Ethereum Node Data others Smart Contract Address Data Addressによって、 スマートコントラクトの所在を 特定できる。 どんな関数・変数を持っている？ → ABI (Application Binary Interface) 　 に記述されている。 ABIはjson形式。 Ethereum Network
31. Blockchain (Ethereum) Devices Web Front-end http jsonrpc SmartContract Device Front-end
32. Blockchain (Ethereum) Devices Web Front-end http jsonrpc Device Front-end PC Ethereum Node Data Smart Contract Address Data
33. Blockchain (Ethereum) Devices Web Front-end http jsonrpc Device Front-end PC Ethereum Node Data Smart Contract Address Data デプロイしたSmart Contractの情報とは？

34. Blockchain (Ethereum) Devices Web Front-end http jsonrpc Device Front-end PC Ethereum Node Data Smart Contract Address Data - Address - ABI - network (infura url) デプロイしたSmart Contractの情報とは？

35. Blockchain (Ethereum) Devices Web Front-end http jsonrpc Device Front-end PC Ethereum Node Data Smart Contract Address Data - Address - ABI - network (infura url) デプロイしたSmart Contractの情報とは？
 networkとは？

36. PC Ethereum Node Data Block Transaction ・ ・ ・ ・ ・ ・ others PC Ethereum Node Data Block Transaction ・ ・ ・ ・ ・ ・ others PC Ethereum Node Data Block Transaction ・ ・ ・ ・ ・ ・ others p2p Network 全てのnodeは同じデータを持っている。 分散台帳。 Ethereum Network
37. PC Ethereum Node Data Block Transaction ・ ・ ・ ・ ・ ・ others PC Ethereum Node Data Block Transaction ・ ・ ・ ・ ・ ・ others PC Ethereum Node Data Block Transaction ・ ・ ・ ・ ・ ・ others p2p Network 全てのnodeは同じデータを持っている。 分散台帳。 Main Main Main Main Ethereum Network 本番ネットワーク。
38. PC Ethereum Node Data Block Transaction ・ ・ ・ ・ ・ ・ others PC Ethereum Node Data Block Transaction ・ ・ ・ ・ ・ ・ others PC Ethereum Node Data Block Transaction ・ ・ ・ ・ ・ ・ others p2p Network 全てのnodeは同じデータを持っている。 分散台帳。 Rinkey Rinkey Rikeby Rinkeby TestNet テスト用のネットワーク。 Mainのネットワークとほとんど同じ構成。 Rinkeby用のETHは無料で手に入る。 Ethereum Network
39. PC Ethereum Node Data Block Transaction ・ ・ ・ ・ ・ ・ others PC Ethereum Node Data Block Transaction ・ ・ ・ ・ ・ ・ others PC Ethereum Node Data Block Transaction ・ ・ ・ ・ ・ ・ others p2p Network 全てのnodeは同じデータを持っている。 分散台帳。 Ropsten Ropsten Ropsten Ropsten TestNet Ethereum Network これもテスト用のネットワーク。
40. PC Ethereum Node Data Block Transaction ・ ・ ・ ・ ・ ・ others Ganache Ganache テスト用のネットワーク。 ローカルで動いているので、 複数台でコンセンサスをとっていない。高速。 GanacheはWalletとも一体となっており、 開発用ツールとして提供されている。 Ethereum Network Ganache : ローカル開発用のEthereum Node / Wallet
41. PC Ethereum Node Data Block Transaction ・ ・ ・ ・ ・ ・ others Ganache Ganache テスト用のネットワーク。 ローカルで動いているので、 複数台でコンセンサスをとっていない。高速。 GanacheはWalletとも一体となっており、 開発用ツールとして提供されている。 Ethereum Network Ganache : ローカル開発用のEthereum Node / Wallet networkは、本番ネットワークなのか、
 テストネットワークなのか、という情報のこと

42. Blockchain (Ethereum) Devices Web Front-end http jsonrpc Device Front-end PC Ethereum Node Data Smart Contract Address Data - Address - ABI - network (infura url)
43. Blockchain (Ethereum) Devices Web Front-end http jsonrpc Device Front-end PC Ethereum Node Data Smart Contract Address Data - Address - ABI - network (infura url) Smart Contractを開発・デプロイしたら、
 そのスマコン情報をFront-endに渡して、
 Front-endの開発を開始する！

44. Blockchain (Ethereum) Devices Web Front-end http jsonrpc Device Front-end PC Ethereum Node Data Smart Contract Address Data - Address - ABI - network (infura url)
45. Blockchain (Ethereum) Devices Web Front-end http jsonrpc Device Front-end PC Ethereum Node Data Smart Contract Address Data - Address - ABI - network (infura url) Front-endは、受け取った情報からどうやって Smart Contractにアクセスする？

46. Blockchain (Ethereum) Devices Web Front-end http jsonrpc Device Front-end PC Ethereum Node Data Smart Contract Address Data - Address - ABI - network (infura url) Front-endエンジニアは、受け取った情報からどう やってSmart Contractにアクセスする？

47. Blockchain (Ethereum) Devices Web Front-end http jsonrpc Device Website HTML CSS Javascript Ethereum Library PC Ethereum Node Data Smart Contract Address Data - Address - ABI - network (infura url)
48. Blockchain (Ethereum) Devices Web Front-end http jsonrpc Device Website HTML CSS Javascript Ethereum Library Ethereumネットワークと簡単にやりとりするためのライブラリを使 う。jsonrpcの通信をラップしてくれていて便利。
 Web3.js : Ethereum Javascript API (Javascriptのライブラリ) PC Ethereum Node Data Smart Contract Address Data - Address - ABI - network (infura url)
49. Blockchain (Ethereum) Devices Web Front-end http jsonrpc Device Website HTML CSS Javascript Ethereum Library PC Ethereum Node Data Smart Contract Address Data - Address - ABI - network (infura url)
50. Blockchain (Ethereum) Devices Web Front-end http jsonrpc Device Website HTML CSS Javascript Ethereum Library ユーザーの情報や、それに紐づいた
 データなどはどうやって使う？
 PC Ethereum Node Data Smart Contract Address Data - Address - ABI - network (infura url)
51. Blockchain (Ethereum) Devices Web Front-end http jsonrpc Device Website HTML CSS Javascript Ethereum Library PC Ethereum Node Data Smart Contract Address Data - Address - ABI - network (infura url) ユーザーの情報や、それに紐づいた
 データなどはどうやって使う？

52. Blockchain (Ethereum) Devices Web Front-end http jsonrpc Website HTML CSS Javascript Ethereum Library Device dApp Browser Browser Wallet Account Address Priv. Key ・ ・ ・ PC Ethereum Node Data Smart Contract Address Data - Address - ABI - network (infura url)
53. Blockchain (Ethereum) Devices Web Front-end http jsonrpc Website HTML CSS Javascript Ethereum Library Device dApp Browser Browser Wallet Account Address Priv. Key ・ ・ ・ account info account info, gas Metamask : chromeのethereumウォレット拡張 ユーザーがフロントにアクセスする際に、
 Wallet機能が備わったdApps Browserを使ってもらう。
 PC Ethereum Node Data Smart Contract Address Data - Address - ABI - network (infura url)
54. Blockchain (Ethereum) Devices Web Front-end http jsonrpc Data Website HTML CSS Javascript Ethereum Library Device dApp Browser Browser Wallet Account Address Priv. Key ・ ・ ・ account info account info, gas PC Ethereum Node Data Smart Contract Address Data - Address - ABI - network (infura url) これでFront-endもOK！
 受け取ったスマートコントラクトの情報と、
 ユーザーの情報を使ってフロントエンドを構築できる！

55. 再掲載：dApp構成の完成形

56. Blockchain (Ethereum) Devices Web Front-end http jsonrpc Device dApp Browser Browser Wallet Account Address Priv. Key ・ ・ ・ Website HTML CSS Javascript Ethereum Library account info account info, gas Metamask : chromeのethereumウォレット拡張 Web3.js : Ethereum Javascript API (Javascriptのライブラリ ) Infura : Ethereumノードへのアクセスを提供するツール Solidity : Ethereumのスマートコントラクトを書くための言語 Truffle : Solidityで開発するための framework Ganache : ローカル開発用の Ethereum Node / Wallet ( ) PC Ethereum Node Data Smart Contract Address Data - Address - ABI - network (infura url)
57. 最後に、紹介した以下のツールの類似ツールや、
 +αのツールをいくつか紹介します
 Metamask : chromeのethereumウォレット拡張 Web3.js : Ethereum Javascript API (Javascriptのライブラリ ) Infura : Ethereumノードへのアクセスを提供するツール Solidity : Ethereumのスマートコントラクトを書くための言語 Truffle : Solidityで開発するための framework Ganache : ローカル開発用の Ethereum Node / Wallet (
58. Metamask : chromeのethereumウォレット拡張 Web3.js : Ethereum Javascript API (Javascriptのライブラリ ) Infura : Ethereumノードへのアクセスを提供するツール Solidity : Ethereumのスマートコントラクトを書くための言語 Truffle : Solidityで開発するための framework Ganache : ローカル開発用の Ethereum Node / Wallet Fortmatic : メールアドレスとパスワードでウォレットを使用で きる。PCでもSPでもOK。ブラウザも何でもいい。 Torus Wallet : Fortmaticと同じような使い勝手。 Go! Wallet : スマホのアプリ。いわゆる dAppsブラウザで、 ウォレットとブラウザが一体化している。 Ethers.js : Web3.jsより後発だが、バグが少なく使い勝手が 良い印象。Web3.jsはv0.x系からv1.x系への以降で破壊的な 変更があったり、 v1.x系でもバグがなくなり切らず、破壊的変 更を含むv2.x系の開発を始めたりしたので、みんなとても困っ た。 archemy : Quick Node : Ankr : NOWNodes : 色々あるので、「使いたいブロックチェーンに 対応しているか」「予想される呼び出し数に 対して価格はいくらか」「安定性は大丈夫か」 「サポートはしっかりしているか」など、通常 のSaaSを選定するときと同じような観点で 選ぶ。 Vyper : Pythonライクな言語。 SolidityはJavaScriptライク。 Solidityの方が圧倒的に使われているので、 Solidityを選んで おくのが無難。 Hardhat : Truffleより後発で、デバッグの機能が豊富。また、 Truffleが内部的に Web3.jsを使用しているのに対して、 Hardhatは内部的に Ethers.jsを使用している。使い勝手が良 い印象なので、 HardhatとEthers.jsに統一するのが良さそう。 Hardhat Network : Hardhatで高機能なデバッグを利用するた めに使用する。 CUI。 その他 OpenZeppelin Contracts : 監査済みのスマコン群。 ERC20や ERC721など有名な規格はだいたいここにあるので、基本的には これを継承する形で書き始める。 OpenZeppelin Upgrades Plugins : 普遍的なスマコンに対して、 アップグレード可能な仕組みを付与するためのツール。 Hardhat での開発過程に libraryとして組み込んで使う。これを使う場合は、 OpenZeppelinのコントラクトもこれに対応したものを使う必要が ある。
59. KYUZAN.com