はてなブックマーク

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

言語とライブラリ/フレームワークの学習を並行して良いのか？ 昨今のフロントエンド開発の現場では、ReactやNext.jsなどのライブラリやフレームワークを使うことが当たり前になっています。つまりフロントエンドエンジニアになるためにはライブラリの習得が必須ということです。 そんな事情からライブラリの習得を目標に日々学習に励んでいる人も多いのではないでしょうか。 自分は4年ほどエンジニアとして働いてきて、さまざまなエンジニアを見てきましたが、やはり「ライブラリ/フレームワーク開発をやりたい！」というエンジニアは多いです。 しかしライブラリを正しく扱うためには、そもそも言語自体の深い理解が必要不可欠ということを忘れてはいけません。言語の理解が不十分な状態でライブラリに手を出すと、思ったように理解が進まず成長が鈍化するか、実力がともなっていないフロントエンドエンジニアが誕生します。 個人的には、

先日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