はてなブックマーク

Conformの概要 Conformは、RemixやNext.jsのようなフレームワークをサポートしており、クライアントサイドとサーバーサイドのフォームバリデーションを同じ記述で書くことができるライブラリです。RemixやServer Actionsの台頭により、ZennでもConformを紹介する記事がいくつか投稿されています。 今回は「Conformを使うとWeb標準なフォームを作ることになる」という別の観点でConformについて紹介します。ReactではJavaScriptでフォームの状態を管理することが当たり前になっており、仮にフォームのマークアップが正しくなかったとしても入力〜バリデーション〜送信まで機能を作ることができてしまいます。 SPA時代からエンジニアになった自分のようなエンジニアは、正しいフォームのマークアップを知らないことが多いかもしれません。Conformが生成す

先日Vercelから「Next.js App Router Caching: Explained!」というタイトルの動画が公開されていたので、その内容をまとめることでNext.jsのキャッシュの今について整理しておこうと思います。 基本 まずNext.jsでは、静的レンダリングがデフォルトです。RSCを使用していても基本的にはビルド時にページが事前レンダリングされます。これはRoute Handlersも同様です。仮にビルド後にデータを更新してもリビルドしない限り表示は古いままであり、これは静的にレンダリングされていると言えます。 ただし、developmentとproductionでは挙動が異なります。ローカルではコードに変更を加えるたびにデータが再取得・レンダリングされるので、ローカルとビルド後の挙動に違いがあることを理解しておきましょう。 リクエストするたびに最新のデータを取得し表示

一つ目のReact Cacheは、後述する他の3つのキャッシュの説明のために必要なので紹介しますが、Next.jsの機能ではなくReactの機能です。React Cache以外のキャッシュはNext.jsの機能に当たります。 React Cache 一つ目のキャッシュはReact Cacheによるもので、同一レンダリング内における同じURLとオプションを持つリクエストをメモ化します。React Cacheの役割は、重複リクエストを排除し、リクエスト数を減らすことです。 Next.jsでは、fetchを利用するだけでこれを実現できますし、fetchを使えない場合はReact Cacheを直接使用することで実現できます。 具体的には以下のような挙動を取ります。 特定のリクエストが初めて呼び出される。キャッシュは存在しないのでデータソースへのリクエストを実行し、レスポンスをメモリに保存する。 同

はじめに JavaScriptのアニメーションライブラリ「GSAP」の基本的な記述や、よく使う機能をまとめたいと思います。 GSAPはとても高機能で基本の部分となる記述を抑えるだけでも、工夫次第でいろんな表現ができます。当記事では触れませんがSVGやcanvasなどと組み合わせるとアニメーションの幅が一気に広がります。また、scrollTriggerやMotionPathPluginなどプラグインもとても充実しています。 基本的な動きを組み合わせたイントロアニメーション ループやリピート制御を組み合わせたエフェクト 連続的な処理 応用：canvasと組み合わせたイントロアニメーション GSAPのインストール

自分がReactに入門した頃は、メモ化に対して漠然と難しそうなイメージを持っていました。 今思い返すと「メモ化を使うとキャッシュできるのはわかるけど、具体的にどういうときに使うのかわからない」ような感情をいだいていた記憶があります。 ということで今回はメモ化の中でも関数をメモするuseCallbackを対象に、useCallbackのユースケースは3つしかないという話をします。 memo化されたコンポーネントのpropsにわたす関数 useEffectやuseMemoの依存に含まれる関数 カスタムフック内の関数 ユースケースが3つしかないとわかれば、少なくとも「漠然と難しそう」という状態を脱することができるはずです。 1. memo化されたコンポーネントのpropsにわたす関数 コンポーネントをmemo化すると、propsが変更しないときに再レンダリングをスキップすることができます。 しか

Next.jsでは、App RouterでServer Component（SC）とClient Component（CC）が区別されるようになってから、Data FetchingとRenderingのバリデーションが増えより複雑になりました。 今回はmicroCMSテンプレートを元に、各Data FetchingとRenderingの挙動を整理します。編集する対象ファイルはapp/articles/[slug]/page.tsxとします。 このテンプレートはmicroCMSにログインすることで誰でも使用することができるので、よかったら実際に手元で動作確認をしてみてください。 SCでSG 対象のファイルからrevalidateの記述を削除することで、SCでSGのような挙動を取ります。 export default async function Page({ params, searchPa

Responding to Events では、イベントハンドラの追加方法だけではなく、その命名規則についても触れられているので良いですね。 今回はそれを紹介します。 基本的な命名規則 Have names that start with handle, followed by the name of the event. By convention, it is common to name event handlers as handle followed by the event name. You’ll often see onClick={handleClick}, onMouseEnter={handleMouseEnter}, and so on. By convention, event handler props should start with on, followe