React.js / Next.js

Posted on 2021/12/05, 11:47 AM By admin22

Javascriptというプログラミング言語ほど、その使われた方が多様な言語はないと思っています。
時代とともに変化する要求に使い方をどんどん変化させ、AJaxでGoogleが積極的に使いだし、サーバサイドのnodejsが出現したあたりから急速に進化しだしました。
最近ではリアクティブという性質を生かしたReact.jsなどがとても有名ですが、最初はReactのJSXの独特の記述方法に、かなり抵抗を覚えました。(今でもプログラム初心者がこの構文から入ることに抵抗があります)
しかしそれを取り巻く環境はとても魅力で、最近話題のReact.jsのフレームワークであるNext.jsについて試してみました。

環境) Node v14.17.0, npm v6.14.13 / Windows 10

インストール　(TypeScriptを使用する設定)

(中略)

yarn devで実行してlocalhost:3000にブラウザでアクセスします。テキストエディタでコードを変更するとリアルタイムで表示を反映し、エラーがある場合は、ブラウザに表示します。

デフォルトのページはそのままに、下記、自分のページを追加します。
試したかったことは、JSXよる表示と、JSONデータの取得、ハイパーリンク、外部コンテント呼び出しをコンパクトにまとめました。

pages/mypages/index.tsx

import Header from '../components/header'
import Content from '../components/content'
import useSWR from 'swr'
import Link from 'next/link'
const fetcher = (url: string) => fetch(url).then(res => res.json())

export default function MyPage1() {
	const {data, error} = useSWR('/api/message', fetcher)
	console.log(data)
	if (error) return <div>failed to load</div>
	if (!data) return <div>loading...</div>
	const now = new Date()
	return (
	<>
		<Header title={`My Page 1`}></Header>
		<p>{data.message}</p>
		<Link href={`/`}><button>Top Page</button></Link>
		<Content>Upated {now.getMonth()+1}/{now.getDate()}</Content>
	</>
	)
}

import Header from '../components/header'

import Content from '../components/content'

import useSWR from 'swr'

import Link from 'next/link'

const fetcher = (url: string) => fetch(url).then(res => res.json())

export default function MyPage1() {

const {data, error} = useSWR('/api/message', fetcher)

console.log(data)

if (error) return <div>failed to load</div>

if (!data) return <div>loading...</div>

const now = new Date()

return (

<p>{data.message}</p>

<Content>Upated {now.getMonth()+1}/{now.getDate()}</Content>

</>

)

}

pages/components/component.js

export default function Content({children}) {
	return (
	<>
		<div className="container">{children}</div>
		<hr />
		<footer>©2021 DECODE Ed</footer>
	</>
	)
}

export default function Content({children}) {

return (

<div className="container">{children}</div>

<hr />

</>

)

}

pages/compoments/header.js

export default function Header(props) {
    return (
        <h3>{props.title}</h3>
    )
}

export default function Header(props) {

return (

<h3>{props.title}</h3>

)

}

pages/api/message.ts

import type { NextApiRequest, NextApiResponse } from 'next'
export default function handler(req: NextApiRequest, res: NextApiResponse) {
  res.status(200).json({
    message: "Response Message"
  })
}

import type { NextApiRequest, NextApiResponse } from 'next'

export default function handler(req: NextApiRequest, res: NextApiResponse) {

res.status(200).json({

message: "Response Message"

})

}

表示結果

サーバがダウンするとfailedになり、再起動すると表示が自動的に復活します。
またTypeScriptで開発すると、devでは動いていたものが、yarn build時にエラーチェックが入りエラーがでることがあります。タイプが厳格にチェックされているということがわかります。

今回VSCodeとか使わず、テキストエディタとDOS窓だけで作業しますが、環境がよくできているので、この程度ならストレスなく開発ができます。やはりよく使われるものというものは、どんどん便利になっていくものですね。
ただプロジェクトのファイルサイズがここまでで250MBほどになることには驚きました。Unityなどもそうですが最近はこういう傾向なのでしょう。(環境まるごとパッケージ)
サーバサイドはDockerとか使って開発、デプロイとか、Firebaseのようなサーバレスサービスを利用するとか、開発の高速化とかさらにすすみそうです。

参考)
https://tomosta.jp/article/nextjs-basic/
https://qiita.com/irico/items/d8f0ed7887f3c490ffa1
https://zenn.dev/eitches/articles/2021-0719-api-routes-http-request-type

リアクティブ関連

グラフィック関連

About admin22

Categories: 未分類タグ: Javascript

About admin22

Recent Posts

Tag

Links

Archive