Blockchain code Metaverse VR

Crypto×VR×SmartContract(466)

スポンサーリンク

//tips

//smart contract

Nextでプロジェクトを作成したので、そちらも確認。

Nextはhtmlを使わず、全てjsで構成される。

ページの表示に関わるpagesフォルダのindex.jsから編集していく。

Npm run dev

を実行しておけば毎度スクリプト変更のたびにコマンド入力しないでも自動的に更新してくれる。

Next.jsの複数ページ保有の特性を確認していく。

独自のリンク遷移機能を持ち、importしておけば

<Link href="/">
<a>&lt;&lt; Back to Index page</a>
</Link>

で対応できる。hrefでリンク先のページアドレスを指定する。ここでは<a>を利用しているが、それ以外でも対応可能。

import Header from './header'
import Link from 'next/link'

export default function Home() {
const title = "Index"

return (
<div>
<Header title={title} />
<h1 className="bg-primary px-3 text-white display-4">
React</h1>
<div className="container">
<h3 className="my-3 text-primary text-center">
{title}</h3>
<div className="card p-3 text-center">
<p>
これは、ページ移動のサンプルです。</p>
<Link href="/other">
<a>Go to Other page &gt;&gt;</a>
</Link>
</div>
</div>
</div>
)
}

複数ページにまたがってベースとなるレイアウトを表示する構成を考える。

Layout、Header、Footer、を組み合わせてレイアウトを作成し、ページ表示を行う助けとする。

Componentsフォルダとして新規作成。

import Head from 'next/head'
import styles from '../styles/Home.module.css'
import Header from './Header'
import Footer from './Footer'

export default function Layout(props) {
return (
<div>
<Head>
<title>{props.title}</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
crossorigin="anonymous"></link>
</Head>
<Header header={props.header} />
<div className="container">
<h3 className="my-3 text-primary text-center">
{props.title}</h3>
{props.children}
</div>
<Footer footer="copyright SYODA-Tuyano." />
</div>
)
}

Layoutをはじめとして、細かなスタイル設定をした形式を作成。

これを利用する形に、pagesのindexとothersを書き換え。

import Layout from '../components/layout'
import Link from 'next/link'

export default function Home() {
return (
<div>
<Layout header="Next.js" title="Top page.">
<div className="alert alert-primary text-center">
<h5 className="mb-4">Welcome to next.js!</h5>
<Link href="./other">
<button className="btn btn-primary">
go to Other &gt;&gt;
</button>
</Link>
</div>
</Layout>
</div>
)
}

 

import Layout from '../components/layout'
import Link from 'next/link'

export default function Other() {
return (
<div>
<Layout header="Next.js" title="Other page.">
<div className="card p-4 text-center">
<h5 className="mb-4">This is Other page...</h5>
<Link href=".">
<button className="btn btn-primary">
&lt;&lt; Back to Top
</button>
</Link>
</div>
</Layout>
</div>
)
}

画像表示も一緒に行う。

Publicの中にimage.jpgを保存。イメージ表示を行うコンポーネントを作成。

export default function MyImage(props) {
let fname = './' + props.fname
let size = props.size + "px"

return (
<img width={size} border="1"
src={fname} />
)
}

これでソースの名前とサイズを属性として追加できるようになっている。ここで./image.jpgとなり、/public/の部分が省略されてしまうことになるが、問題なくpublicのファイル類はサーバー直下にあるように扱われる。なので、localhost:3000/image.jpgとなる。

Webアプリでサーバにアクセスしてデータを取得するにはajaxを使うことになり、その中でもFetchAPIなどを使い対応することになる。

fetch(<アクセスするURL>).then(res=>受信後の処理)

Fetchがajaxの関数で引数にアクセスするURLを指定する。非同期であるためコールバック関数による事後処理が必要になる。

実際にアクセスするためのjsonデータをpublicに保存しておく。

Index.jsを更新してjsonをもとにページ表示。

import Layout from '../components/layout';
import { useEffect, useState } from 'react';

export default function Home() {
const url='./data.json';
const [data,setData]=useState({message:'',data:[]});

//fetchをuseEffectに渡す
useEffect(()=>{
fetch(url)
.then(res=>res.json())
.then(res=>setData(res))
},[])

return (
<div>
<Layout header="Next.js" title="Top page.">
<div className="alert alert-primary text-center">
<h5 className="mb-4">{data.message}</h5>
<table className="table bg-white">
<thead className="table-dark">
<tr><th>Name</th><th>Mail</th><th>Age</th></tr>
</thead>
<tbody>
{data.data.map((value, key)=> (
<tr key={key}>
<th>{value.name}</th>
<td>{value.mail}</td>
<td>{value.age}</td>
</tr>
))}
</tbody>
</table>
</div>
</Layout>
</div>
)
}

Thenメソッドはfetchやthenが返すpromiseオブジェクトに対して使用するもので、処理が終わった後の挙動を予約する。

.then(res=>res.json())では、サーバーからクライアントに送られる情報を管理するresponseオブジェクトを引数に取り、送られてきたデータもここにある。そのデータをjsonメソッドでjson形式のテキストとしてオブジェクト変換している。

.then(res=>setData(res))では、res.json生成されたオブジェクトをsetstateでステートに保管していた。

Dataの中身の表示は少し直感的に分かりにくく、mapメソッドでvalueには取り出した値、keyにはインデックス番号が渡されるようになっている。このインデックス番号を起点に各インデックスの値の格納配列を吐き出させている。

{data.data.map((value, key)=> (
<tr key={key}>
<th>{value.name}</th>
<td>{value.mail}</td>
<td>{value.age}</td>
</tr>

ただ、fetchAPIはページをリロードしないと新しいデータに更新されないという問題があり、それをSWRというnext.jsパッケージで解決できる。

これはネットワーク経由で値を取得する独自フック、これにより自動的に表示も更新される。

人気の記事

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.