Web3プロジェクトを迅速に構築するには？HardhatとReactを使用した開発ガイド

Web3 プロジェクトを構築するのは実際にはそれほど複雑ではありません。特に Hardhat と React という 2 つのツールを使用すれば、開発プロセスが効率的でスムーズになります。以下では、スマートコントラクトの開発からフロントエンドのインタラクションまで、ステップバイステップで解説します。

Web3 ウォレット Web3 Wallet

1. スマートコントラクト開発環境の構築 ——Hardhat 入門#

Hardhat は Ethereum スマートコントラクト開発の強力なツールで、ローカルテストチェーン、コントラクトのコンパイル、デプロイ、デバッグをサポートしています。

プロジェクトの初期化
プロジェクトのルートディレクトリでターミナルを開き、次のコマンドを実行します：`npm init -y

npm install --save-dev hardhat

npx hardhat`
「JavaScript プロジェクトを作成」を選択すると、Hardhat が基本設定とサンプルコントラクトを生成します。
スマートコントラクトの作成
contracts フォルダ内に新しいコントラクトファイルを作成または変更します。例えば MyToken.sol を作成し、Solidity でロジックを書きます。
コントラクトのコンパイル
次のコマンドを実行します：npx hardhat compile
コントラクトに構文エラーがないことを確認し、対応する ABI とバイトコードを生成します。
ローカルテストチェーンの起動
Hardhat にはローカルチェーンが付属しています。次のコマンドを実行します：npx hardhat node
このノードは自動的にテストアカウントと秘密鍵を生成し、デバッグを容易にします。
コントラクトのデプロイ
scripts ディレクトリにデプロイスクリプトを作成します。例えば deploy.js：`async function main() {

const MyToken = await ethers.getContractFactory("MyToken");

const token = await MyToken.deploy();

await token.deployed();

console.log ("MyToken がデプロイされました:", token.address);

}

main().catch((error) => {

console.error(error);

process.exitCode = 1;

}); 次のコマンドを実行します：npx hardhat run scripts/deploy.js --network localhost`

ローカルテストチェーンにデプロイします。
テストケースの作成
test ディレクトリに JavaScript テストを作成し、Mocha と Chai を使用してコントラクトの機能を検証し、コントラクトの安定性を保証します。

2. フロントエンド環境の構築 ——React の迅速なスタート#

React はユーザーインターフェースを構築するための最適なフレームワークで、Web3.js または Ethers.js と組み合わせてチェーン上のインタラクションを実現します。

React プロジェクトの作成
次のコマンドを実行します：`npx create-react-app web3-react-app

cd web3-react-app`
依存関係のインストール
Ethers.js（推奨）をインストールします：npm install ethers

また、好みに応じて Web3.js を使用することもできます。

ウォレットの接続
React コンポーネント内で、MetaMask に接続するロジックを追加します：`import {useState} from"react";

import { ethers } from "ethers";

function App() {

const [account, setAccount] = useState(null);

async function connectWallet() {

if (window.ethereum) {

  try {

    const accounts = await window.ethereum.request({ method: "eth_requestAccounts" });

    setAccount(accounts[0]);

  } catch (error) {

    console.error("ユーザーがウォレットの接続を拒否しました");

  }

} else {

  alert("MetaMask ウォレットをインストールしてください");

}

}

return (

<div>

  <button onClick={connectWallet}>ウォレットを接続</button>

  {account &&

接続されたアカウント: {account}

}

</div>

);

}

export default App;`

スマートコントラクトの呼び出し
Hardhat でデプロイしたコントラクトのアドレスと ABI を React にインポートし、コントラクトメソッドを呼び出します：`import {ethers} from"ethers";

import MyTokenABI from "./MyToken.json";

const contractAddress = "デプロイ時に表示されたアドレス";

async function getTokenName() {

if (!window.ethereum) return;

const provider = new ethers.providers.Web3Provider(window.ethereum);

const contract = new ethers.Contract(contractAddress, MyTokenABI.abi, provider);

const name = await contract.name();

console.log ("トークン名:", name);

}`
インタラクション機能の実装
コントラクトの機能に基づいて、フロントエンドのボタンや入力フィールドを設計し、コントラクトの読み書きメソッドを呼び出して、送金や残高照会などの機能を実現します。

3. デプロイと公開#

コントラクトをテストネットまたはメインネットにデプロイ
Hardhat の設定ファイル hardhat.config.js を変更し、ネットワーク設定を追加します。公式 RPC またはサードパーティサービスを使用します。デプロイ時には次のコマンドを使用します：npx hardhat run scripts/deploy.js --network rinkeby
または他のネットワークを使用します。
フロントエンドのホスティング
React プロジェクトをビルドします：npm run build
静的ファイルを生成し、任意の静的ウェブサイトホスティングサービスにアップロードします。
代替ドメインで取引所にアクセス
国内ユーザーが取引所にアクセスする際は、超リンクナビゲーションが提供する代替ドメインを使用して、安定したアクセスを確保できます：
- OKX
- Binance
- HTX
- Gate
- Bitget
- Bybit

まとめ#

Hardhat を使用してスマートコントラクト開発環境を構築し、React を組み合わせてフロントエンドインタラクションを実現することで、完全な Web3 プロジェクトを迅速に構築できます。Hardhat はローカルチェーンと自動化ツールを提供し、コントラクトの作成、テスト、デプロイを容易にします。React はユーザーインターフェースを柔軟で使いやすくし、Ethers.js と組み合わせてチェーン上の操作を実現します。合理的な役割分担により、開発効率が大幅に向上します。国内ユーザーが取引所にアクセスする際は、超リンクナビゲーションの代替ドメインを利用することで、取引所へのアクセスがスムーズになります。このプロセスをマスターすれば、Web3 開発の入門はもはや難しくありません。