このページは英語からの機械翻訳を使用しており、誤りや不明瞭な表現が含まれている可能性があります。最も正確な情報については、オリジナルの英語版をご覧ください。頻繁な更新のため、一部のコンテンツはオリジナルの英語になっている可能性があります。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フロントエンドを構築することもできる。開発者は、HardhatやFoundryを使ってスマート・コントラクトを簡単に作成、テスト、デプロイでき、Next.jsを使ってReactフロントエンドを構築することもできる。

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

前提条件

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

ノード (>= v18.17)
糸（v1またはv2+）。
フックなど、JavascriptとReactの基本に精通していること
メタマスクウォレット
FaucetからKAIAをテストする。
RPCエンドポイント：サポートされているエンドポイント・プロバイダーのいずれかから取得できます。

開発環境の構築

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

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

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


npx create-eth@latest

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

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

Solidity Framework; どのSolidityフレームワークを使用しますか？：お好みのSolidityフレームワーク（Hardhat、Foundry）を選択してください。このガイドでは、Hardhatフレームワークを使用する。

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


cd project-name
// 例： cd kaia_scaffold

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

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

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

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

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

ハードハットの構成

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

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

Kaia用にhardhatを設定するには、.envファイルを作成し、Kaiaをサポートするようにhardhat.config.tsを修正する必要があります。

ステップ1：.envの作成

.envファイルを作成するには、以下のコードをターミナルにコピー＆ペーストする。


touch packages/hardhat/.env

hardhat.config.jsファイルですでに使用されている変数については、.env.exampleファイルを参照できる。カイアの場合、必要な変数は1つだけです：DEPLOYED_PRIVATE_KEY。

ステップ2：.envファイルを編集して、この変数を追加する。


deployer_private_key=insert_private_key

.envファイルに記述された秘密鍵は、Hardhatプロジェクトでスマート・コントラクトをデプロイし、やり取りするアカウントに対応します。

ステップ3：hardhat.config.tsを修正する。

次にやりたいことは、hardhat.config.tsをカイアに対応するように設定することだ。

定数 defaultNetwork に、スマート・コントラクトをデプロイするネットワークを設定する。


    kairos: {
      chainId：1001,
      url："https://responsive-green-emerald.kaia-kairos.quiknode.pro/",
      accounts：[deployerPrivateKey],
}、

カイアのネットワーク設定をネットワーク設定オブジェクトの下に追加する。


ネットワーク"kairos"、

Hardhatをカイアで使用する際の詳細については、Hardhatガイドをご確認ください。

カイアに契約を展開

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

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


ヤーンコンパイル

コンパイル](/img/build/tutorials/scaffold-2.png)

次に、プロジェクトのルート・ディレクトリーから以下のコマンドを実行する：


ヤーン・デプロイ

デプロイ](/img/build/tutorials/scaffold-6.png)

注：

hardhat.config.tsファイルでdefaultNetworkコンフィグを設定していない場合は、コマンドに--network INSERT_NETWORKを追加することができる。例えば、以下のコマンドはカイアに契約をデプロイする。例えば、以下のコマンドはカイアに契約をデプロイする。

yarn deploy --network kaia

デプロイ済みコントラクトの確認

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


  etherscan: {
    apiKey: {
      kairos: "unnecessary",
    },
    customChains: [
      {
        network: "kairos",
        chainId: 1001,
        urls: {
          apiURL: "https://api-baobab.klaytnscope.com/api",
          browserURL: "https://kairos.kaiascope.com",
        },
      },
    ],
  },

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

例


yarn hardhat-verify --network network_name contract_address "コンストラクタの引数1"

実際


yarn hardhat-verify --network kairos 0x7fc9656fc8c8ab433867e58b7c6afc19ec4275da
 "0x7fc9656fc8c8ab433867e58b7c6afc19ec4275da"

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

検証](/img/build/tutorials/scaffold-verify.png)

カイアスコープで検証](/img/build/tutorials/scaffold-3.png)

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

Next.jsの設定

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

targetNetwork配列を変更する


targetNetworks: [chains.klaytnBaobab],

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

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

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

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


ヤーンスタート

dAppの実行](/img/build/tutorials/scaffold-4.png)

これで、http://localhost:3001/、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をご覧ください。

はじめに​

前提条件​

開発環境の構築​

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

ハードハットの構成​

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

カイアに契約を展開​

デプロイ済みコントラクトの確認​

Next.jsの設定​

targetNetwork配列を変更する​

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

結論​