====== Web3.js を使用した DApps 開発 ======

===== 前提 =====

Counter スマートコントラクトを使用するため、[[blockchain:truffleを使ったスマートコントラクト開発|Truffleを使ったスマートコントラクト開発]] を実施しておいてください。

Counter スマートコントラクトをデプロイした Ganache or ganache-cli を起動しておいてください。

===== Counter スマートコントラクトの ABI と address を取得 =====

「my_project\build\contracts\Counter.json」に Counter スマートコントラクトの ABI と address が記録されていますので、それをメモしておきます。

ABI
<code JSON>
  "abi": [
    {
      "inputs": [],
      "name": "count",
      "outputs": [
        {
          "internalType": "uint256",
          "name": "",
          "type": "uint256"
        }
      ],
      "stateMutability": "view",
      "type": "function"
    },
    {
      "inputs": [],
      "name": "get",
      "outputs": [
        {
          "internalType": "uint256",
          "name": "",
          "type": "uint256"
        }
      ],
      "stateMutability": "view",
      "type": "function"
    },
    {
      "inputs": [],
      "name": "inc",
      "outputs": [],
      "stateMutability": "nonpayable",
      "type": "function"
    },
    {
      "inputs": [],
      "name": "dec",
      "outputs": [],
      "stateMutability": "nonpayable",
      "type": "function"
    }
  ],
</code>

address(下記では "address": "0x791C2E0e40B2b96f3aE2F5D3F3661478f73fB49D")
<code JSON>
  "networks": {
    "1651628570834": {
      "events": {},
      "links": {},
      "address": "0x791C2E0e40B2b96f3aE2F5D3F3661478f73fB49D",
      "transactionHash": "0xa8743487adb9a9480ea0510ef29cc1ceba402c74f5cd3063f766c56b41d9bc66"
    },
</code>

===== Web3.js を使用する HTML の実装 =====

ソースコードは [[https://github.com/shinoburc/SimpleEthereumClient|GitHub SimpleEthereumClient]] で管理しています。

上記リポジトリから index.html を取得し、ABI(現在は同じはずなので、書き換える必要はありません)とaddressを書き換えてください。

===== 実行 =====

index.html をブラウザで開くと、ブラウザから Counter スマートコントラクトが実行できることを確認できます。

{{:blockchain:2022-05-05_09h38_46.png?800|}}