こちらの後半です！
https://zenn.dev/nbr41to/scraps/ef5248146caafd

web3のCounterアプリを作る

さて,Hello worldも終えたので,これらの知識を踏まえて本題のCounterを作っていきます.

Counterコントラクトの作成

新しいコントラクトをSolidityで作ります.

// SPDX-License-Identifier: Unlicense
pragma solidity ^0.8.0;

contract Counter {
    uint256 public count;

    function getCount() public view returns (uint256) {
        return count;
    }

    function increment() public {
        count += 1;
    }

    function decrement() public {
        count -= 1;
    }
}

再度コンパイルをします.

npx hardhat compile

artifacts/contracts/Counter.solが作成されるはず.

Counterコントラクトのデプロイ

deploy.jsのHelloをCounterに書き換えてから

npx hardhat node

でサーバーを起動して

npx hardhat run scripts/deploy.js --network localhost

でHardHatNetworkにデプロイします.
Helloと同じコントラクトアドレスのようですね.
（このあとtypoしてたので,再度コンパイルしてデプロイしたらコントラクトアドレスが変更されました.謎です）

Counterコントラクトの呼び出し

使用するJSONファイルを変更しましょう.

import counterAbi from '../../artifacts/contracts/Counter.sol/Counter.json';

これで初期値のcountである0を呼び出すことができましたが,方はBigIntだったので,count.toNumber()のようにすることで,0を取得できました！

ここまで,前回までの復習ですね.

証明書を発行しカウントアップする

言い方が大袈裟ですが,前半で説明した通り,web3ではコントラクトに関する情報が公開になります.

フロントエンドでカウントアップ（コントラクト内で言うincrement）を実行する際のコードはこちらです.

const countUp = async () => {
  if (typeof window === 'undefined') return;
  const provider = new ethers.providers.Web3Provider(window.ethereum);
  const contract = new Contract(
    contractAddress,
    counterAbi.abi,
    provider,
  ).connect(provider.getSigner());

  await contract.increment();
};

countの取得との違いは.connect(provider.getSigner())をしないと変更する系の処理はできないという点です.
このsignerとう概念はよくわかっていないのですが,このあと署名をすることになるので,その署名者は誰かという情報をMetamaskのログイン情報から取得しているものだと思われます.

この関数を実行すると,Metamaskが立ち上がり,このような画面になります.

「ガス代がないよ」と言われています.

ガス代とは

ブロックチェーンの利用料金なもので,利用するブロックチェーンの通貨が必要になる.
これが高いと利用者としてはかなりしんどい.税金のようなものだ.

テストネットの通貨は簡単に増やすことができる

Ethereumの本番で利用するとなると,Ethereumの通貨が必要になり,出費になってしまいますが,テストネットのRinkebyなどで利用する場合の通貨は無料で何回でも受け取ることができます.

localhostでの通貨の増やし方がわからない（多分自分で通過を発行するコードを作らないといけないんじゃないかな）ので,同様にRinkebyでデプロイしてから続けていくことにします.

やっぱり開発は最初からRinkebyが良さそう

というわけで,前半同様にRinkebyにデプロイします.

準備は済んでいるので,

npx hardhat run scripts/deploy.js --network rinkeby

でイケるはずです.

その後,コントラクトアドレスを差し替えるのを忘れずにしましょう.

RInkebyの通貨を無料で受け取る

動作の前に先に通貨をもらっておきます.

方法はいくつかあるのですが,Alchemyを使っているのであれば以下の方法が最強に簡単です.

ダッシュボードからRinkebyのAPPページにいき,「GET TEST ETH」を押して,Metamaskの自分のアドレスを入力するだけです.

Rinkebyで再試行

ネットワークをRinkebyに切り替えて,再度countUpを実行すると,今度は通貨があるので,確認ボタンが押せそうです.

確認を押した後にちょっとだけ時間がかかるのですが,更新してみるとcountが1に増えていると思います.

この時間がかかるのはTransactionという処理が動いているからです.

Transactionとは

一般的には待ちの状態の処理のことを指します.
ブロックチェーンでは,保存する内容は決まったが,保存先を探している待ちの状態のことを指します.

Metamaskのアクティビティから過去のTransaction（処理）を確認できます.

Incrementという処理があることを確認してみてください.

「Transaction IDをコピー」して,Etherscanで検索するか,「ブロックエクスプローラーで表示する」かすることで,Transactionを確認することができます.

とはいえ,見てもなんのこっちゃわかりませんね...

まあとにかくこれで,「処理が実行されたことを誰でも見れるようになった」ということです.

これで終わり？

CounterとしてはcountUpと同様にcountDownを作れば終わりです.

Transactionの詳細を見ればTimestampなどが自動で追加されており,当初の目的の

• いつ（Timestamp）
• 誰が（FromにMetamaskのアカウントのアドレスが記載）
• 増やしたのか/減らしたのか（Input Dataに実行された関数が記載）

などの情報が公開され証明になっている状態を作ることを実現できました.

次はこのTransactionに任意のデータを加えてみたいですね.