調子に乗るな、みんな頭がいい

ある程度負けることを認めながらつらつらと書いていきます。Twitterで育ちました。

EncryptMessage.js Create EncryptMessage page

import { Account, Deadline, NetworkType, TransferTransaction, TransactionHttp, PublicAccount } from 'nem2-sdk'

import { Box, Button, Container, TextField, Typography } from '@material-ui/core'

import React, { Component } from 'react'

# 親の顔より見たコンポーネント

class EncryptMessage extends Component {

  constructor(props) {

    super(props)

 

    this.state = {

      input: {

        public_key: '',

        message: '',

      },

    }

  }

# input: という書き方

  handleFormInputChanged(event) {

    this.setState({

      input: {

        ...this.state.input,

        [event.target.name]: event.target.value,

      },

    })

  }

# 公開鍵をもらってくる、秘密鍵を作る、公開鍵で暗号化?

  handleSendMessage() {

    if (this.state.input.public_key.length === 64) {

      try {

        const privateKey = process.env.REACT_APP_PRIVATE_KEY

        const account = Account.createFromPrivateKey(privateKey, NetworkType.MIJIN_TEST)

 

        const RecipientAccount = PublicAccount.createFromPublicKey(this.state.input.public_key, NetworkType.MIJIN_TEST)

 

        const encryptedMessage = account.encryptMessage(this.state.input.message, RecipientAccount)

 

        const transferTransaction = TransferTransaction.create(

          Deadline.create(),

          RecipientAccount.address,

          [],

          encryptedMessage,

          NetworkType.MIJIN_TEST

        )

 

        const signedTransaction = account.sign(transferTransaction, process.env.REACT_APP_NETWORK_GENERATION_HASH)

        const transactionHttp = new TransactionHttp('http://localhost:3000')

 

# この書き方は重要かもしれない

        transactionHttp.announce(signedTransaction).subscribe(x => console.log(x), err => console.error(err))

      } catch (e) {

        console.log(e)

      }

    }

  }

 

  render() {

    return (

      <Container maxWidth="md">

        <Box m={2}>

          <Box p={1}>

            <Typography variant="h4" gutterBottom>

              暗号化メッセージを含むトランザクションの作成

            </Typography>

          </Box>

          <Box p={1}>

            <Typography variant="body1" gutterBottom>

              受け手の公開鍵

            </Typography>

            <TextField

              label="Recipient Public Key"

              name="public_key"

              onChange={this.handleFormInputChanged.bind(this)}

              value={this.state.input.public_key}

              margin="normal"

              fullWidth

            />

          </Box>

          <Box p={1}>

            <Typography variant="body1" gutterBottom>

              メッセージ

            </Typography>

            <TextField

              label="メッセージ"

              name="message"

              onChange={this.handleFormInputChanged.bind(this)}

              value={this.state.input.message}

              margin="normal"

              fullWidth

            />

            <Button variant="contained" color="primary" onClick={this.handleSendMessage.bind(this)}>

              送金

            </Button>

          </Box>

        </Box>

      </Container>

    )

  }

}

 

export default EncryptMessage

Account <!-- Create Account Page --!>

f:id:you_suffer:20211212015941p:plain

 

# モジュールのインポート

import React, { Component } from 'react'

import {

  Box,

  Button,

  Container,

  Paper,

  Table,

  TableBody,

  TableCell,

  TableHead,

  TableRow,

  TextField,

  Typography,

} from '@material-ui/core'

import { AccountHttp, Address } from 'nem2-sdk'

# accountHttp

const accountHttp = new AccountHttp('http://localhost:3000')

# ファンクションコンポーネント

class Account extends Component {

  constructor(props) {

    super(props)

# 三項演算子で判定して、nullだったら'',それ以外はlocalStorageの'address'の値を取得して代入

    const address = localStorage.getItem('address') === null ? '' : JSON.parse(localStorage.getItem('address'))

# 上のインスタンスに初期設定(コンストラクタ)

    this.state = {

      input: {

        address,

      },

      public_key: '',

      mosaic: 0,

      importance: 0,

    }

  }

# 関数の実行

  componentDidMount() {

    if (this.state.input.address.length === 40 || this.state.input.address.length === 46) {

      try {

       # addressの定義

        const address = Address.createFromRawAddress(this.state.input.address)

  # createFromRawAddress(str)はAddressで定義されているはず

        accountHttp.getAccountInfo(address).subscribe(

          accountInfo => {

            this.setState({

   #各種情報はacccountinfoに入っているはず

              public_key: accountInfo.publicKey,

              mosaic: accountInfo.mosaics[0].amount.compact(),

              importance: accountInfo.importance.compact(),

            })

            console.log(accountInfo)

          },

          err => console.error(err)

        )

      } catch (e) {

        console.log(e)

      }

    }

  }

# this = 同じクラスの中で呼び出せる?

  handleFormInputChanged(event) {

# stateにリストを定義する

# 参照:

qiita.com

-----

setState部分の解説

 ...lists, とは

...this.state.listsの部分では今のsetStateのlist配列を展開し、その後ろの
{ title: this.state.title, author: this.state.author }
の部分でフォームに入力されたtitle, authorの値を配列listsの最後に追加します。
...this.state.listsがないと2回目以降のonClickの際に、今までにlists:[]に追加した内容が消えてしまうので注意してください。

 

----

    this.setState({

      input: {

        ...this.state.input,

        [event.target.name]: event.target.value,

      },

    })

 

    localStorage.setItem(event.target.name, JSON.stringify(event.target.value))

  }

 

  handleGetAddressInfo() {

    if (this.state.input.address.length === 40 || this.state.input.address.length === 46) {

      try {

        const address = Address.createFromRawAddress(this.state.input.address)

       # accountInfoの中身を入れる

        accountHttp.getAccountInfo(address).subscribe(

          accountInfo => {

            this.setState({

              public_key: accountInfo.publicKey,

              mosaic: accountInfo.mosaics[0].amount.compact(),

              importance: accountInfo.importance.compact(),

            })

            console.log(accountInfo)

          },

          err => console.error(err)

        )

      } catch (e) {

        console.log(e)

      }

    }

  }

 

  render() {

    return (

      <Container maxWidth="md">

        <Box m={2}>

          <Box p={1}>

            <Typography variant="h4" gutterBottom>

              NEMアカウント情報の取得

            </Typography>

          </Box>

          <Box p={1}>

            <Typography variant="body1" gutterBottom>

              ネムのカタパルトユーザーのアドレスを入力

            </Typography>

 

# bind:入れ子構造の中でthis=インスタンスを参照した際に親クラスのthisを参照できなくなってしまうことを防ぐ。つまり先程の入れ子のケースでは、入れ子になっていない(thisが本来の値を指している)場所でbind(this)とすることで、thisの値が変わってしまうのを防ぐことが出来る。

# 参照:

numb86-tech.hatenablog.com

            <TextField

              label="Address"

              name="address"

              onChange={this.handleFormInputChanged.bind(this)}

              value={this.state.input.address}

              margin="normal"

              styles={{ width: '100%' }}

              fullWidth

            />

            <Button variant="contained" color="primary" onClick={this.handleGetAddressInfo.bind(this)}>

              取得

            </Button>

          </Box>

          <Box p={1}>

            <Paper>

              <Table>

                <TableHead>

                  <TableRow>

                    <TableCell>ラベル</TableCell>

                    <TableCell>値</TableCell>

                  </TableRow>

                </TableHead>

                <TableBody style={{ wordBreak: 'break-all' }}>

                  <TableRow>

                    <TableCell>アドレス</TableCell>

                    <TableCell>{this.state.input.address}</TableCell>

                  </TableRow>

                  <TableRow>

                    <TableCell>公開鍵</TableCell>

                    <TableCell>{this.state.public_key}</TableCell>

                  </TableRow>

                  <TableRow>

                    <TableCell>モザイク</TableCell>

                    <TableCell>{this.state.mosaic}</TableCell>

                  </TableRow>

                  <TableRow>

                    <TableCell>インポータンス</TableCell>

                    <TableCell>{this.state.importance}</TableCell>

                  </TableRow>

                </TableBody>

              </Table>

            </Paper>

          </Box>

        </Box>

      </Container>

    )

  }

}

 

export default Account

Reactアプリケーションのソースコードを読む

github.com

 

別に仮想通貨に興味があるわけではないのだがReactを読みたいのでこちらのソースコードを解読する。

  • 全体の構造

public

-favicon.icon

-index.html

-manifest.json

 

src

-components

--Layout.js

--RouteWithLayout.js

-pages

--Account.js

--EncryptMessage.js

--Home.js

--Monitoring.js

--NewAccount.js

--NewTransaction.js

--NewWallet.js

--SearchTx.js

--Transactions.js

-App.css

-App.js

-App.test.js

-index.css

-index.js

-logo.svg

-serviceWorker.js

 

.gitignore

Readme.MD

package.json

yarnlock

 

  • 取り掛かる順番

おそらくpagesの中にロジックがあると思われる。

それをAppやindexで出力している。

そのためまずpagesのロジックを確認していく。

 

  • 形式

一日一つ程度確認してアップする。

直近の勉強

 

  • React

以下の書籍で勉強していた。

www.amazon.co.jp

 

以下の書籍で勉強していた。

Amazon.co.jp: AWSコンテナ設計・構築[本格]入門 : 株式会社野村総合研究所, 新井雅也, 馬勝淳史, NRIネットコム株式会社, 佐々木拓郎: 本

 

 この辺りの動画を見ていた。

www.youtube.com

 

  • 次やること

qiita.com

 

これを掘って、React初級者になる

 

また、どうせPM(プロジェクトマネージャ、またはプロダクトマネージャ)になると思われるので、

note.com

 

こちらを読んで吸収していこうと思っている。

 

終わり

次タスク変更

  • 次のタスク

Vtuber Twitter botを作ろうと思ったが、Twitter developers APIがなかなか認めてもらえないのでクリティカルパス上の障害となっている。

そのため、今回はこちらを作っていく。先日神社のアプリを作ったときにお世話になった方の次の記事である。

qiita.com

一週間でマスターするCをみてみた

c-lang.sevendays-study.com

 

  • まとめ

自分が前にインターンpythonなどを書いていたこともありなんだかんだで中身が読めるようになっている。しかしpythonで触っていなかったところが2つあった。

再帰

②アドレス

 

関数を定義する前に関数を宣言すれば、関数を使って良い。

どんな処理になっているのかはよくわからないが、こんな感じ

 

def average(x,y):

 

x = 4

y = 3

i = average(x,y)

 

def average(x,y):

       ave= (x + y)/2

       return ave

 

みたいな感じ

 

  • ポインタ

まとめ:ポインタを代入すると同じものになる。(pがあたかもその変数のように振る舞う。)

a = 4

b = 3

*p = 1

 

p = &a ←この瞬間にa と pのアドレスが同じ=同じものになる。特にaが*pになる