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

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

機能

React と create-react-app

まずは、このアプリの核心である React と、create-react-appで提供される追加の機能すべてについて説明します。 イーサリアムとの統合を希望しない場合は、このアプリだけを使うのも良い方法です。 React(opens in a new tab)を使えば、インタラクティブな UI を簡単に作成できます。 React は、Vue(opens 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 Workspaces(opens in a new tab)では、複数のパッケージをひとつのルートフォルダで管理することができ、yarn installを使って依存関係を一度にインストールすることができます。 このアプローチは、スマートコントラクトのアドレスや ABI 管理（スマートコントラクトをどこにデプロイしたか、スマートコントラクトとどのようなやり取りを行うか）などの小さなパッケージを追加したり、The Graph との統合において特に有益であり、どちらの機能もcreate-eth-appに含まれています。

ethers.js

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

The Graph

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

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

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

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

Apollo

Apollo Boost(opens in a new tab)との統合により、React で作成した Dapp に The Graph を簡単に搭載できるようになりました。 特にReact hooks と Apollo(opens 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

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

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

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

Compound

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

Uniswap

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

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

Sablier

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

次のステップ

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