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

Reactとウォレットをセットアップしよう

💻 クライアントを設定する​

このセクションでは、Webサイトの構築を通して、クライアントとスマートコントラクトの連携方法について学びます。

実装は下記をイメージしてください。

  • クライアント＝フロントエンド

  • スマートコントラクト＝バックエンド

それでは、始めましょう 🚀

🏁 Web アプリケーションを起動する​

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

yarn client start

あなたのローカル環境で、Webサイトのフロントエンドが立ち上がりましたか？

例)ローカル環境で表示されているWebサイト

上記のような形でフロントエンドが確認できれば成功です。

これからフロントエンドの表示を確認したい時は、ターミナルに向かい、ETH-NFT-Collectionディレクトリ上で、yarn client startを実行します。これからも必要となる作業ですので、よく覚えておいてください。

ターミナルを閉じるときは、以下のコマンドが使えます ✍️

  • Mac: ctrl + c
  • Windows: ctrl + shift + w

🦊 MetaMask をダウンロードする​

次に、イーサリアムウォレットをダウンロードしましょう。

このプロジェクトではMetaMaskを使用します。

  • こちら からブラウザの拡張機能をダウンロードし、MetaMaskウォレットをあなたのブラウザに設定します。

すでに別のウォレットをお持ちの場合でも、今回はMetaMaskを使用してください。

✍️: MetaMask が必要な理由 ユーザーが、スマートコントラクトを呼び出すとき、イーサリアムアドレスと秘密鍵を備えたウォレットが必要となります。

  • これは、認証作業のようなものです。

🙋‍♂️ 質問する​

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

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

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

MetaMaskのダウンロードが完了したら次のレッスンに進みましょう 🎉