create-eth-appでdappのフロントエンド開発を始めましょう
前回はSolidityの全体像 (opens in a new tab)を確認し、すでにcreate-eth-app (opens in a new tab)についても言及しました。 今回は、その使い方、統合されている機能、そしてそれを拡張するための追加のアイデアについて解説します。 Sablier (opens in a new tab)の創業者であるPaul Razvan Bergによって始められたこのアプリは、フロントエンド開発をすぐに開始でき、いくつかのオプションの統合機能から選択することができます。
インストール
インストールには、Yarn 0.25以上が必要です (npm install yarn --global)。 次のように実行するだけで簡単です:
yarn create eth-app my-eth-appcd my-eth-appyarn 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_に付属するすべての追加機能です。 Ethereumとの統合を望まない場合は、これだけを使用するのも良い選択肢です。 React (opens in a new tab)を使えば、インタラクティブなUIをとても簡単に構築できます。 Vue (opens in a new tab)ほど初心者向けではないかもしれませんが、依然として広く使われており、より多くの機能を持ち、そして最も重要なことに、何千もの追加のライブラリから選択することができます。 _create-react-app_を使えば、非常に簡単に始めることができ、次のものが含まれています：
- 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 (opens in a new tab)がまだ主流で使われていますが、ethers.js (opens in a new tab)は昨年、代替として多くの注目を集めており、_create-eth-app_に統合されているものです。 これを使用するか、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()を呼び出すだけで、Ethereumノードからdappにデータを取得します。 しかし、何百もの異なるデータポイントが必要な場合はどうでしょうか？ そうなると、ノードへのデータフェッチが何百回も発生し、そのたびにRTT (opens in a new tab)が必要になり、dappが遅く非効率になります。 一つの回避策として、一度に複数のデータを返すフェッチャーコール関数をコントラクト内に設けることが考えられます。 しかし、これは必ずしも理想的ではありません。
そして、履歴データにも興味があるかもしれません。 最後の取引時間だけでなく、これまでに自分が行ったすべての取引の時間も知りたくなるでしょう。 _create-eth-app_のサブグラフパッケージを使用し、ドキュメント (opens in a new tab)を読んで、それを自分のコントラクトに適合させてください。 人気のあるスマートコントラクトを探している場合、すでにサブグラフが存在するかもしれません。 サブグラフエクスプローラー (opens in a new tab)をチェックしてください。
サブグラフがあれば、dappで簡単なクエリを1つ書くだけで、必要な履歴データを含むすべての重要なブロックチェーンデータを取得でき、必要なフェッチは1回だけです。
Apollo
Apollo Boost (opens in a new tab)の統合のおかげで、React dappにグラフを簡単に統合できます。 特にReactフックとApollo (opens in a new tab)を使用する場合、データのフェッチはコンポーネントに単一のGraphQlクエリを記述するのと同じくらい簡単です：
1const { loading, error, data } = useQuery(myGraphQlQuery)23React.useEffect(() => {4 if (!loading && !error && data) {5 console.log({ data })6 }7}, [loading, error, data])テンプレート
さらに、いくつかの異なるテンプレートから選択できます。 これまでのところ、Aave、Compound、UniSwap、またはsablierの統合を使用できます。 それらはすべて、あらかじめ作成されたサブグラフ統合とともに、重要なサービススマートコントラクトのアドレスを追加します。 yarn create eth-app my-eth-app --with-template aaveのように、作成コマンドにテンプレートを追加するだけです。
Aave
Aave (opens in a new tab)は、分散型の金融市場です。 預金者は市場に流動性を提供して受動的収入を得る一方、借手は担保を使って借り入れることができます。 Aaveのユニークな特徴の1つは、フラッシュローン (opens in a new tab)です。これは、1つのトランザクション内でローンを返済する限り、担保なしでお金を借りることを可能にします。 これは、例えば裁定取引で追加の現金を得るのに役立ちます。
利子を得るために取引されるトークンは、_aTokens_と呼ばれます。
_create-eth-app_とAaveを統合することを選択すると、サブグラフ統合 (opens in a new tab)が得られます。 AaveはThe Graphを使用しており、Ropsten (opens in a new tab)とメインネット (opens in a new tab)上で、raw (opens in a new tab)またはフォーマット済み (opens in a new tab)形式で、すぐに使えるいくつかのサブグラフをすでに提供しています。
Compound
Compound (opens in a new tab)はAaveに似ています。 この統合には、新しいCompound v2 Subgraph (opens in a new tab)がすでに含まれています。 ここでの利息獲得トークンは、驚くべきことに_cTokens_と呼ばれています。
Uniswap
Uniswap (opens in a new tab)は分散型取引所（DEX）です。 流動性供給者は、取引の両側に必要なトークンやEtherを提供することで手数料を得ることができます。 広く利用されているため、非常に広範囲のトークンに対して最も高い流動性の1つを持っています。 例えば、ユーザーがETHをDAIにスワップできるように、dappに簡単に統合できます。
残念ながら、この記事の執筆時点では、統合はUniswap v1のみで、リリースされたばかりのv2 (opens in a new tab)には対応していません。
Sablier
Sablier (opens in a new tab)は、ユーザーがお金をストリーミングで支払うことを可能にします。 一度の給料日ではなく、初期設定後は追加の管理なしに継続的にお金を受け取ることができます。 この統合には、独自のサブグラフ (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クエリを書き、デプロイをセットアップすることをお勧めします。
最終更新： 2025年9月29日
