create-eth-appでDappのフロントエンド開発をはじめましょう

create-eth-appopens in a new tabについては、前回の記事（Solidity の全体像opens in a new tab）で紹介しました。 今回は、create-eth-app をどのように使うか、どのような機能が統合されているか、およびさらに拡張する方法について学びます。 create-eth-app は、 Sablier opens in a new tabの創業者である Paul Razvan Berg が立ち上げたプロジェクトで、フロントエンド開発をすばやく開始できるだけでなく、さまざまなオプションの統合機能も活用できます。

インストール

インストールには、Yarn 0.25 以上が必要です（npm install yarn --global）。 とても簡単です！

yarn create eth-app my-eth-app
cd my-eth-app
yarn react-app:start

このアプリでは、 create-react-appopens in a new tabを利用しています。 アプリを表示するには、ブラウザで http://localhost:3000/ を開きます。 本番環境にデプロイする準備ができたら、yarn build を実行してソースコードをまとめたファイルを作成します。 このアプリを手軽にホスティングするには、 Netlifyopens in a new tabを利用すると良いでしょう。 GitHub リポジトリを作成して Netlify に登録し、ビルドコマンドをセットアップすれば完了です！ あなたのアプリはインターネットに公開され、誰でも利用できるようになります。 これらはすべて無料です。

機能

React と create-react-app

まずは、このアプリの核心である React と、create-react-appで提供される追加の機能すべてについて説明します。 イーサリアムとの統合を希望しない場合は、このアプリだけを使うのも良い方法です。 Reactopens in a new tabを使えば、インタラクティブな UI を簡単に作成できます。 React は、Vueopens in a new tabほど初心者向けではありませんが、広く使われており、より多くの機能が提供されているだけでなく、何千ものライブラリを利用して機能を追加できます。 create-react-appも UI 開発を手軽に開始するのに役立つアプリで、以下の機能が含まれています。

• React、JSX、ES6、TypeScript、および Flow の構文に対応
• スプレッド構文などの ES6 に含まれない言語拡張
• オートプレフィックス CSS により、-webkit- などの接頭辞が不必要
• カバレッジレポート機能を搭載した、高速でインタラクティブな単体テストランナー
• よくある間違いをリアルタイムで警告する開発環境用サーバ
• 本番環境用に、JS、CSS、および画像ファイルをハッシュやソースマップとバンドルできるビルドスクリプト

特にcreate-eth-app は、新しい副作用フックopens in a new tabを利用しています。 これは、強力かつとてもコンパクトな、いわゆる関数コンポーネントを書くための方法です。 副作用フックをcreate-eth-appで活用する方法については、以下の Apollo に関するセクションを参照してください。

Yarn Workspaces

Yarn Workspacesopens in a new tabでは、複数のパッケージをひとつのルートフォルダで管理することができ、yarn installを使って依存関係を一度にインストールすることができます。 このアプローチは、スマートコントラクトのアドレスや ABI 管理（スマートコントラクトをどこにデプロイしたか、スマートコントラクトとどのようなやり取りを行うか）などの小さなパッケージを追加したり、The Graph との統合において特に有益であり、どちらの機能もcreate-eth-appに含まれています。

ethers.js

大部分のユーザーは現在でもWeb3.jsopens in a new tabを使用していますが、昨年はethers.jsopens in a new tabを Web3.js の代替として利用するユーザーが増加したため、create-eth-appには ethers.js が統合されています。 このライブラリで作業してもよいですし、Web3 に切り替えてもよいです。あるいは、もうすくベータが外れるethers.js v5opens in a new tabにアップグレードするのもよいでしょう。

The Graph

GraphQLopens in a new tabは、RESTful APIopens in a new tabとは違う方法でデータを扱います。 特に分散型ブロックチェーンのデータを扱う場合、RESTful API よりもいくつかの利点があります。 その理由に興味がある方は、GraphQL Will Power the Decentralized Webopens in a new tabをご覧ください。

通常、スマートコントラクトからは直接データを取得することができます。 最後に行った取引の時間を取得したい場合は、 MyContract.methods.latestTradeTime().call()を呼び出すだけで、infura のようなイーサリアムノードからデータを取得し、あなたの Dapp で使うことができます。 しかし、何百もの異なる種類のデータが必要な場合は事情が異なります。 ノードからのデータ取得が何百回も発生し、その都度RTTopens in a new tabが必要となるため、Dapp の処理速度が低下し、非効率になってしまいます。 ひとつの回避策としては、一度に複数のデータを返すデータ取得用の関数をスマートコントラクト側で用意する方法があるでしょう。 しかし、これは常に最善の方法とは言えません。

また、過去のデータが必要な場合もあるでしょう。 最後の取引の時間だけではなく、今まで自分が行った全ての取引の時間が知りたいかもしれません。 このような場合は、create-eth-appにある subgraph パッケージを活用できます。ドキュメンテーションopens in a new tabを参照して、あなたのニーズに合うように調整してください。 人気が高いスマートコントラクトの場合、すでに subgraph が含まれているかもしれません。 subgraph exploreropens in a new tabをチェックしてみてください。

subgraph があれば、Dapp にシンプルなクエリをひとつ追加するだけで、過去のデータも含めた全てのブロックチェーンのデータを 1 回のフェッチ処理で取得することができます。

Apollo

Apollo Boostopens in a new tabとの統合により、React で作成した Dapp に The Graph を簡単に搭載できるようになりました。 特にReact hooks と Apolloopens in a new tabを使えば、コンポーネントに GraphQL のクエリをひとつ追加するだけで、簡単にデータ取得が可能になります：

1const { loading, error, data } = useQuery(myGraphQlQuery)
2
3React.useEffect(() => {
4  if (!loading && !error && data) {
5    console.log({ data })
6  }
7}, [loading, error, data])
 コピー

テンプレート

さらに、Dapp 用にさまざまなテンプレートが用意されています。 今のところ、Aave、Compound、UniSwap、および Sablier 用のテンプレートがあります。 これらのテンプレートはすべて、すでに subgraph と統合されており、スマートコントラクトのアドレスに対して重要なサービスを追加します。 yarn create eth-app my-eth-app --with-template aaveなどの作成コマンドを、テンプレートに追加するだけでよいです。

Aave

Aaveopens in a new tabは、分散型の通貨レンディングプラットフォームです。 預金者は、市場に流動性を提供することで金利収入を獲得でき、借主は担保を提供して借り入れることができます。 Aave のユニークな特徴のひとつは、1 回のトランザクション内で返済する限り無担保で通貨を借入できるフラッシュローンopens in a new tabという仕組みです。 この機能は、裁定取引で余分のキャッシュが必要になる場合などに有効でしょう。

利子が付与される取引中のトークンは、aTokenと呼ばれます。

Aave とcreate-eth-appを統合すると、Aave 用の subgraphopens in a new tabが使えるようになります。 Aave は The Graph を採用しており、Ropstenopens in a new tabおよびメインネットopens in a new tab上では、すぐに導入できる subgraph をrawopens in a new tabまたはformattedopens in a new tab形式で提供しています。

Compound

Compoundopens in a new tabは、Aave に類似したサービスです。 create-eth-app ではすでに、Compound v2 の subgraphopens in a new tabが利用可能です。 驚くべきことに、Compound では利子が付与されるトークンをcTokenと呼んでいます。

Uniswap

Uniswapopens in a new tabは、分散型取引所 (DEX) です。 流動性を供給するユーザーは、取引の売主／買主の両方に対して、必要なトークンや ether を提供して手数料を獲得することができます。 Uniswap は広く利用されているため、多種多様なトークンに最大規模の流動性を提供する取引所のひとつです。 あなたの Dapp に Uniswap を組み込むことで、ETH を DAI とスワップする機能などが簡単に実現できます。

残念ながら、この記事の執筆時点で利用可能なのは Uniswap v1 のみとなっており、最新リリースの v2opens in a new tabは利用できません。

Sablier

Sablieropens in a new tabは、ストリーミング決済を可能にする分散型アプリです。 Sablier をセットアップすれば、その後の管理を必要とせずに、1 回の支払日の代わりに常にお金を受け取ることができるようになります。 create-eth-app では、独自の subgraphopens in a new tabが利用できます。

次のステップ

create-eth-appについて質問がある場合は、Sablier コミュニティーのサーバーopens in a new tabにアクセスして、 create-eth-appの開発者に問い合わせることができます。 次のステップとしては、Material UIopens in a new tabのような UI フレームワークの導入、あなたが実際に必要とするデータを取得するための GraphQL クエリの作成、およびデプロイのセットアップなどが考えられます。