メインコンテンツまでスキップ

lesson-2_ローカル環境でイーサリアムネットワークを立ち上げよう

🗂 環境構築をしよう

まず、node / yarnを取得する必要があります。お持ちでない場合は、下記のリンクにアクセスをしてインストールしてください。

node v16をインストールすることを推奨しています。

🍽 Git リポジトリをあなたの GitHub にフォークする

まだGitHubのアカウントをお持ちでない方は、こちら の手順に沿ってアカウントを作成してください。

GitHubのアカウントをお持ちの方は、下記の手順に沿ってプロジェクトの基盤となるリポジトリをあなたのGitHubにフォークしましょう。

1. こちらからunchain-tech/ETH-NFT-Collectionリポジトリにアクセスをして、ページ右上のForkボタンをクリックします。

2. Create a new forkページが開くので、「Copy the main branch only」という項目にチェックが入っていることを確認します

設定が完了したらCreate forkボタンをクリックします。あなたのGitHubアカウントにETH-NFT-Collectionリポジトリのフォークが作成されたことを確認してください。

それでは、フォークしたリポジトリをローカル環境にクローンしましょう。

まず、下図のように、CodeボタンをクリックしてSSHを選択し、Gitリンクをコピーしましょう。

ターミナル上で作業を行う任意のディレクトリに移動し、先ほどコピーしたリンクを用いて下記を実行してください。

git clone コピーした_github_リンク

無事に複製されたらローカル開発環境の準備は完了です。

🔍 フォルダ構成を確認する

実装に入る前に、フォルダ構成を確認しておきましょう。クローンしたスタータープロジェクトは下記のようになっているはずです。

ETH-NFT-Collection
├── .git/
├── .gitignore
├── LICENSE
├── README.md
├── package.json
├── packages/
│ ├── client/
│ └── contract/
└── yarn.lock

スタータープロジェクトは、モノレポ構成となっています。モノレポとは、コントラクトとクライアント(またはその他構成要素)の全コードをまとめて1つのリポジトリで管理する方法です。

packagesディレクトリの中には、clientcontractという2つのディレクトリがあります。

package.jsonファイルの内容を確認してみましょう。

モノレポを作成するにあたり、パッケージマネージャーの機能であるWorkspacesを利用しています。

workspacesの定義をしている部分は以下になります。

// package.json
"workspaces": {
"packages": [
"packages/*"
]
},

この機能により、yarn installを一度だけ実行すれば、すべてのパッケージ(今回はコントラクトのパッケージとクライアントのパッケージ)を一度にインストールできるようになります。

ターミナル上でETH-NFT-Collectionディレクトリ直下に移動して下記を実行してみましょう。

yarn install

packagesディレクトリ下のcontract/client/がそれぞれ保有するpackage.jsonに定義されている依存関係がインストールされます。

また、ワークスペース内の各パッケージにアクセスするためのコマンドを以下の部分で定義しています。

// package.json
"scripts": {
"contract": "yarn workspace contract",
"client": "yarn workspace client",
"test": "yarn workspace contract test"
}

これにより、各パッケージのディレクトリへ階層を移動しなくてもプロジェクトのルート直下から以下のようにコマンドを実行することが可能となります(ただし、各パッケージ内にpackage.jsonファイルが存在し、その中にコマンドが定義されていないと実行できません)。

yarn <パッケージ名> <実行したいコマンド>

👏 サンプルプロジェクトを開始する

ここからは、コントラクトの構築を行います。packages/contractディレクトリ下を編集していきます。

スマートコントラクトをすばやくコンパイルし、ローカル環境にてテストを行うために、Hardhat というツールを使用します。

  • Hardhatにより、ローカル環境でイーサリアムネットワークを簡単に起動し、テストネットでイーサリアムを利用できます。

  • 「サーバー」がブロックチェーンであることを除けば、Hardhatはローカルサーバーと同じです。

それでは、Hardhatを使用して、サンプルプロジェクトを作成しましょう。

packages/contractディレクトリに移動し、次のコマンドを実行します。

npx hardhat init

hardhatがターミナル上で立ち上がったら、それぞれの質問を以下のように答えていきます。

・What do you want to do? →「Create a JavaScript project」を選択
・Hardhat project root: →「'Enter'を押す」 (自動で現在いるディレクトリが設定されます。)
・Do you want to add a .gitignore? (Y/n) → 「y」

(例)

$ npx hardhat init

888 888 888 888 888
888 888 888 888 888
888 888 888 888 888
8888888888 8888b. 888d888 .d88888 88888b. 8888b. 888888
888 888 "88b 888P" d88" 888 888 "88b "88b 888
888 888 .d888888 888 888 888 888 888 .d888888 888
888 888 888 888 888 Y88b 888 888 888 888 888 Y88b.
888 888 "Y888888 888 "Y88888 888 888 "Y888888 "Y888

👷 Welcome to Hardhat v2.13.0 👷‍

✔ What do you want to do? · Create a JavaScript project
✔ Hardhat project root: · /ETH-NFT-Collection/packages/contract
✔ Do you want to add a .gitignore? (Y/n) · y

✨ Project created ✨

See the README.md file for some example tasks you can run

Give Hardhat a star on Github if you're enjoying it! 💞✨

https://github.com/NomicFoundation/hardhat

⚠️: 注意

Windows で Git Bash を使用してハードハットをインストールしている場合、このステップ (HH1) でエラーが発生する可能性があります。問題が発生した場合は、WindowsCMD(コマンドプロンプト)を使用して HardHat のインストールを実行してみてください。

この段階で、フォルダー構造は下記のようになっていることを確認してください。

 ETH-NFT-Collection
├── .git/
├── .gitignore
├── LICENSE
├── README.md
├── package.json
├── packages/
│ ├── client/
│ └── contract/
+│ ├── .gitignore
+│ ├── README.md
+│ ├── contracts/
+│ ├── hardhat.config.js
│ ├── package.json
+│ ├── scripts/
+│ └── test/
└── yarn.lock

次に、安全なスマートコントラクトを開発するために使用されるライブラリ OpenZeppelin をインストールします。

packages/contractディレクトリにいることを確認し、以下のコマンドを実行してください。

yarn add --dev @openzeppelin/contracts@4.8.2

OpenZeppelin はイーサリアムネットワーク上で安全なスマートコントラクトを実装するためのフレームワークです。

OpenZeppelinには非常に多くの機能が実装されておりインポートするだけで安全にその機能を使うことができます。

⭐️ 実行する

すべてが機能していることを確認するには、以下を実行します。

npx hardhat compile

次に、以下を実行します。

npx hardhat test

次のように表示されます。

ターミナル上でlsと入力してみて、下記のフォルダーとファイルが表示されていたら成功です。

README.md         cache             hardhat.config.js package.json      test
artifacts contracts node_modules scripts

ここまできたら、フォルダーの中身を整理しましょう。

まず、testの下のファイルLock.jsを削除します。

  1. testフォルダーに移動: cd test

  2. Lock.jsを削除: rm Lock.js

次に、上記の手順を参考にしてcontractsの下のLock.solを削除してください。実際のフォルダは削除しないように注意しましょう。

☀️ Hardhat の機能について

Hardhatは段階的に下記を実行しています。

1. Hardhat は、スマートコントラクトを Solidity からバイトコードにコンパイルしています。

  • バイトコードとは、コンピュータが読み取れるコードの形式のことです。

2. Hardhat は、あなたのコンピュータ上でテスト用の「ローカルイーサリアムネットワーク」を起動しています。

3. Hardhat は、コンパイルされたスマートコントラクトをローカルイーサリアムネットワークに「デプロイ」します。

🙋‍♂️ 質問する

ここまでの作業で何かわからないことがある場合は、Discordの#ethereumで質問をしてください。

ヘルプをするときのフローが円滑になるので、エラーレポートには下記の3点を記載してください ✨

1. 質問が関連しているセクション番号とレッスン番号
2. 何をしようとしていたか
3. エラー文をコピー&ペースト
4. エラー画面のスクリーンショット

次のレッスンに進んで、独自のNFTコントラクトの実装を開始しましょう 🎉