TECHNOLOGY ETHEREUM

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

悩んでいる人

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

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

本記事の信頼性

  • リアルタイムシステムの研究歴12年.
  • 東大教員の時に,英語でOSの授業.
  • 2012年9月~2013年8月にアメリカのノースカロライナ大学チャペルヒル校コンピュータサイエンス学部2021年の世界大学学術ランキングで20位)で客員研究員として勤務.C言語でリアルタイムLinuxの研究開発
  • プログラミング歴15年以上,習得している言語: C/C++Solidity/Vyper,Java,Python,Ruby,HTML/CSS/JS/PHP,MATLAB,Assembler (x64,ARM).
  • 東大教員の時に,C++言語で開発した「LLVMコンパイラの拡張」,C言語で開発した独自のリアルタイムOS「Mcube Kernel」GitHubにオープンソースとして公開

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

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

イーサリアム Truffle Suite
【イーサリアム】Truffle Suiteを利用したスマートコントラクトの開発環境の構築

こういった悩みにお答えします. こういった私から学べます. 目次1 イーサリアムでTruffle Suite(トリュフスイート)を利用したスマートコントラクトの開発環境の構築2 イーサリアムクライアン ...

続きを見る

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

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

仮想通貨 ウォレット
仮想通貨のハードウェアウォレットとソフトウェアウォレット

こういった悩みにお答えします. 目次1 仮想通貨のハードウェアウォレットとソフトウェアウォレット2 おすすめのハードウェアウォレット2.1 Ledger(レジャー)2.2 Trezor(トレザー)3 ...

続きを見る

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を学ぶためには,以下の記事を読みましょう!

Solidity 学べるサイト
【イーサリアム】無料でプログラミング言語Solidityを学べるおすすめWebサイト7選【入門レベル】

こういった悩みにお答えします. こういった私から学べます. 本記事は,以下の記事を読んでいることを前提とします. 無料でイーサリアムのプログラミング言語Solidityが学べるWebサイト7選を紹介し ...

続きを見る

ブロックチェーンエンジニアになりたいあなたは国内・海外の求人サイトをチェックしましょう!

ブロックチェーンエンジニア 求人サイト
国内・海外のブロックチェーンエンジニアの求人サイト【転職】【Solidity,Vyper】

こういった悩みにお答えします. こういった私が解説していきます. 国内・海外のブロックチェーンエンジニアの求人サイトを紹介します. 具体的には,イーサリアムのスマートコントラクトを記述できるプログラミ ...

続きを見る

-TECHNOLOGY, ETHEREUM
-, , , , , ,