Blockchain code Metaverse VR

Crypto×VR×SmartContract(465)

スポンサーリンク

//tips

//smart contract

フックの使い方を見てきたが、欠点としてはステートの値をずっと保持することはできず、現在のページにおいてのみ値を保持する。そのため別の機会にアクセスした時には情報が消えてしまうことになる。

値を保持する一番簡単な方法はローカルストレージを使用することで、これはjsに搭載されている機能。ローカル環境に値を保管しておくもので、windowオブジェクトのlocalStorageプロパティを扱い、ローカルストレージにアクセスする。

保管先としては、webブラウザの中になる。

import React, { useState } from 'react'

function usePersist(ky, initVal) {
const key = "hooks:" + ky
const value = () => {
try {
const item = window.localStorage.getItem(key)//ローカルからの値の取り出し
return item ?
//値が存在したらjson形式のテキストからオブジェクトを生成し返す
JSON.parse(item) : initVal
} catch (err) {
console.log(err)
return initVal;
}
}
const setValue = (val) => {
try {
setSavedValue(val)
//valの値をjsonテキストに変換しローカルストレージに保管
window.localStorage.setItem(key, JSON.stringify(val))
} catch (err) {
console.log(err)
}
}
const [savedValue, setSavedValue] = useState(value)
//savedValueは値を保存するステート、setValueは値をローカルストレージに保管する
return [savedValue, setValue]
}

export default usePersist

これがベースのコンセプトになるよう。簡単なform入力をテスト。

import React, { useState, useEffect } from 'react'
import './App.css'
import usePersist from './Persist'

function AlertMessage(props) {
const [name, setName] = useState("")
const [mail, setMail] = useState("")
const [age, setAge] = useState(0)
const [mydata, setMydata] = usePersist("mydata", null)

const onChangeName = (e)=> {
setName(e.target.value)
}
const onChangeMail = (e)=> {
setMail(e.target.value)
}
const onChangeAge = (e)=> {
setAge(e.target.value)
}
const onAction = (e)=> {
const data = {
name: name,
mail: mail,
age: age
}
setMydata(data)
}

return <div className="alert alert-primary h5 text-primary">
<h5 className="mb-4">{JSON.stringify(mydata)}</h5>
<div className="form-group">
<label className="h6">Name</label>
<input type="text" onChange={onChangeName}
className="form-control" />
</div>
<div className="form-group">
<label className="h6">Mail</label>
<input type="mail" onChange={onChangeMail}
className="form-control" />
</div>
<div className="form-group">
<label className="h6">Age</label>
<input type="number" onChange={onChangeAge}
className="form-control" />
</div>
<button onClick={onAction}
className="btn btn-primary">
Save it!
</button>
</div>
}

// ベース・コンポーネント
function App() {
return (
<div>
<h1 className="bg-primary text-white display-4 ">React</h1>
<div className="container">
<h4 className="my-3">Hooks sample</h4>
<AlertMessage />
</div>
</div>
)
}

export default App

 

Webブラウザの開発ツールからアプリケーションを選択し、localstorageのlocalhost:3000を確認すると、

{name: "naki", mail: "naki@naki.com", age: "20"}
age: "20"
mail: "naki@naki.com"
name: "naki"

のような形式で表示され、保存されていることがわかる。

const [mydata, setMydata] = usePersist("mydata", null)でmydataに保管した値が代入され、setMydataで値の設定、データ保管はonClickに割り当てたonActionに実行している。

簡単なメモアプリを作成していく。

アプリとして作成する場合にはapp.jsだけではなく、コンポーネントを別のファイルとして作成していきたい。

Index.js:ベーススクリプト
App.js:アプリのベースコンポーネント
Persist.js:usePersistフックスクリプト

Memopage.js:目元フォームをまとめてページ表示するコンポーネント
Memo.js,Item.js:メモ表示とメモの各項目の表示を担当するコンポーネント
Addform.js,findform.js,delform.js:メモの作成・検索・削除フォーム用のコンポーネント

メモに記載するデータは、テキストmessageと作成時間createdとする。この二つを持つオブジェクトとしてメモを用意し、配列を保管して管理する。

import './App.css'
import MemoPage from './memo/MemoPage'

function App() {
return (
<div>
<h1 className="bg-primary text-white display-4 ">React</h1>
<div className="container">
<h4 className="my-3">Memo.</h4>
<MemoPage />
</div>
</div>
)
}

export default App

App.jsにはMemoPageコンポーネントに飛ばすシンプルな内容を記載。index.jsは変更なし。

MemoPage.jsはステートフックを永続化するPersistを読み込み

import usePersist from '../Persist'
import Memo from './Memo';
import AddForm from './AddForm';
import FindForm from './FindForm';
import DelForm from './DelForm';

function MemoPage() {
const [mode, setMode] = usePersist('mode', 'default')

return (
<div>
<h5 className="my-3">mode: {mode}</h5>
<div className="alert alert-primary pb-0">
<AddForm />
<FindForm />
<DelForm />
</div>
<Memo />
</div>
)
}

export default MemoPage

独自フックの右辺と左辺の関係がいまいち把握できていなかったので振り返った。

独自フックの引数は、独自フックの関数機能使用時に渡す値を引数としてとるもので、まずは独自関数の定義パートとそれの使用パートに分かれている。

その使用パートで const [mode, setMode] = usePersist('mode', 'default’)のように引数を受け取り、定義されている関数を実行することになる。

function usePersist(ky, initVal) {
const key = "hooks:" + ky
const value = () => {
try {
const item = window.localStorage.getItem(key)
return item ? JSON.parse(item) : initVal
} catch (err) {
console.log(err)
return initVal;
}
}
const setValue = (val) => {
try {
setSavedValue(val)
window.localStorage.setItem(key, JSON.stringify(val))
} catch (err) {
console.log(err)
}
}
const [savedValue, setSavedValue] = useState(value)

return [savedValue, setValue]
}

気にしておく必要があるのは const [mode, setMode] = usePersist('mode', 'default’)がMemoコンポーネントでも使用されること。

スクリプトを頑張って読み込んでいると、reactを拡張できるnext.jsを使えばもっと簡単にできるよとのこと。早速導入してみる。

npx create-next-app next_app

人気の記事

1

コロナによる需要変化 コロナパンデミックの影響で、人々は外に出られなくなり、自宅で過ごす時間が増えました。 この自粛ムードの中、下記のようなビジネスの需要変化が引き起こされています。 【利用者減少】 ...

2

米国レストランの決済時に毎日お世話になっていた「Square」のビジネスモデルについて本日はふれていきたいと思います。 「Square」とは、ネットにつながったモバイル端末と専用のカードリーダーを用意 ...

3

無料でネットショップを開けるアプリとして多くの人に驚きを与えたBASE株式会社が、2019年10月25日東証マザーズに上場しました。2020年2月時点で90万店を超えるショップを抱えるまでに成長してい ...

4

2011年にサービスを開始してから圧倒的な成長率を誇るインテリア通販サイト 【FLYMEe/フライミー】を皆さんご存じでしょうか。 「自分のイメージするインテリア、本当に欲しいインテリアがどこにあるの ...

5

ナイキのSNKRSが、なぜこれほどまでに人気なのか?調べてみました。 きっかけは米国での友達との会話。彼は自分のシューズをみせて、「これ20万円もしたんだぜ。」と語ってくれました。 あまり靴に興味がな ...

-Blockchain, code, Metaverse, VR
-, ,

Copyright© BUSINESS HACKER , 2022 All Rights Reserved Powered by AFFINGER5.