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では挙動が異なります。ローカルではコードに変更を加えるたびにデータが再取得・レンダリングされるので、ローカルとビルド後の挙動に違いがあることを理解しておきましょう。 リクエストするたびに最新のデータを取得し表示

この記事はアクセシビリティアドベントカレンダー19日目の記事です🎄 ウェブサイトでアクセシビリティを対応するために、 デジタル庁のガイドブックとアクセシビリティー対応が大変参考になります。 全体像を理解しやすくするために独自の図解で整理してみました🙌🏻 デジタル庁とは、日本政府が設置した組織で、デジタル化の推進を担っています。ウェブサイトのアクセシビリティに関しても、彼らが作成したガイドブックが非常に参考になります。このガイドブックには、ウェブサイトがどのようにすれば、より多くの人々にアクセスしやすくなるかの指針が示されています。 今回参照したページはデジタル庁の「ウェブアクセシビリティ導入ガイドブック」です。 この記事のゴール この記事を読むことでデジタル庁サイトと同様のアクセシビリティ試験を行い 結果をサイトで公開できるようになります👍🏻 対象読者 特にウェブアクセシビリティ

useEffectの依存関係（dependencies）は以下のように定義されており、依存関係にはsetupコード内で参照されるリアクティブな値をすべて指定する必要があります。 The list of all reactive values referenced inside of the setup code. Reactive values include props, state, and all the variables and functions declared directly inside your component body. setupコードの内部で参照されるすべてのリアクティブな値のリスト。リアクティブな値には、props、state、そしてコンポーネントボディの内部で直接宣言されたすべての変数と関数が含まれます。 しかし、useEffectは「ある値が変わったと

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

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