Zenn
Closed12

Next.js学習日記

Next.js
TypeScript
Node.js
TaroTaro

公式リファレンスに従って

yarn create next-app --typescript

What is your project named?と聞かれたので、next-playgroundとしてEnter。
色々インストールされて、

Success! Created next-playground at /Users/taro/Desktop/next-playground

✨  Done in 103.30s.
TaroTaro

最初に書き忘れたけど、Node.jsのバージョンは16.16.0、Next.jsのバージョンは12.2.3です。

cd next-playgroundしてlsしたら

README.md      next.config.js package.json   public         tsconfig.json
next-env.d.ts  node_modules   pages          styles         yarn.lock

って感じで色々作られている（当たり前）。とりあえずlocalで起動する。yarn devすると、

yarn run v1.22.10
$ next dev
ready - started server on 0.0.0.0:3000, url: http://localhost:3000
info  - SWC minify release candidate enabled. https://nextjs.link/swcmin
event - compiled client and server successfully in 2.7s (169 modules)

ここのメッセージはNuxt.jsと違ってそっけない。
写真は省略するが、ブラウザでそれっぽいものが表示できた。

TaroTaro

NextオリジナルのコンポーネントでLink、Imageなどがある。LinkはNuxtでいうNuxtLink。ただし行き先はtoではなくhrefで指定。Imageは、publicフォルダに置いた画像をいい感じに最適化して表示するコンポーネント。srcにpublicフォルダからの相対パスを渡す。

TaroTaro

装飾用に色々追加

yarn add -D tailwindcss autoprefixer postcss sass
TaroTaro

props

関数の引数に渡すだけ。

const Hoge = ({ text }) => {
  return (
    <div>{text}</div>
  )
}

繰り返し

mapを使う。

const Hoge = () => {
  const people = ['Alice', 'Bob', 'Charlie']
  return (
    <ul>
      {people.map(person => <li key={person}>{person}</li>)}
    </ul>
  )
}

子要素

childrenというpropsが予約されている。

const Child = ({ children }) => {
  return <div>{children}</div>
}
const Parent = () => {
  return <Child>hogehoge</Child>
}
TaroTaro

useState

コンポーネントが何らかの情報を保持して、変更されるたびにレンダーし直す。

import { useState } from 'react'
const Hoge = () => {
  const [people, setPeople] = useState(['Alice', 'Bob'])
  const add = () => setPeople(people.concat('Charlie'))
  return (
    <div onClick={add}>click me!</div>
    <ul>
      {people.map((person, i) => <li key={i}>{person}</li>)}
    </ul>
  )
}
TaroTaro

setPeopleは古い値を新しい値でまるっと置換するらしい。デカいデータをそのまま突っ込んだりすると重くなったりするんだろうか？わからん。

TaroTaro

useEffect

コンポーネントが更新された直後や、消える直前に実行される。

const [count, setCount] = useState(0)
useEffect(() => {
  const id = window.setInterval(() => {
    setCount(count + 1)
  }, 5000)
  return () => window.clearInterval(id)
})

第１引数に実行したい関数を渡す。影響を「お掃除」する関数をreturnする。
第２引数は省略可能。監視したい変数を配列にして渡すと、その中身が書きかわった場合だけ実行される。

TaroTaro

第２引数に空っぽの配列[]を渡すと、再レンダー時には実行せず、「最初に表示する時1回実行し、最後に消える時cleanupする」みたいな挙動にできる（参考）。

TaroTaro

フォーム入力を受け取る

Vueでいうところのv-model的なやつはないので、原始的にやる。

const SimpleForm = () => {
  const [text, setText] = useState('')
  const handleChange: ChangeEventHandler<HTMLInputElement> = (e) => {
    setText(e.target.value)
  }
  return (
    <div className={styles.container}>
      <form action="">
        <input type="text" name="aaa" id="aaa" onChange={handleChange} />
      </form>
      <span>What you wrote: {text}</span>
    </div>
  )
}
TaroTaro

useRef

コンポーネントに何か値を保持させたい、でも更新の都度再レンダーはさせたくない、という時につかう（参考）。

TaroTaro

Qiitaとかで見かける具体例はHTMLエレメントを突っ込んでるものが多いが、別にそうじゃなくてもいい、JavaScriptの値ならなんでもいいらしい。
Nuxt.js Composition apiのrefとよく似ている。

このスクラップは2022/09/08にクローズされました