Blockchain code Metaverse VR

Crypto×VR×SmartContract(476)

スポンサーリンク

//tips

//smart contract

昨日のother.jsで実験したapi取り込みをindex.jsに反映。

export default function Home({mydata}) {


const heroPost = mydata.status
console.log(mydata)
console.log(mydata.results)
const obj=Object.values(mydata.results[0])

return (

<>
<p>{mydata.results[0].address1}</p>

<p>{obj}</p>
</>

export async function getServerSideProps() {
//郵便api http://zipcloud.ibsnet.co.jp/doc/api
const url = 'https://zipcloud.ibsnet.co.jp/api/search?zipcode=7830060'

const res = await fetch(url)
const mydata = await res.json()

// Pass data to the page via props
return { props: { mydata } }

}

こちらの内容で無事に郵便apiからデータを引っ張ることに成功。

Next.jsではビルドの段階でHTMLファイルを生成するが、これは外部とのデータのやり取りがないケースのみでAPIからデータを持ってくるなどの外部とのデータのやり取りがあるケースだとgetStaticPropsやgetServerSidePropsを使う必要がある。

今回getServerSidePropsを使っているのはマイページやダッシュボードなのでリクエストごとにレンダリングが必要となるため。

現在のNextの主流はSSRからSSGに変わってきており、認証が必要なページ(SEOを気にしないページ)ではSSR時にサーバサイドで認証が必要なAPIコールをするのをやめる動きがある。

そうするとクライアントサイドでのAPIコールが重要になるため、SWRによるサポートを行なっているよう。認証が必要なページではSSG+SWRを利用する流れか。

Apiのブラウザでの取得とサーバでの取得の違いが何かよくわからず。完成されたURIエンドポイントへのget処理などをどこでやっているかということなのか。

色々調べてみると、SWRを使用している箇所は、レンダリングがClient Side Renderingとなるよう。Client Side Renderingとは、ブラウザ上でJavaScriptを実行し、ページ遷移を高速で行うレンダリングのこと。

Next.jsを使用する際でも、npmでinstallしたモジュールのいくつかにそのような機能が組み込まれているという理解でいいのかな。

サーバサイドで情報取得されるというgetServerSidePropsの更新トリガーは、ページ遷移により発動。逆に言えば、遷移しない更新されない。

ルーティングが起こらないと更新しないので、同一ページデータをリロードするためには同一ページへのルーティングを発生させる必要がある。

参考:
https://zenn.dev/sora_kumo/articles/4498ad794002c3

現状での getServerSideProps() 採用の選択は悪くないものなのではないかと思う。

また、Material UIをnext.jsで使えるという話も聞いたので、そちらでカードも作成してみようかと思う。

npm install @material-ui/core
npm install @mui/material @emotion/react @emotion/styled

上記のものをインストールして下記を再現。

https://mui.com/components/cards/

import * as React from 'react';
import Box from '@mui/material/Box';
import Card from '@mui/material/Card';
import CardActions from '@mui/material/CardActions';
import CardContent from '@mui/material/CardContent';
import Button from '@mui/material/Button';
import Typography from '@mui/material/Typography';
import CardMedia from '@mui/material/CardMedia';

export default function BasicCard() {
return (
<Card variant="outlined" sx={{ maxWidth: 275 }}>
<CardMedia
component="img"
height="140"
image="image.jpg"
alt="cat"
/>

<CardContent>
<Typography sx={{ fontSize: 14 }} color="text.secondary" gutterBottom>
Word of the Day
</Typography>
<Typography variant="h5" component="div">
hi
</Typography>

</CardContent>
<CardActions>
<Button size="small">Learn More</Button>
</CardActions>
</Card>
);
}

これをcomponentsに組み込み、index.jsにimport。かなり綺麗なcardが表示できた。こういうのを求めていた。

時々見かけるTypeScriptとは次世代のJavaScriptの最有力候補。jsがサーバ側で使われるなど複雑化しすぎたため、本来のjsの役割をシンプルに表せるようにしたものがTypeScriptとのこと。JavaScriptができることはTypeScriptでも実現可能。JavaScriptは動的型付け、TypeScriptは静的型付けなどの違いもあり、習得には幾分学習コストがかかる。

Apiの続き。簡単な郵便番号のapiを使ったので今度はauth機能も持ったエンドポイントから取得するタイプのtwitter apiに挑戦する。

色々調べているとNextAuthというものが利用できそう。

参考:
https://zenn.dev/thim/articles/7e3fc6a67de764daf50a

//関数と関数式の違い

下記の違いは関数記載の前にその関数を呼び出すことができるかどうか。

logA();//ok

Function logA(){
Console.log(“A”);
}
……….
logA();//NG

Const logA = function(){
Console.log(“A”);
}

//関数はオブジェクトを引数に取れる

Const defaultPerson={
Name:{
First:”shane”,
Last:”Mc”
},
Activity:””skiing
}

function logActivity(person=defaultPerson){
return `${prson.name.first} loves ${prson.activity}`
}

人気の記事

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.