仮想通貨アンテナ

仮想通貨 ブロックチェーン情報

REACT イーサリアム ブロックチェーン

0から作るDapps入門 フロントエンド編 APP.jsを確認

更新日:

APP.jsを確認

dapps-sample-frontend(https://github.com/melonattacker/dapps-sample-frontend)のコードを確認する。

1行目から分からんので。。。

reactってなんだを見て

React の基礎をよんでから進みます。

React の開発環境

React の開発環境

windowsの場合

windowsでReactの環境構築を参照です。
または、
WindowsでReactの環境構築をしてみる

フロントエンド編 APP.jsソース

https://github.com/melonattacker/dapps-sample-frontend

import React, { Component } from "react";
先頭の import ラインで次のように Component メンバーまでインポートすれば、 extends を次のように Component と記述できます。
React はデフォルトメンバーです。一方、Component はそのメンバーなので、 { } が必要です。
import Recorder from "./Recorder.json";
import getWeb3 from "./utils/getWeb3";
import "./App.css";

class App extends Component {
Appクラス = Appコンポーネント(カスタムタグ)
state = { web3: null, accounts: null, contract: null, weight: null, height: null, address: "",
outputWeight: null, outputHeight: null, time: null };
state は(関数内で宣言された変数のように)コンポーネントの内部で制御されます
componentDidMount = async () => {
try {
try {...} のコードが実行されます。
エラーがなければ、catch(err) は無視されます: 実行が try の最後に到達した後、catch を飛び越えます。
エラーが発生した場合、try の実行が停止し、コントロールフローは catch(err) の先頭になります。errorは発生した事象に関する詳細をもつエラーオブジェクトを含んでいます。

コンポーネントのインスタンスが作成されて DOM に挿入されるときに、これらのメソッドが次の順序で呼び出されます。
constructor()
static getDerivedStateFromProps()
render()
componentDidMount()

const web3 = await getWeb3();

const accounts = await web3.eth.getAccounts();
const networkId = await web3.eth.net.getId();
const deployedNetwork = Recorder.networks[networkId];
const instance = new web3.eth.Contract(
Recorder.abi,
deployedNetwork && deployedNetwork.address,
);

this.setState({ web3, accounts, contract: instance });
} catch (error) {
async関数はPromiseを返す関数でしかなく、awaitはPromiseの解決を待つので、catchをそのまま使える
alert(
`Failed to load web3, accounts, or contract. Check console for details.`,
);
console.error(error);
}
};

writeRecord = async() => {
asyncキーワードは、たとえばasync function hoge(){}とすることで、関数hogeがAsync Functionであることを指定します。無名関数や即時関数、ES2015で追加されたArrow Function、class構文中のメソッドにも問題なく付加することができます。
const { accounts, contract, weight, height } = this.state;
const result = await contract.methods.writeData(parseInt(weight), parseInt(height)).send({
from: accounts[0]
});
awaitキーワードは、Async Functionの中でしか使用することができません。
console.log(result);
if(result.status === true) {
alert('記録が完了しました');
}
}

viewRecord = async() => {
const { contract, address } = this.state;
const result = await contract.methods.viewData(address).call();
console.log(result);
const outputWeight = result[0];
const outputHeight = result[1];
const time = this.unixTimeToTime(result[2]);
this.setState({ outputWeight, outputHeight, time });
}

handleChange = name => event => {
this.setState({ [name]: event.target.value });
};

unixTimeToTime = (intTime) => {

const time = Number(intTime);
const y = new Date(time * 1000);
const year = y.getFullYear();
const month = y.getMonth() + 1;
const day = y.getDate();
const hour = ('0' + y.getHours()).slice(-2);
const min = ('0' + y.getMinutes()).slice(-2);
const sec = ('0' + y.getSeconds()).slice(-2);

const Time = year + '-' + month + '-' + day + ' ' + hour + ':' + min + ':' + sec;
return Time;
}

React.Componentのrender()はthis.propsとthis.stateを調べた後React要素などを返しているだけとなります。
render() {
if (!this.state.web3) {
return

Loading Web3, accounts, and contract...

;
}
return (



{this.state.outputWeight?

体重: {this.state.outputWeight}

:

}
{this.state.outputHeight?

身長: {this.state.outputHeight}

:

}
{this.state.time?

時間: {this.state.time}

:

}

);
}
}
export default App;

わからないから REACT学習しないとだめなんだろうな?

ビットコインってなに?

2008年11月、metzdowd.comにナカモトサトシにより投稿された論文Bitcoin:A Peer-to-Peer Electronic Cash Systemで定義された仕様とをもとにビットコイン・コミュニティーで開発が続けられる製造と取引に暗号学を使った通貨のことです。

ビットコイン自体は、フリー・ソフトウエアで、ソフトウェア開発のプラットフォームGitHubに登録すれば、ソースやドキュメント閲覧が可能で、開発に参加も可能です。

ナカモトサトシは、2010年12月まで開発に携わっていましたが、その後姿を消しました。日本名ですが、国籍も含め匿名性が高く身元も不明です。

真偽のほどは、不明ですがSBI社長の北尾氏が、2018年3月期第2四半期 SBIホールディングス(株)決算説明会動画の1:29:20頃)でナカモトサトシと議論を交わしたと発言して話題になりました。

ビットコインの仕組み

ビットコインは、P2P型の公開型分散台帳技術(DLT)によって信頼性を担保され運用されるブロックチェーンで結合された暗号通貨(cryptocurrency)のことです。

ビットコインは、P2Pネットワーク上のサーバー上で同一取引情報を持ちコントロールすることで取引の妥当性のチェックが行われるため、銀行など、特定の管理者がいない非中央集権型の仮想通貨と呼ばれています。

ブロックチェーン


GitHub

ブロックチェーンの動き

マイニング

ビットコインは送信アドレス(Tx)に対するデジタル署名によって保護されており、一定時間(10分)ごとに、すべての取引記録を分散台帳に追加します。

その追加処理には、ネットワーク上の分散取引台帳データと、10分間に発生したすべての取引のデータの整合性を取りながら正確に記録することが必要です。

整合性を取る作業は、膨大な計算量が必要となるため専用のハードウエアの計算能力を使って、誰でもが取引を処理することができます。

この手伝いをしてくれた人(膨大な計算処理を行った人)の中で、結果として追記処理を成功させた人には、その見返りとしてビットコインが支払われます。

この作業をマイニングと呼びます。

マイニングには、ソロマイニングとプールマイニングがあり、個人のPCでも余った演算能力でプールマイニングに参加できます。

ジェネシス・マイニングでのハッシュパワー購入

ジェネシス・マイニングは世界最大の高く信頼されたビットコイン クラウド マイニングのプロバイダーです。ハッシュパワー購入時に,コード(kjx2uz)を使用した人は、購入時に3%の割引になります。

ブロックチェーンエクスプローラー

ブロックチェーンアドレスを入力することで、送金状況(confirmation回数の確認)が行えます。

ブロックチェーンエクスプローラー

ブロックチェーンエクスプローラー(chainFlyer)

ビットコイン価格とチャート表示

-REACT, イーサリアム, ブロックチェーン

Copyright© 仮想通貨アンテナ , 2020 All Rights Reserved.