ETHEREUM BUSINESS LIFE TECHNOLOGY

【イーサリアム】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,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 イーサリアムクライアント「OpenEthe ...

続きを見る

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サイト3選

こういった悩みにお答えします. こういった私から学べます. 目次1 無料でイーサリアムのプログラミング言語Solidityが学べるWebサイト3選2 ブロックアカデミー3 CryptoZombies4 ...

続きを見る

-ETHEREUM, BUSINESS, LIFE, TECHNOLOGY
-, , , , , ,