本文へスキップ
このページは英語からの機械翻訳を使用しており、誤りや不明瞭な表現が含まれている可能性があります。最も正確な情報については、オリジナルの英語版をご覧ください。頻繁な更新のため、一部のコンテンツはオリジナルの英語になっている可能性があります。Crowdinでの取り組みに参加して、このページの翻訳改善にご協力ください。 (Crowdin translation page, Contributing guide)

Scaffold-ETH 2を使用してdAppを構築する

はじめに​

Scaffold-ETH 2は、EthereumやKaiaのような他のEVM互換ブロックチェーン上で分散型アプリケーション（dApps）を構築するためのオープンソースのツールキットです。 開発者はScaffold-ETH 2により、Solidityスマートコントラクトを簡単にデプロイし、ReactフロントエンドでdAppを起動することができます。

Scaffold-ETH 2ツールキットは、Next.js、RainbowKit、Hardhat、Foundry、Wagmi、TypeScriptを使って構築された。 開発者は、HardhatやFoundryを使ってスマート・コントラクトを簡単に作成、テスト、デプロイでき、Next.jsを使ってReactフロントエンドを構築することもできる。

このチュートリアルでは、Scaffold-ETH 2を使用してKaia上でデプロイ、コントラクトの実行、dAppの構築を行う方法を学びます。

前提条件​

このガイドを始めるには、以下のものが必要だ：

開発環境の構築​

Scaffold-ETH 2をインストールするには、Scaffold-ETH 2リポジトリをクローンしてインストールするか、npx create-eth@latestを使用してインストールするかの2つの方法があります。

このガイドでは、Scaffold-ETH 2プロジェクトのブートストラップにはnpxメソッドを使用します。

以下のコマンドを実行して、Scaffold-ETH 2プロジェクトをブートストラップします：


npx create-eth@latest

一連のプロンプトが表示されます：

プロジェクト名：プロジェクト名の入力: プロジェクト名を入力してください。

**どのsolidityフレームワークを使用しますか？お好みのsolidityフレームワーク(Hardhat、Foundry)を選択してください。 このガイドでは、Hardhatフレームワークを使用する。

**パッケージをインストールしますか？yes（デフォルト・オプション）の場合はEnterを押すか、nと入力してnoの場合はEnterを押す セットアップが完了したら、プロジェクト・ディレクトリに移動します。


cd project-name
// e.g cd kaia-scaffold-example

足場ETHセットアップ](/img/build/tutorials/scaffold-1.png)

Scaffold-ETH 2による開発プロセスのハイライト​

Scaffold-ETH 2を使ったプロジェクト開発のプロセスは以下のようになります：

  1. packages/hardhat/hardhat.config.ts**ファイルで、KaiaをターゲットとするHardhatのネットワーク設定を更新する。
  2. スマートコントラクトを packages/hardhat/contracts に追加する。
  3. packages/hardhat/deploy**にあるデプロイスクリプトを編集します。
  4. スマートコントラクトをKaiaにデプロイする
  5. ハードハット検証プラグインでスマートコントラクトを検証する
  6. packages/nextjs/scaffold.config.ts**ファイルで、Kaiaをターゲットとするフロントエンドを設定します。
  7. packages/nextjs/pages**ディレクトリで、必要に応じてフロントエンドを編集してください。

このガイドでは、Scaffold-ETH 2のインストール後に利用できるデフォルトのサンプルコントラクトとフロントエンドを使用します。 必要なのは、これらのコンポーネントをカイア用に変更することだけだ。 その場合、コンフィギュレーションをHardhatとNext.jsに分割する。

ハードハットの構成​

このセクションでは、packages/hardhatフォルダの下にあるKaiaをターゲットに、Hardhat設定ファイルのネットワーク設定を変更します。

カイアのハードハットを設定する​

**ステップ1：ネットワークの設定

まず最初に行いたいのは、hardhat.config.tsをKaiaネットワークをサポートするように設定することだ。 packages/hardhat/hardhat.config.ts`に行き、Kaiaネットワークをnetworksオブジェクトに追加する。


networks: {
// … other networks
kaia: {
chainId: 8217,
url: "https://public-en.node.kaia.io",
accounts: [deployerPrivateKey],
},
}

**ステップ2：新しいアカウントを作成するか、契約を展開するアカウントを追加します。

次にすることは、アカウントを設定することです。 を実行することで、ランダムなアカウント／秘密鍵を生成することができる：


yarn generate

暗号化された秘密鍵（DEPLOYER_PRIVATE_KEY_ENCRYPTED）が自動的に .env ファイルに追加される。

備考

秘密鍵の暗号化に使用するパスワードの入力を求められます。 このパスワードは、今後のデプロイやアカウント照会に必要になりますので、忘れないようにしてください。

秘密鍵をインポートしたい場合は、以下を実行する：


yarn account:import

秘密鍵を貼り付け、暗号化パスワードを設定するようプロンプトが表示されます。 暗号化された秘密鍵は .env ファイルに保存される。

設定された（生成またはインポートされた）口座と残高は、以下の方法で確認できます：


yarn account

このステップでは、秘密鍵を解読し、口座情報と残高を表示するためのパスワードも入力する必要があります。

カイアに契約を展開​

KaiaネットワークをサポートするためにHardhatを設定した後、次のステップは、サンプル契約をコンパイルして展開することです。

まず、コントラクトをコンパイルする：


yarn compile

次に、契約を展開するには2つの選択肢がある：

**オプション1：デフォルトネットワークの設定

hardhat.config.ts`ファイルのdefaultNetworkフィールドをkaiaまたはkairosに設定してください。

yarn deploy` を実行すると、指定したデフォルトネットワークにコントラクトがデプロイされる。

オプション2：ネットワークを明示的に指定する。

特定のネットワークにデプロイするには、デプロイコマンドを実行するときに --network フラグを使用します：


yarn deploy --network network_name

例: yarn deploy --network kairos

アウトプット：


% yarn deploy
✔ Enter password to decrypt private key:
Nothing to compile
No need to generate any newer typings.
deploying "YourContract" (tx: 0x90d0587fcbbfd34057c9bc8c77a3ae56807bcee20c19b278499ca5da70affbbb)...: deployed at 0xb1ea8476debb6d3021cC3a179B9eC21e01742d82 with 534186 gas
👋 Initial greeting: Building Unstoppable Apps!!!
📝 Updated TypeScript contract definition file on ../nextjs/contracts/deployedContracts.ts

派遣契約の確認​

すでにデプロイされたコントラクトを検証するために、hardhat verifyプラグインを使おう。 必要なのは、以下の設定をhardhat.config.tsのhardhat-verify etherscan設定オブジェクトの下に追加することだけです。


etherscan: {
apiKey: {
kaia: "unnecessary",
},
customChains: [
{
network: "kaia",
chainId: 8217,
urls: {
apiURL: "https://mainnet-api.kaiascan.io/hardhat-verify",
browserURL: "https://kaiascan.io",
},
},
],
},

次に、スマート・コントラクトを検証するために、以下のコマンドをターミナルにコピー＆ペーストする：

例


yarn hardhat-verify --network network_name contract_address "Constructor arg 1"

実際


yarn hardhat-verify --network kairos 0xb1ea8476debb6d3021cC3a179B9eC21e01742d82
"0xDe75f893078D25fBA2eE090A3971baF832F15A88"

上で見たように、コントラクトを検証するには、ネットワーク名、コントラクトのアドレス、コンストラクタの引数（もしあれば）を渡す必要がある。 しばらく待つと、コンソールに検証結果が表示され、成功した場合はKaiaScan上で検証されたコントラクトへのURLが提供されます。

アウトプット：


% yarn hardhat-verify --network kairos 0xb1ea8476debb6d3021cC3a179B9eC21e01742d82 "0xDe75f893078D25fBA2eE090A3971baF832F15A88"
Successfully submitted source code for contract
contracts/YourContract.sol:YourContract at 0xb1ea8476debb6d3021cC3a179B9eC21e01742d82
for verification on the block explorer. Waiting for verification result...
Successfully verified contract YourContract on the block explorer.
https://kairos.kaiascan.io/address/0xb1ea8476debb6d3021cC3a179B9eC21e01742d82#code

足場検証】(/img/build/tutorials/scaffold-3.png)

Hardhat Verifyプラグインを使用したKaia上でのスマートコントラクトの検証の詳細については、Hardhat Verifyプラグインガイドを参照してください。

Next.jsの設定​

このセクションでは、packages/nextjsフォルダの下にあるKairos Testnet（スマートコントラクトがデプロイされた場所）をターゲットとするように、Next.jsの設定を変更します。 このフォルダでは、scaffold.config.tsファイルのscaffoldConfigオブジェクト内のtargetNetwork配列を変更する予定です。

targetNetwork配列を変更する​


targetNetworks: [chains.kaia, chains.kairos],

以上でNext.jsの設定は完了です！ 次に、ローカルホストでdAppを起動する。

ローカルホストでdAppを起動する​

必要な設定をすべて行ったら、ローカルホスト上でサンプルのdAppを起動できる。

そのためには、以下を実行する：


yarn start

これで、http://localhost:3000/、ReactベースのdAppフロントエンドにアクセスできるようになるはずだ。 ウォレットに接続したり、コントラクトデバッガーのページをチェックしたりして、自由にdAppとやりとりしてください。

スカフォールドdApp](/img/build/tutorials/scaffold-5.png)

結論​

おめでとう！ Scaffold-ETH 2を使用してコントラクトをデプロイし、Kaia上でdAppを実行することに成功しました。 Scaffold-ETH 2の仕組みを理解したところで、自由に独自のスマートコントラクトを作成してデプロイし、dAppのニーズに合わせてフロントエンドを変更してください！

詳しくはScaffold-ETH 2 Docsを、質問があればKaia Forumをご覧ください。

ページを改善してください。