Solidity + Truffle + Ganache + Nextjs でdAppを構築するときの手順まとめ

## 概要

前回はSolanaチェーン上でTodoアプリを作る、
というような内容で実装を行ってみました。

今回は、Solidity でも似たようなことをやってみたいと思い、
参考になるものを探したところ、Venmoと呼ばれる個人間の送金アプリのモックアップを
Solidity を用いて作っているチュートリアルがあったため、実装を追ってみました。

使っている技術スタックとしては、

`Solidity + Truffle + Ganache + Nextjs` です。

途中からTestNetではなく、ローカルのGanacheというローカルチェーンを使うように切り替えたのですが、
慣れていないこともあり、自分が何をやっているのか、何をどう繋げたいのかなど混乱して思ったより時間がかかってしまいました。

いくつかチュートリアル記事などは転がっているのですが、やはり公式のドキュメントを忍耐強く読むのが一番でした。
その上で、詰まったところについて、最初に知っておきたかった構成や、何をやっているのかの概念的なところなどをまとめて書いていこうと思います。

## 参考にしたもの

https://github.com/kenmaro3/solidity-venmo

こちらにクライアント＋スマートコントラクトのコードは上げています。

こちらはSolanaチェーンの時と同じように、

https://www.youtube.com/watch?v=rQadaQXSO08&t=4248s

こちらの動画を大いに参考にさせてもらいました。
ただ、テストネットでの開発にスピード感が持てなかったのと、faucetなどを待つのがめんどくさかったので、今回はGanacheでデプロイできるように変更しました。


## 構成

-  フロントエンド（Nextjs + ehter.js)
-  スマートコントラクト (Solidity)
-  開発環境（Truffle suite + Ganache ローカルチェーン）
-  ウォレット（メタマスク）

どのような手順で開発をすればいいか、ウェブ３が初めてだとそこからわからないので、
簡単な手順を書いてみます。

## 開発手順

### Truffleでスマートコントラクトを作成

今回の例だと、まず`Truffle` をインストールします。

https://trufflesuite.com/docs/truffle/quickstart/

truffle は、solidity で実装したスマートコントラクトをコンパイル、デプロイ、テストできる総合環境のようなものです。
VSCodeにもエクステンションとして導入することができますし、もちろんコマンドラインから実行することもできます。

手順についてはやはり公式ドキュメントを追うべきですが、実行する内容としては以下のような流れになります。

1. truffle init を行い、必要なフォルダやconfig ファイルを生成する。
2. スマートコントラクトを実際にコーディングする（`contracts/Transaction.sol`ファイルとか）
3. truffle compile でsolファイルをビルドします。（`build/contracts/Transaction.json`が生成されます。）
4. `deploy`に必要なファイルを書く（`migration/deploy.js`など）

ここまでできたら、実際にどのチェーンにスマートコントラクトをデプロイするか、について整備します。


### Ganacheでローカルチェーンを構築

https://trufflesuite.com/ganache/

`Ganache`は、ローカル環境で動かせるEthチェーンです。
まずはダウンロードをして、`Quickstart` を使ってプロジェクトを立ち上げます。
最初自分は何をやっているのかわかりませんでしたが、Quickstartにより、ローカルでブロックチェーンが構築され、テスト用のETHが１００ずつ入ったアドレス（１０人プリセットされたユーザがいると思えば良い）が用意されます。

ここで、Ganacheの設定画面に行き、先ほどの`Truffle`のコンフィグファイル`truffle-config.js`ファイルへのパスを指定し、プロジェクトを追加します。

![Screen Shot 2022-12-01 at 14.51.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/519792/5a8f2895-3b32-f2e8-98d8-f8ec960e9e49.png)

さらに、サーバ管理タブへと進み、ポートを`7545`に変更します。

![Screen Shot 2022-12-01 at 14.52.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/519792/ac9cfa7a-4b76-a281-870f-7cb51883dd7b.png)

ここまで完了したら、`Truffle`のデプロイの設定に進むために、スマートコントラクトを定義したフォルダへと戻ります。


### Truffle でスマートコントラクトをデプロイ

今回はローカルの`Ganache`にコントラクトをデプロイするので、`truffle-config.js` の以下の部分をアンコメントします。

```truffle-config.js
  networks: {
    // Useful for testing. The `development` name is special - truffle uses it by default
    // if it's defined here and no other network is specified at the command line.
    // You should run a client (like ganache, geth, or parity) in a separate terminal
    // tab if you use this network and you must also set the `host`, `port` and `network_id`
    // options below to some value.
    //
    development: {
      host: "127.0.0.1",     // Localhost (default: none)
      port: 7545,            // Standard Ethereum port (default: none)
      network_id: "*",       // Any network (default: none)
    },

```

この変更を加えた後に、`truffle migrate`のコマンドをつかって、
デプロイを実行します。
成功すれば、
![Screen Shot 2022-12-01 at 14.56.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/519792/9b3277bd-536c-a1f4-bfe0-5a860f429010.png)

このようなログが発行されるので、このときの`contract address`をコピーしておきます。



### ウォレットの作成と、Ganacheとの結びつけ

`メタマスク`ウォレットをクロームの拡張機能としてインストールします。
インストールできたら、
まず、ウォレットの接続先として、ローカルの`Ganache`を設定するために、
Networkの追加を行います。

![Screen Shot 2022-12-01 at 14.37.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/519792/5dff8eb9-bd27-acc3-8c79-d96b0a5946b0.png)

メタマスクのこの画面から、

```
Network name: 自分で名前を適当につける
New RPC URL: http://127.0.0.1:7545
Chain ID: 1337
Currency symbol: ETH
```

としてネットワークを設定します。
これを設定すると、メタマスクから作ったネットワークを選択できるようになります。


ローカル`Ganache`のネットワークをメタマスクに追加できたので、次はこのネットワーク（チェーン）のアドレスをテストのためにいくつか追加します。

![Screen Shot 2022-12-01 at 14.58.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/519792/41fee08d-b415-df2c-fef6-6e4de7b37804.png)

この画面の`import account`を選び、

![Screen Shot 2022-12-01 at 14.39.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/519792/730b9605-f8ac-c3ec-a24d-cc731f1fd2c6.png)

これが先ほどの`Ganache`の画面ですが、この1行1行がアドレスとなっているので、右の鍵マークから、それぞれのアドレスの秘密鍵を取得します。

その秘密鍵を、

![Screen Shot 2022-12-01 at 14.37.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/519792/84301e18-b271-ad40-f859-afec1cf606a0.png)

ここにコピーペーストして、ウォレットをインポートします。


私はテストのために、上２つのアドレスをメタマスクと同期しました。



### クライアントコードとの接続

ここまでできたら、後はクライアントコードであるNextjs に設定を追加し、
スマートコントラクトのエンドポイントに向けてクエリを発行できるように設定します。

まず、

https://github.com/kenmaro3/solidity-venmo/blob/main/src/utils/Transactions.json

こちらのファイルは、先ほど`truffle`でコンパイルした`build/contracts/Transaction.json`をそのままコピーしてきます。

次に、

https://github.com/kenmaro3/solidity-venmo/blob/main/src/utils/constants.js

こちらの`contractAddress`は、`truffle migrate`をしたときにメモしていた
`contract address`　をそのまま貼り付けます。

以上で繋ぎ込みは大丈夫です。

あとは、`Nextjs`を`yarn install` + `yarn start`にて立ち上げると、
デモとして挙動が確認できるはずです。


![Screen Shot 2022-12-01 at 14.40.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/519792/b9f1af81-7ccd-73f5-8504-f5a61e5496dc.png)

このようにチェーン上のアドレス（宛先）を指定し、送信するETHの量を指定します。

![Screen Shot 2022-12-01 at 14.41.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/519792/d721f79b-b898-3a04-3076-41382cdba868.png)

結果として、`Ganache`上のETHが移動しているのが確認できるはずです。

![Screen Shot 2022-12-01 at 14.41.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/519792/ea5b24d9-c11a-1083-9cd2-2442526bbbdb.png)

また、UI上でもトランザクションの履歴が表示されます。

お疲れ様でした。！



## まとめ

今回は、`Solidity + Truffle + Ganache + Nextjs`を用いて
送金サービスのVenmoのデモアプリを実装し、その構築手順をまとめました。

私自身ウェブ３アプリの構築手順の流れには全く慣れていないのでいろいろな場所で詰まりましたが、少しだけ慣れた気がしてよかったです。
この次はこれを解説動画のように`Goerli`のTestNetに乗せてみるのがネクストステップかなと思っています。


今回は`Solidity`のスマートコントラクトのコード自体には言及しなかったので、
別記事で少し言及しようと思います。


今回はこの辺で。

@kenmaro