はてなブックマーク

playwrightでnext.jsのテストを実行してcoverageまで取るのがわりと情報揃ってなかったのでまとめる。 手順の流れ 今回は、下記の手順を踏んでいく テストの準備対応 @playwright/testの代わりにplaywright-test-coverageを利用する カバレッジモードのnextの設定 nycを利用するnext.jsの起動モードを準備する(next.config.jsの設定) playwrightとnycをつなぐ playwrightからの起動時にnycを利用した起動モードを利用する 1. テストの準備対応 とりあえず普通にnext.js側のファイルを用意 // pages/index.ts import Head from 'next/head' import React, { useState } from 'react' export default

React18になり、testing-libraryのreact-hooksがdeprecatedとなった 基本的にはカバーされているのだが、下記のようにwrapperを利用した場合の挙動が変わっていた const Wrapper = ({children, ...props}) => { return <TestContainer {...props}> {children} </TestContainer> } test("Some test", () => { const { result,rerender } = renderHook(() => useCounter(),{ wrapper: Wrapper, initialProps: { foo: "baz"} }) rerender({ foo: "bar" }) }) このようなテストを書いた際、以前の@testing-l

nextと組み合わせるのをやりながら見つけた便利だった部分についての列挙 マージ機能 https://trpc.io/docs/merging-routers Routerの部分が肥大化してしまいそうだなというのが結構懸念だったが、mergeする機能があるのでこれは便利そうだった。 const appRouter = createRouter() .merge('user.', users) .merge('post.', posts) Infering Types https://trpc.io/docs/infer-types Routerなどの各種定義からTypeScriptの型を取り出す機能。 ちょっと記述が面倒なところはあるが、AppRouterの返り値や入力値が抽出できるので、一通り覚えておくと便利。 （とはいえinputについてはzodのinferを利用する方がスッキリするよ

next.jsのAPI周りは気軽に使えて便利なのだが、型周りを考えるとちょこちょこ事故が起きやすい箇所になる。 tRPCを利用するとかなり堅牢なAPIを作ることができる ざっくりtRPCとnext.jsにおける利用について 軽くtRPCとnext.jsとの組み合わせについてかいつまむと、下記のような形になる 名前の通りTypeScriptを利用したRPCを行うためのライブラリ エンドポイントを一つに固定してクライアントでも利用することで型を共有できるもの next対応についてはUsage with Next.jsとしてドキュメント化されてるぐらいがっちりサポートされている next.jsの普通のAPIのルーティングとは異なるため、/api/trpc/[trpc]のような形でエンドポイントを一つに絞って利用する Contextのような機能もあって、複数のAPIの共通処理を一括管理できるところ

next.jsで同じリポジトリを使いつつ複数の別なアプリケーションとして起動したいケースが度々有る。 この場合、殆どはturborepoやnxなどのmonorepoツールを利用する方法が広く知られている。 next.jsの公式でもMulti zoneの例ではmonorepoが利用されている 一方でmonorepoは各所対応してない場合があったり気を使う部分も多く、一定の覚悟を必要になる 今回モノレポツールを使わない、もう少しライトな方法を2つ思いついたのでそれぞれまとめていきたい ディレクトリごとにアプリを切り分け、ENVからの指定で切り替える webpackの設定を調整して依存関係を解決させる 1. ディレクトリごとにアプリを切り分け、ENVからの指定で切り替える こちらはnextのレールからほぼ外れないのでそれほど覚悟を必要としないやり方。 デメリットとしてURLにディレクトリが含まれ

管理画面や生存期間の短い試験機能など「あんまり頑張りたくないけどanyを多少減らす程度には型ほしい」みたいな時などにちょこちょこ使ってるテクニックが溜まってきたのでまとめてみる。 今回はnext.jsのAPIに絞って記述しているが、おそらく他でも使えるはず。 レスポンスの返り値をAwaited<ReturnType typeof someFunction>で怠ける APIのレスポンスが定まり切らなかったり流動的な部分で動的にする場合、Awaited<ReturnType typeof ...>の組み合わせが便利。 // こんな関数があるとして // const getFooData = async (id): FooData // const getBazData = async (id): BazData // 型を取れるようにレスポンスの関数を切り出し const someComple

非同期処理のテストを行う場合、モックを噛ませないとうまく行かないケースがどうしても存在する。 SWR1.0で導入されたmiddlewareを利用するとこれをいい感じに回避できることを見つけたのでまとめる 下準備 今回はまず下記のようなコンポーネントをテストすることを考える export const useDictionary = (word: string) => { return useSWR(`https://api.dictionaryapi.dev/api/v2/entries/en/${word}`, (url) => fetch(url).then(r => r.json())) } export const SearchResult: FC<{ word: string }> = ({ word }) => { const { data, error } = useDicti

単純にunixtimeを圧縮したいとしたら？ -> base64とかで良い。 でもbase64は記号が入ってて邪魔 -> base62とかbase58 const PowerRadix = require("power-radix") const bases = [ "0123456789", "0123456789ABCDEFGHJKMNPQRSTVWXYZ", "123456789ABCDEFGHJKLMNPQRSTUVWXYZabcdefghijkmnopqrstuvwxyz", "0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ", "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/", "ABCDEFGHIJKLMNOPQRS

Reactでhooksを切り替えしたい時について考えたケースがあったので書き残し。 中盤は悪例を挟みます。悪例については利用しないことをおすすめします 結論だけ知りたい方向け -> 結論へ 前提 React hooksで例えばパターンA、パターンBを切り替える、factoryパターンっぽいことをやりたくなることがある。 コンポーネントより外側で切り替えることが可能であればこちらの記事などのようなことが可能だが、コンポーネントの内部で切り替えたいケースだとこのやり方だと処理出来ない 例えばこのようなカウンターを考えてみたい。 // Hooksは共通で下記の値を返す export type CounterHooksResult = { value: number, onClick: () => void } // 単純なカウンター export const usePlainCounter =

Reactアプリケーションをi18nをするにあたって、t("Hello", "こんにちは")のように日本語をfallback値として設定して、ソースから翻訳ファイルを生成するようにしたらわりと良かったのでまとめる 前提 あくまで今回の話は下記のような前提としている。 小規模で、複雑な多言語化処理を要する部分が少ない 日本語から他言語への変換である 多言語化の種類は少なく、多言語化後も日本語が中心。 組織のコミュニケーションパスが少なく、実装者がUIを変更する事が出来る環境である 準備 本題に入る前の前提として、ライブラリと外部サービス選びについて。 ライブラリ選び i18n自体はマッピングさえできれば十分なので自前してもよかったが、省力化のためにライブラリに頼った。 様々なコンポーネントを一通り触り、機能性や型などを考慮してi18nextを利用することにした。 翻訳データの型まで考慮されて

Chakra UIでカスタムコンポーネントを作ろうとした時、いくつかやり方があることがわかってきた。 1. 別コンポーネントとして普通にラッパーを作る 一番驚きの少ない方法 const RoundedOutlineButton: FC<ButtonProps> = (props) => { return <Button variant="outline" borderStyle="solid" borderWidth="2px" rounded="full" px={10} py={5} letterSpacing="0.1em" {...props} /> }

導入：Reactのchildren Reactのchildrenを使うことで、子要素をwrapするような子要素を記述することが出来る。railsのviewで言えばyieldみたいなもの。 const SomeLabel = ({children}) => { return <div>{children}</div> } // 呼び出し側 <SomeLabel> // 子要素の拡張に対して、`SomeLabel`は関心を持たなくて良い。 <SomeDecoration>Hello</SomeDecoration> <SomeLabel> これを覚えるとだいぶReactをきれいに書きやすくなるイメージがある。 本題：複数の子要素を柔軟に扱いたいときにどう考えるか？ 例えば何かtitle, author,bodyを貰って記事を表示するような<Post>を考える。

next.jsのISRを使おうとして「なんか全然うまく行かない」ってなってたのがやっと理解出来たのでメモ 問題編 とりあえず見様見真似でISRはrevalidateとfallbackつければ良いんだな？とやってみたところ、どうもpropsが空Objectになってしまうようで悩んでいた。 例えば下記のような場合、エラーが起きる // pages/greeting/[name].js const Page = (props) => { // ↓ここでエラー return <div>Hello {props.name.toUpperCase()}</div> } export const getStaticProps = async (req) => { return { props: { name: req.params.name }, revalidate: 100 } } export c

JSXはspread演算子で<Foo a={a} b={b}>を<Foo {...{a, b}}>で書ける

entriesとは JavaScriptにはObject.entries() / Array.prototype.entries() など、イテレーションができるものにはentitiesというものが実装されている。 これは要素を[key, value] の配列として変換するものだ。 また、Object.fromEntriesというものがある。これは逆に[key,value]で構成された配列をObjectへ変換するものになる。 Array / Map / Setはprototype実装されているので、someArray.entries()などできるが、Objectはそういうものを持てないので、Object.fromEntries(obj)とする必要がある 詳しくはMDNを参照してほしい https://developer.mozilla.org/ja/docs/Web/JavaScript/

Magicというマジックリング認証に特化したサービスを知ったので素振りしてみた記録。 サーバーサイドまで含め入ったサンプルは公式のチュートリアルにある https://magic.link/guides 逆にSPAのようなクライアントログインの最低限パターンのサンプルが見当たらなかったので、素振りを書いてみた サンプル import { Magic } from 'magic-sdk' import { useState, useEffect } from 'react' // Dashboardに表示されたpublishable keyを持ってくる。これは公開してよいキー const MAGIC_LINK_PUBLIC = "pk_test_****************" // hooksに処理をまとめる const useMagicLogin = () => { const [is

const fmt = new Intl.NumberFormat("ja-JP",{ notation: "compact", }) fmt.format(BigInt(64 ** 8) ) // => "281兆" とりあえずざっくり数値を出したいときにとても便利。最高そう。 オプションを組み合わせる 詳しくは上記MDNが詳しいが、その他オプションと組み合わせることで色々調整も可能だ // 何も設定しないといい感じに小数点計算してくれる new Intl.NumberFormat("ja-JP",{ notation: "compact"}).format(BigInt(433333333)) // => "4.3億" // 小数点表記をさせたくなければmaximumFractionDigitsを0にする new Intl.NumberFormat("ja-JP",{ notation

next-authなどでクライアントログインを仕掛けていてgetServerSidePropsやgetStaticPropsでちゃんと認証かけてないとだだ漏れするので気をつけましょうねという話。 通常のサーバーサイド開発に慣れていればあまりハマるようなことではないのだが、知らないで使うと危ないので記述しておく 例示 例えば下記のようなコードで考えてみる。 だいたいログイン判定はクライアントなら_app.jsにて書くだろう。 // _app.jsx import { signIn, useSession } from "next-auth/client" export const NeedLogin = ({children}) => { const [session, loading] = useSession() if (loading) { return null } if (!ses

なるべくlodashを使わず標準の機能で済まそうとしている[^1]が、どうしても標準だと面倒で欲しくなるケースがある。 例えば1つの配列をn個に分ける_.chunkなどはちょうどよいだろう。 You Dont Need Lodash Underscoreを参考に自前実装すると最低でもこのぐらいは必要だ。 const chunk = (input, size) => input.reduce((arr, item, idx) => idx % size === 0 ? [...arr, [item]] : [...arr.slice(0, -1), [...arr.slice(-1)[0], item]] , []);

const { isLoading, error, data } = useQuery('repoData', () => fetch('https://api.github.com/repos/tannerlinsley/react-query').then(res => res.json() ) ) 一見、ほとんど一緒じゃん、となるが、SWRは「キーをfetcheの実行するためのパラメータ」になっている。 一方、react-queryは「キーと実行APIは独立している」。これはイメージとしてReduxのActionなどのconstantのような印象を受ける APIの違い Core API RQ : https://react-query.tanstack.com/docs/api SWR https://swr.vercel.app/docs/options#parameters これ

一見小難しい印象のあるNext.jsをできるだけカジュアルな利用シーンでライトに使う際の観点を紹介・考察した本です なるべく初学者でもわかるように記述してますが、ハンズオンを意識してるものではないのでご注意ください。 また、Reactの基礎部分等についても記載していませんのでこちらもご注意ください 目次と1章は無料までは無料にしています。

社内の管理ツール、ちょっとした便利ツールだと独立してサクッと出来てしまったりするのだが、意外と認証が面倒だったりする。 しかし「Basic認証はちょっと弱いんだけどDB管理まではしたくないし…」みたいなレベルがよくある。 社内にG Suiteが導入されている場合はだいたいGoogle認証やFireAuthをよく使っていたのだが、下記のような問題もあった FireAuthで管理する（Email/Password方式やGoogleAuthProvider認証など） -> 既存でユーザー向けに提供している場合はユーザーと管理者が混在してしまう -> 一方で新しくfirebaseプロジェクトを作るのも管理が面倒になる Google認証を素で使う GoogleのAuthもだいたいあるが、割と細かいところで面倒くささがある。 credentialもファイル管理が必要で気軽にenvに入れづらい そこでS