第5回に引き続きSolidity入門基礎編を進めていきます。
今回で入門基礎編は最後になります！
今回の内容は、フロントエンドとWeb3.js。web3.jsというライブラリを使ってフロントエンドからコントラクトを実行する流れを学んでいきます。
前回のはこちら。
Solidity入門基礎編【5】 – CryptoZombiesで学習 –
初めての方はこちらから。
Solidity入門基礎編【1】 – CryptoZombiesで学習 –
始めるまえにこちらへアクセスしてください。
https://cryptozombies.io/jp/lesson/6/chapter/1
目次
チャプター 1: Web3.js入門
web3.jsとはざっくりいうと、簡単にイーサリアム上にあるブロックチェーンへアクセスしてコントラクトを実行することができるライブラリ。
テストの内容としてはHTML上にweb.min.jsを読み込むというもの。
ここからダウンロードできました。
https://github.com/ChainSafe/web3.js/tree/1.x/dist
CryptoZombies front-end
チャプター 2: Web3プロバイダ
CryptoZombies front-end
チャプター 3: コントラクトへのアクセス
前回のチャプターで、web3jsの初期化ができ使えるようになりました。
今回のチャプターでは実際にコントラクトへアクセスする方法を学ぶ。
まずフロントエンドからコントラクトへアクセスするには、2つの情報が必要。
1：アクセスしたいコントラクトアドレス
2：ABI（Application Binary Interface）
早速書き方。
var myContract = new web3js.eth.Contract(myABI, myContractAddress);
解説。
new web3js.eth.Contract(ABI（Aplication Binary Interface）, アクセスしたいコントラクトアドレス);
このABIというのはざっくりいうと、コントラクト内にある関数をJSON形式で表したデータのこと。
通常、buildフォルダにコントラクトファイル名.jsonで保存されています。
cryptoZombiesABIはcryptozombies_abi.js内に書かれています。
CryptoZombies front-end
チャプター 4: コントラクトの関数呼び出し
チャプター3でコントラクトへのアクセス方法を学びましたが、チャプター4ではアクセスしたコントラクトの関数を実行する方法を学びます。
関数の呼び出し方法は2種類あります。
call()とsend()です。
違いとして、callはpure・view（読み取り専用関数）につかい、それ以外はsendです。
つまり、ガス代を使わない関数か使う関数かによって呼び出し方が違います。
例をそのまま載せます。
call
myContract.methods.myMethod(123).call()
send
myContract.methods.myMethod(123).send()
CryptoZombies front-end
ちなみに”zombieToOwnerを定義”の部分は、zombiefactory.sol 27行目にある
mapping (uint => address) public zombieToOwner;
を関数化したもの。
コントラクト内でpublicとついた変数はgetter関数になるという決まりらしい。
”getZombiesByOwnerを定義”の部分は、zombiehelper.sol 35行目にある
function getZombiesByOwner(address _owner) external view returns(uint[]) {~~~~~~~~~~~~~~}
を関数化したもの。
チャプター 5: Metamaskとアカウント
今回のチャプターでの目的は常にアカウントの状態をモニタリングして、所有するトークン（ゾンビ）の増減をリアルタイムで表示させたいというもの。
なので100秒ごとにsetIntervalでアカウントへアクセスし続ける。
CryptoZombies front-end
チャプター 6: ゾンビ軍団の表示
今回のチャプターではいよいよ手に入れたゾンビを表示していくといったことを学びます。
CryptoZombies front-end
チャプター 7: トランザクションの送信
今回はsendをしてトランザクションを発生させます。
トランザクションが発生すると、ガス代がかかる、実行者のアドレスが必要になる、処理終了まで時間が掛かる（ガス代次第）
CryptoZombies front-end
チャプター 8: Payable関数の呼び出し
いよりよPayable関数を呼び出します。
大きな特徴としては、sendメソッド内に引数としてvalueが追加されたところです。
コントラクト実行者がいくら分を支払いますよということで、wei（ether）の最小単位で支払います。
CryptoZombies front-end
チャプター 9: Eventのサブスクライブ
ざっくりいうと、フロントエンドでコントラクト内で出力したイベントを呼ぶ方法を学びます。
CryptoZombies front-end
これで一通りの基礎編が終了です。
お疲れさまでした。
今後もスマートコントラクト実装における技術メモを残していきますので、宜しくお願い致します。
実際に開発環境を整えてみませんか？ということでメモを残してあります。よければご覧ください。
Solidityの開発環境を整えてみる（0.8.x）
