【続き】フロントエンドをつくって、コントラクトを動かしてみよう😎🦍

どうも、Mejikaです！

ではさっそく

フロントエンドを作成していきます！

まずは

　msg.js

から作成します。

…とその前に、

web3 ライブラリをインストールしましょう。

web3 は、ホームページをつなぐアダプターのようなものです

npm installl web3 でインストールします。

ではコードを作成していきましょう。

中身はこちらになります。

import web3 from './web3';

const address = 'コントラクトアドレス';
const abi = [コントラクトをsolc でコンパイルした時に生成される ABI をコピペ];

export default new web3.eth.Contract(abi, address);

コントラクトを動作させるために

　・コントラクトアドレス

　・インターフェース（ABI）

を指定します。

インターフェース（ABI）は

コントラクトをコンパイルしたときに

console.logで出てきたアレですｗ

アレ↓

貼り付けた後は

このような感じです！

ちなみに

このままだとABIの部分が横になが～いので

このように区切って改行するとすっきりします。

さて、これで

ホームページからコントラクトを動作させるための

　”橋わたし”

の設定ができました！

次に、web3.js を作成します。

　msg.js が ”橋渡し” のための「橋の本体」だとすると、

　web3.js は、”作った橋を両岸に固定” するようなイメージです。

中身はこちらになります。

import Web3 from "web3";

window.ethereum.request({ method: "eth_requestAccounts" });

const web3 = new Web3(window.ethereum);

export default web3;

こちらは、コントラクトのテストでもやりました。

web3 provider を設定するため

接続先のブロックチェーンを指定して、

web3 インスタンスを new しますｗｗｗ

さて、だんだんと準備が整ってきました😀

次に、本丸の index.js と App.js を作成していきましょう！

App.js は、Javascript の Class Component として扱います。　

そのため、index.js は以下のようになります。

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

まずは、以下をインポートします。

　・React　　　　　←　react のライブラリ

　・ReactDOM　　　←　React の Document Object Model

　・index.css 　　　←　ページの見た目（CSS）

　・App.js 　　　　　←　メインのコンテンツ

　・reportWebVitals　←　ホームページの健康状態モニターｗ　

中身の部分は、このような感じです。

　　＾＾＾＾＾＾＾

・DOM については、コチラの説明が分かりやすかったです。

　　ホームページのツリー（tree）という構造で表します。

　　tree は、英語で木　の意味なので、幹、枝、葉っぱのように

　　ホームページのコンテンツを分けるイメージですね。

　　root は、英語で　根っこ　という意味です。

　　なので、

　　　　”DOMという木の根っこ（root）に App という中身が取り込まれる”　

　　という感じですねｗ

　＾＾＾＾＾

　reportWebVitals は、

　ホームページの健康状態を確認するようなものです

　コードの中身は以下です。

const reportWebVitals = onPerfEntry => {
  if (onPerfEntry && onPerfEntry instanceof Function) {
    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
      getCLS(onPerfEntry);
      getFID(onPerfEntry);
      getFCP(onPerfEntry);
      getLCP(onPerfEntry);
      getTTFB(onPerfEntry);
    });
  }
};

export default reportWebVitals;

　たとえるなら、

　看護師さんがつきっきりで、血圧を随時チェックするイメージでしょうかｗ

　例えば CLSとかFIDは、ページの読み込み速度です。

　　こちらが参考になります。

では、コンテンツの中身 App.js を書いていきましょう。　

まずは、

　・ページにアクセスすると、メタマスクが接続を要求してくる

　・接続したメタマスクのアドレスと最新のメッセージが表示される

というところまでです。

コードはこのような感じです。

事前に以下のメッセージを刻み込んである状態です。

　ぐっもー忍！

import React, { Component } from 'react';
import "./App.css";
import web3 from './web3';
import msg from './msg';

class App extends Component {
  state = {
    manager: '',
    message: '',
    statement: '',
  };

  async componentDidMount() {
    const message = await msg.methods.getMessage().call();
    const accounts = await web3.eth.getAccounts();
    const manager = accounts[0];

    this.setState({ message, manager });
  }

    render() {
      return (
        <div>
          <h1>message contract</h1>
          <p>Hi! {this.state.manager} !
          Current engraved message is {this.state.message}
          </p>

        </div>
      );
    }
  }

  export default App;

まずは、必要なものをインポートします。

次に、ホームページにアクセスしたときに

最初に（デフォルト）の表示させるなかみを決めます。

　＾＾＾＾＾＾

　state は、英語で　状態という意味です。

　つまり、データ（情報）がセット（はめこむ）されて、

　状態（表示内容）が作られる、ということですね。

　setState を使うと

　いったんはめこんだ情報が更新されたら、

　再度レンダリングしたときに、表示させる内容も合わせて更新されます。

　レンダリングとは、何らかのデータをもとに情報を表示する、ということです。

　render は、英語で　与える　という意味ですね。

　　コチラの説明が分かりやすいです！

　＾＾＾＾＾＾＾　

　ちなみに、ComponentDidmount のことを

　ライフサイクルメッセージ

　と呼びます。

　　コチラの説明が分かりやすかったです。　

　ライフサイクルは、lifecycle 英語で、生まれてから死ぬまで　のことです。

　　ホームページが呼び出されて、表示されて、途中で更新されつつ、最後に閉じられる

　というイメージですね。

　＾＾＾＾＾＾＾

あとは、このように HTML と同様に書きます。　

変数は、｛this.state. *****｝のように書きます。

では、さっそく表示させてみましょう！

　npm run start で

ローカルホスト上にページを表示させてみます。

出来ましたね！

最後は、メッセージの書き換えをしてみましょう

Javascript の onSubmit を使います。

これは、「送信」ボタンを押すと何かしらが動く、

というようなものです。

submit は、英語で提出する　などの意味ですね。

コードを追記します。

赤字の部分ですｗ

import React, { Component } from 'react';
import "./App.css";
import web3 from './web3';
import msg from './msg';

class App extends Component {
  state = {
    manager: '',
    message: '',
    statement: '',
  };

  async componentDidMount() {
    const message = await msg.methods.getMessage().call();
    const accounts = await web3.eth.getAccounts();
    const manager = accounts[0];

    this.setState({ message, manager });
  }

  onSubmit = async(event) => {

    event.preventDefault();

    const accounts = await web3.eth.getAccounts();

    this.setState({ statement: 'Waiting on transaction success...' });

    await msg.methods.setMessage(this.state.newMessage).send({
      from: accounts[0]
    });

    this.setState({ statement: 'You have been entered!' });
  };

    render() {
      return (
        <div>
          <h1>message contract</h1>
          <p>Hi! {this.state.manager} !
          Current engraved message is {this.state.message}
          </p>

          <hr />

          <form onSubmit={this.onSubmit}>
            <h4>Want to engrave your message?</h4>
            <div>
              <label>message to enter</label>
              <input
                value={this.state.newMessage}
                onChange={event => this.setState({ newMessage: event.target.value })}
              />
            </div>
            <button>Enter to shange message</button>
          </form>

          <hr />

          <h1>{this.state.statement}</h1>
        </div>
      );
    }
  }

  export default App;

中身はこのような感じです。