TECHNOLOGY ETHEREUM

【イーサリアム】Solidity,Truffle Suite,ReactでWeb3.0アプリケーションの開発環境の構築

2021年10月9日

悩んでいる人

Solidity,Truffle Suite,ReactでWeb3.0アプリケーションの開発環境の構築方法を教えて!

こういった悩みにお答えします.

本記事の信頼性

  • リアルタイムシステムの研究歴12年.
  • 東大教員の時に,英語でOS(Linuxカーネル)の授業.
  • 2012年9月~2013年8月にアメリカのノースカロライナ大学チャペルヒル校(UNC)コンピュータサイエンス学部で客員研究員として勤務.C言語でリアルタイムLinuxの研究開発.
  • プログラミング歴15年以上,習得している言語: C/C++PythonSolidity/Vyper,Java,Ruby,Go,Rust,D,HTML/CSS/JS/PHP,MATLAB,Assembler (x64,ARM).
  • 東大教員の時に,C++言語で開発した「LLVMコンパイラの拡張」,C言語で開発した独自のリアルタイムOS「Mcube Kernel」GitHubにオープンソースとして公開
  • 2020年1月~現在はアメリカのノースカロライナ州チャペルヒルにあるGuarantee Happiness LLCのCTOとしてECサイト開発やWeb/SNSマーケティングの業務.2022年6月~現在はアメリカのノースカロライナ州チャペルヒルにあるJapanese Tar Heel, Inc.のCEO兼CTO.
  • 最近は自然言語処理AIイーサリアムに関する有益な情報発信に従事.
    • (AI全般を含む)自然言語処理AIの論文の日本語訳や,AIチャットボット(ChatGPT,Auto-GPT,Gemini(旧Bard)など)の記事を50本以上執筆.アメリカのサンフランシスコ(広義のシリコンバレー)の会社でプロンプトエンジニア・マネージャー・Quality Assurance(QA)の業務委託の経験あり.
    • (スマートコントラクトのプログラミングを含む)イーサリアムや仮想通貨全般の記事を200本以上執筆.イギリスのロンドンの会社で仮想通貨の英語の記事を日本語に翻訳する業務委託の経験あり.

こういった私から学べます.

国内・海外のブロックチェーンエンジニアのおすすめ求人サイトを知りたいあなたはこちらからどうぞ.

SolidityとTruffle Suiteによるイーサリアムの開発環境を構築していない場合は,以下の記事を参考にして下さい.

本記事では,ソフトウェアウォレットのMetaMaskを利用します.

MetaMaskのインストール方法は,こちらの記事が参考になります.

Web3.0アプリケーションとブロックチェーン

Web3.0アプリケーション(Web3アプリケーション)は,ブロックチェーンのような分散型ネットワークを利用する分散型のWebです.

インターネットのWeb1.0~Web3.0までの歴史は以下のようになります.

これからWeb3.0の時代が本格的に来るかどうか楽しみですね.

Web3.0アプリケーションは,フロントエンド(React.js等)とブロックチェーン(イーサリアム等)の橋渡しをするJavsScriptのライブラリです.

イーサリアムにおけるWeb3.0アプリケーションでは,イーサリアムノードをリモートまたはローカルで操作します.

また,HTTP/HTTPSまたはプロセス間通信(IPC:Inter-Process Communication)を利用してイーサリアムノードに接続するためのJSON-RPCのラッパーとしての側面もあります.

Solidity,Truffle Suite,ReactでWeb3.0アプリケーションの開発環境の構築

それでは,Solidity,Truffle Suite,ReactでWeb3.0アプリケーションの開発環境の構築方法を紹介します.

開発環境の構築は,イーサリアムのテストネット(ブロックチェーン開発のためのテストを行うネットワーク)で行います.

テストネットでは,バグがあったりヒューマンエラーが発生しても本物のイーサリアムを失うわけではないので,安心してどんどん実験しましょう!

step
1
React Truffle Boxのインストール

React Truffle Boxのインストールをインストールします.

まず,新しいディレクトリhello_appを作成して移動します.

以下のコマンドを実行してReactアプリケーションの開発に必要なReact Truffle Boxを展開します.

treeコマンドを実行すると,ファイルやディレクトリ一式が作成されていることがわかります.

step
2
Truffleサーバの起動

Truffleサーバを起動します.

  • 1行目:シェルで「truffle develop」を入力
  • 33行目:truffle(develop)>で「compile」を入力
  • 40行目:truffle(develop)>で「migrate」を入力

以下の取得する値は,実行毎に異なるので注意して下さい.(他の箇所も同様です.)

  • 4~14行目:アカウント(Accounts)
  • 16~26行目:秘密鍵(Secret Keys)
  • 28行目:Secret Recovery Phrase(Mnemonic)

step
3
MetaMaskでアカウントのインポート

MetaMaskでアカウントを以下の手順でインポートします.

MetaMask

MetaMask2

MetaMask3

MetaMask4
Secret Recovery Pheaseはstep 2「Truffleサーバの起動」の28行目の「Mnemonic: pulp effort hedgehog record mass average ask blast travel match toward pipe」から取得

MetaMask5

MetaMask6

step
4
Reactアプリケーションの起動

Reactアプリケーションを起動します.

clientディレクトリに移動し,依存ファイルをインストールして下さい.

インストールが完了したら,Reactアプリケーションを起動します.

以下の手順を実行して下さい.

MetaMask7

MetaMask8

上記の手順でReactアプリケーションを起動すると,以下の「Unhandled Rejection (Error): This contract object doesn't have address set yet, please set an address first.」というエラーが発生してしまいます.

MetaMask9

こちらの記事によると,上記のsrc/App.jsのコード(21~24行目)の後に「instance.options.address = "[my contract' address on kovan]";」を追加すれば良いとのことです.

なので,アカウント(0)のアドレス「0x8d757d47631e23eb3b6ff30ec6ee4c26202af4cb」を追加します.

src/App.jsファイルを修正して再度Reactアプリケーションを起動します.

以下のように「Good to Go!」表示できれば成功です.

MetaMask10

まとめ

Solidity,Truffle Suite,ReactでWeb3.0アプリケーションの開発環境の構築方法を紹介しました.

開発環境の構築手順は複雑ですが,最後までやり遂げましょう!

Solidityを学ぶためには,以下の記事を読みましょう!

国内・海外のブロックチェーンエンジニアのおすすめ求人サイトを知りたいあなたはこちらからどうぞ.

-TECHNOLOGY, ETHEREUM
-, , , , , ,