Blockchain code Metaverse VR

Crypto×VR×SmartContract(491)

スポンサーリンク

//tips

//smart contract

昨日作成してみたmuiの表示に_app.jsや_document.jsの機能を追加しながら、どうなっているのかを確認していく。

_appは複数ページに同様な表示を反映させていくのに役立つことはわかるが、その他がどのように影響を与えるのかがわかっていない。

この点をまず探る必要がある。

https://dev.to/hajhosein/nextjs-mui-v5-tutorial-2k35

theme部分はlightモードとdarkモードの切り替えなどで、わざわざコンポーネントにしなくて良さそうに感じてしまうが、これはThemeProvider componentに渡し、構造的にみやすいプロジェクトにしたいため別途作成しているよう。

later we need to pass a theme to ThemeProvider component of MUI and the reason that I am put everything in a separate file is that I want to structure files and folders properly from the beginning.

最新版では別途cache コンポーネントを作成する必要があるよう。

need to create a cache for your styles because you are using Next.js and this will help the app to figure out what style to apply.

_app.js のなかにこれらのコンポーネントをimportし、表示の枠組みを作れる。

import { CacheProvider } from '@emotion/react';
import { ThemeProvider, CssBaseline } from '@mui/material';

return (
<CacheProvider value={emotionCache}>
<ThemeProvider theme={lightTheme}>
<CssBaseline />
<Component {...pageProps} />

_document.jsを作成するのはgetInitialPropsの受け渡したのためのようで、これはemotion機能を使用するために必要になったよう。

Emotion は生産性と柔軟性の高い CSS in JS ライブラリでスクリプトの中にcssを書きやすくしてくれるものらしい。

// `getInitialProps` belongs to `_document` (instead of `_app`),
// it's compatible with static-site generation (SSG).

// You can consider sharing the same emotion cache between all the SSR requests to speed up performance.
// However, be aware that it can have global side effects.

// This is important. It prevents emotion to render invalid HTML.
// See https://github.com/mui-org/material-ui/issues/26561#issuecomment-855286153

参考:

https://qiita.com/Sotq_17/items/91760691081db50b1f03

https://qiita.com/__sakito__/items/d240840eef7123f62acf

今のところあまり必要性を感じないのだが、emotionを使用するために刷新した方がいいのだろうか。

コードで全体像を確認していく。

import * as React from 'react';
import Container from '@mui/material/Container';
import Typography from '@mui/material/Typography';
import Box from '@mui/material/Box';
import ProTip from '../src/ProTip';
import Link from '../src/Link';
import Copyright from '../src/Copyright';

export default function Index() {
return (
<Container maxWidth="sm">

//bootstrapではサイズの説明があったが記載がなかったので調べていたらやっと見つかった。
//960以下600以上と認識

The Ultimate Guide to the Material-UI Theme Object: Breakpoints, Overrides, Shadows, Typography, and More

<Box sx={{ my: 4 }}>

//sxのなかにcssルールを記載することができる。
//myはmargin-top, margin-bottomにマージン設定

<Typography variant="h4" component="h1" gutterBottom>
Next.js example
</Typography>

<Link href="/about" color="secondary">
Go to the about page
</Link>
///aboutへの遷移
//srcフォルダの中にlinkの仕組みは格納されている
//下記も同じく

<ProTip />
<Copyright />
</Box>
</Container>
);
}

Index.jsの中身はシンプル。pageにはルート機能があるのになぜリンクが必要なのかはいまいちわからない。クライアントサイドの処理だから全部クライアント側で完結させられるようにするからだろうか。

イベントで表示させるのはダメなのだろうか。

ここは確認したいところ。

_app.jsの中身を確認。

import * as React from 'react';
import PropTypes from 'prop-types';

PropTypesとは、コンポーネントに渡ってきた引数をチェックするモジュール。PropsTypesでコンポーネントに渡ってきた引数をチェックできる。

例えばこのように

Comp.propTypes = {
//文字列で必須引数
message: PropTypes.string.isRequired,
}

他にも、PropTypes.element を使うことで、コンポーネントに単一の子要素しか渡せないことを指定することができる。

React.PropTypesがReact v15.5 において別パッケージに移動したため、代わりに prop-types ライブラリを利用することになっている。

TypeScript を使用すれば props の型定義ができるため、こういった問題に対応できので、JavaScript特有の問題とのこと。

import Head from 'next/head';
import { ThemeProvider } from '@mui/material/styles';
import CssBaseline from '@mui/material/CssBaseline';
import { CacheProvider } from '@emotion/react';

ここはemotionmの中のcacheの位置付けを理解する必要があった。cssを挿入することは変わらない。

参考:

https://theme-ui.com/guides/custom-cache-provider/

https://emotion.sh/docs/@emotion/cache

 

import theme from '../src/theme';
import createEmotionCache from '../src/createEmotionCache';

// Client-side cache, shared for the whole session of the user in the browser.
const clientSideEmotionCache = createEmotionCache();

export default function MyApp(props) {
const { Component, emotionCache = clientSideEmotionCache, pageProps } = props;

これは分割代入なのでpropsとして引き渡されるものの中にComponent, clientSideEmotionCache, pageProps が含まれているということ。

このpropsが渡されるのはページ間遷移が発生したタイミング。

//参考:

https://qiita.com/tetsutaroendo/items/c7171286137d963cdecf

そもそもこの時のpropsとはなんぞやと調べていてやっと辿り着いたのが、componentは現在のpageのコンポーネントまたは次に表示されるコンポーネントを受け取り、pagepropsはページが最初に読み込まれた際に初めに挿入されるデータでこれはgetInitialPropsなどで実現される。

つまり、最初のindex.jsも読み込まれ、componentにIndex()コンポーネントの内容が入れられることになる。

This is the default App component that you get and it is used by Next.Js to initialize pages. You could imagine it as an entry point of all your pages component, which rendered within this 'App' container. This App component receives two parameters which are 'Component' and 'pageProps'. 'Component' is basically the current active page component, and whenever the route of our app is changed, 'Component' will be updated to the new page component. 'pageProps' is the initial data that we inject into pages when the page is first loaded. This can be done by calling 'getInitialProps'on the custom App component.

参考:

https://dev.to/ohdylan/next-js-series-4-what-is-the-custom-app-component-in-next-js-and-how-should-we-use-it-457j

return (
<CacheProvider value={emotionCache}>

これは_document.js のなかのMyDocument.getInitialProps = async (ctx) => {で記載されている。

<Head>
<meta name="viewport" content="initial-scale=1, width=device-width" />

Viewportの中身も確認する。

https://qiita.com/ryounagaoka/items/045b2808a5ed43f96607

HTML:viewport の正しい書き方

</Head>
<ThemeProvider theme={theme}>
{/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
<CssBaseline />
<Component {...pageProps} />
</ThemeProvider>
</CacheProvider>
);
}

MyApp.propTypes = {
Component: PropTypes.elementType.isRequired,
emotionCache: PropTypes.object,
pageProps: PropTypes.object.isRequired,
};

人気の記事

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.