Zenn
Open10

ざつめも

Next.js
React
TypeScript
koukou

NotionやZennに記事としてまとめておくほどでもないようなものをメモしていく予定📝

koukou

ファイル名の一括置換方法

JSメインで作っているプロジェクトをTSに置き換えるため、.js(.jsx)拡張子を一括で.ts(.tsx)に置き換える方法を調べていた。そのメモ。

  1. Macでrenameコマンドを使えるようにする（brew install rename）
  2. 置換したい対象があるディレクトリでrenameコマンドを以下のように実行する
# .js を .ts に
find . -type f | xargs rename -v "s/\.js$/.ts/" *.js

# .jsx を .tsx に
find . -type f | xargs rename -v "s/\.jsx$/.tsx/" *.jsx

補足

  • findコマンドが対象ディレクトリ以下のファイルを再帰的に取得（.が対象ディレクトリ(指定しなくてもデフォルトでカレントディレクトリになるみたい)。今回はカレントディレクトリを指定。-type fは対象をファイルに指定）→ 要約するとfind . -type fで 「カレントディレクトリ以下にあるファイル名を全て抽出」 という意味
  • 上のfindコマンドで取得した1つ1つのファイル(標準入力)に対して、|（パイプ）の右側でリネーム処理を実行する

悩み事

  • .jsと.jsxを、一括で.tsと.tsxに変えるのはどうやるといいんだろう？（現状2回に分けて置換してる）。2つを一気に指定する正規表現の書き方がわからない。

参考

koukou

Next.jsプロジェクトのTS化手順

ざっくりと。

ちなみにここでの「TS化」とは、もともとJSプロジェクトとして進めていたものを途中からTSに置き換えるという意味。

# tsconfig.jsonの作成
touch tsconfig.json

# TypeScriptのパッケージをインストール
npm install --save-dev typescript @types/react @types/node

# ローカル環境起動
npm run dev （ → tsconfig.jsonの中身ができる）

# 色々調整
# tsconfig.jsonの "include" を「 "src/**/*.ts" 」にする（src内にまとめている場合）
# `jsconfig.json`の設定を`tsconfig.json`に追記して、`jsconfig.json`を削除
find . -type f | xargs rename -v "s/\.js$/.ts/" *.js      # 「.js」 を「.ts」にする
find . -type f | xargs rename -v "s/\.jsx$/.tsx/" *.jsx   # 「.jsx」を 「.tsx」にする

tsconfig.json

空のtsconfig.jsonがあれば、npm run dev時にNext.jsが良い感じに埋めてくれる。
あえて設定を追加するなら以下のもの？

"baseUrl": ".",         # importする時に絶対パスでインポートできるやつ？
"paths": {              # `./src`を`@`として扱う時に使うやつかな？
   "@/*": ["./src/*"]
}


参考


お手軽 Next.js × TypeScript

上記のようにJSプロジェクトをあとからTS化するのではなく、そもそもTypeScriptでNext.jsプロジェクトを作成するときの手順備忘録。

TypeScriptでNext.jsプロジェクトを作成

# プロジェクト作成
yarn create next-app --typescript
What is your project named? … {任意のプロジェクト名}  # 途中でプロジェクト名を聞かれるので入力する

/pagesなどを/src配下に移動

# srcディレクトリを作成後、/pages等を移動
mkdir src && mv pages src/pages & mv styles src/styles

tsconfig.json

tsconfig.jsonの"compilerOptions": { ... }の部分に以下を追加設定（お好み）

{
  "compilerOptions": {
    ...
    "baseUrl": ".",         # importする時に絶対パスでインポートできるやつ？
    "paths": {              # `./src`を`@`として扱う時に使うやつかな？
        "@/*": ["./src/*"]
    }
  }
}

yarn devの設定変更

これ本当に神機能。同一IPアドレス内（同一ネットワーク内）であれば、スマホで同じURLにアクセスするとWebで見ているものと同じものがスマホで見られるようになる（しかもホットリロードまで正常に動作する！神🏋️‍♂️。詳しくは下の参考記事参照）

package.json
{
  ...
  "scripts": {
    "dev": "next dev",
    "dev-ip": "next dev --hostname 0.0.0.0",
  },
  ...
}


参考

koukou

Jest / testing-library導入

ざっくりと。

# testing-libraryの導入
npm i -D @testing-library/react
yarn add -D @testing-library/react


拡張マッチャー（カスタムマッチャー）の導入

jest-dom（github）

# @testing-library/jest-domのインストール
npm i -D @testing-library/jest-dom @types/testing-library__jest-dom
yarn add -D @testing-library/jest-dom @types/testing-library__jest-dom

# ルート直下に`jest-setup.js`を作成（名前は任意）。そのファイル内に以下をコピペ
import '@testing-library/jest-dom'

# `jest.config.js`に以下の設定を追加
module.exports = {
  （中略）
  setupFilesAfterEnv: ['<rootDir>/jest-setup.js'],
}

# `tsconfig.json`の`include`内に以下の設定を追加
"include": [
  （中略）
  "./jest-setup.js"
],

react-hooks-testing-library（github）

# @testing-library/react-hooksの導入
npm install --save-dev @testing-library/react-hooks

user-event（github）

# @testing-library/user-eventの導入
npm install --save-dev @testing-library/user-event @testing-library/dom


参考

koukou

frourio入門

初期の環境構築手順めも。

新規プロジェクトの作成

yarn create frourio-app

新規プロジェクト作成時にlocalhost:3000でfrourioの初期設定画面が開くので、お好みで設定。
今回はDBにPostgreSQLを使うのでDBはPostgreSQLを選択。

  • Server engine : Fastify (5x faster)
  • Client framework : Next.js (React)
  • Building mode : Static (export)
  • HTTP client of aspida : axios
  • React Hooks for data fetching : SWR
  • Daemon process manager : None
  • O/R mapping tool : Prisma (recommended)
  • Database type of Prisma : PostgreSQL
  • Skip DB connection checks : No
  • Testing framework : Jest
  • Package manager : Yarn
  • CI config : None
  • API server hosting : None
  • Static hosting service : Vercel

Next.js & Prismaのアップデート（参考）

# フロントエンド
yarn add next@latest
yarn add @prisma/client@latest

# バックエンド
yarn add @prisma/client@latest
yarn add -D prisma@latest

おまけ（Chakra UIを入れる）

基本的には2番の「2. Provider Setup」までやればOK（公式）

おまけ（PrismaClientの共通化）

new PrismaClientを各service層ごとに定義すると制限にかかりやすくなってしまうらしいので共通化しましょうとのこと（参考）

おまけ（Recoilを入れる）（公式）

yarn add recoil
pages/_app.tsx
import { RecoilRoot } from 'recoil'

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <RecoilRoot>
      <Component {...pageProps} />
    </RecoilRoot>
  )
}

export default MyApp


参考

koukou

Docker × PostgreSQL

やること

  • Dockerfileの用意（イメージの作成）
  • docker-compose.ymlの用意（起動など）

Dockerfileの作成

Dockerfile
# 元にするイメージの指定
FROM postgres:14-alpine

# タイムゾーンの設定
ENV TZ Asia/Tokyo

# 言語の設定
ENV LANG ja_JP.UTF-8
ENV LANGUAGE ja_JP:ja
ENV LC_ALL ja_JP.UTF-8

-alpineのほうがdockerイメージのサイズが小さいらしい。

docker-compose.ymlの作成

docker-compose.yml
version: '3'
services:
  db:
    # `build .`は、同階層のDockerfileを読み込むという意味
    # postgresのイメージを直接指定する場合は、代わりに`image: postgres:14-alpine`とする
    build: .
    ports:
      - 5432:5432
    environment:
      POSTGRES_DB: app-db
      POSTGRES_USER: root
      POSTGRES_PASSWORD: root

起動はdocker-compose up -d、停止はdocker-compose down。
作成したDBコンテナに入るにはdocker-compose exec db(=container-name) bash。bash-5.1#みたいな表示に変わればOK。
DBコンテナに接続した状態で、psql -U root -d app-dbのようにしてユーザー名、DB名を指定するとDBに入ることができる。今回の場合であればapp-db=#のような表示になればOK。


参考

Docker PostgreSQLの環境構築（その１）
Docker で作る postgres 環境

koukou

Apolloのキャッシュ更新パターンメモ

  • fetch_policyをcache_and_networkなどのnetworkを含むものに設定する（キャッシュから取ってくる且つ裏ではキャッシュの更新をする）
  • useMutation()のオプションでrefetchQueries()を使う
  • useMutation()のオプションでcache.modify()を使って明示的にキャッシュの更新を操作する（削除・更新）
  • ポーリングする（指定した感覚でキャッシュを更新してくれるもの（refetch()が手動だとすれば、こちらは自動のイメージ））
koukou

Node.jsのバージョン切り替え方法 with Volta

set-defaultのようなコマンドは存在しないので、通常のインストールをする形でデフォルトの設定をする（ローカルキャッシュが存在しない場合はそのバージョンのフェッチ処理から実行される）

# nodeのdefaultを`v14.18.1`に設定
volta install node@14.18.1

# nodeのdefaultを`v16.13.0`に設定
volta install node@16.13.0

その他よく使うもの

# 現在使用しているNode, Yarnのバージョンを表示
volta list

# 自分がVoltaで管理しているNode.jsバージョン一覧などを表示
volta list all

参考

koukou

Next 13 メモ

メモする先として適切な場所がなかったので、適当にここに置いておく。

App Routerによって(?)、Next.js独自に拡張したfetch APIが新設された。
App RouterはReact Server Componentを基本としている(?)ため、これまでのPages Dirと異なり、getXXXPropsを用いずとも、コンポーネント単位でサーバーサイドフェッチを行なうことができるようになった。
コンポーネント単位でサーバーサイドフェッチする際に、独自拡張されたfetchを使用し、この独自拡張fetchの第2引数としてキャッシュ戦略のオプションを指定することで、これまでgetXXXPropsで行なっていたことを、WebのNative APIにより近いインターフェース（= fetch）で実現することができるようになった。
これまでのPages Dirでは最大でもPage単位でしかSSRや、SGの指定をすることができなかったところが、
Server Componentsと独自拡張fetchの組み合わせでコンポーネント単位でSSR・SSG・ISR等のキャッシュ戦略を取ることができるようになった。
https://zenn.dev/sumiren/articles/664c86a28ec573
https://nextjs.org/docs/app/api-reference/functions/fetch