Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
ServerAction で Progressive Enhancement はどこまで頑張れるか? / progressive-enhancement-with-server-action
Search
Takepepe
April 30, 2024
Programming
6
580
ServerAction で Progressive Enhancement はどこまで頑張れるか? / progressive-enhancement-with-server-action
Node学園 42時限目 Next.js AppRouterについて
https://nodejs.connpass.com/event/315443/
Takepepe
April 30, 2024
Tweet
Share
More Decks by Takepepe
See All by Takepepe
App Router への移行は「改善」となり得るのか?/ Can migration to App Router be an improvement
takefumiyoshii
8
2.5k
フロントエンドの書くべきだったテスト、書かなくてよかったテスト
takefumiyoshii
36
14k
Webフロントエンドのための実践「テスト」手法 CodeZine Night #1
takefumiyoshii
24
7.9k
Next.js でリアーキテクトした話 / story-of-re-architect-with-nextjs
takefumiyoshii
12
8.4k
より速い WEB を目指す Next.js / nextjs-make-the-web-faster
takefumiyoshii
54
19k
フロントエンドの複雑さに耐えるため実践したこと / readyfor-nextjs-first
takefumiyoshii
25
10k
Redux の利点を振り返る
takefumiyoshii
26
8.5k
Type-only Migrate by AST
takefumiyoshii
1
590
- Regular expression & Type - Naming Rule Linter
takefumiyoshii
1
330
Other Decks in Programming
See All in Programming
[KR] What an Android Developer Does
skydoves
0
160
Distributed Scheduling with Spring Boot: the challenges and pitfalls of implementing a background job
rponte
7
1.4k
コード生成を活用したgqlgen+dataloaderの実装パターン解説
syumai
4
550
My favorite script, "dsl.rb"
yui_knk
2
370
計算量オーダーの話
tsudaahr
1
170
Modular Monolith + Go @ newmo
110y
0
340
1BRC – Nerd Sniping the Java Community (Keynote JCon Slovenia)
gunnarmorling
1
140
Why Spring Matters to Jakarta EE - And Vice Versa
ivargrimstad
0
1k
TypeScriptを活用したi18n対応
minako__ph
8
1.5k
Datadogのグラフにデプロイタイミングを表示する / deploy timing on datadog graph
sheepland
1
230
20240525_社内でPower Platform勉強会開いたら900人来た話
ponponmikankan
0
650
Goでのチーム開発に途中参画した私が納得して実装を進めるためにやったこと ~ 命名編 ~
kaorumuta
0
140
Featured
See All Featured
Being A Developer After 40
akosma
68
580k
Stop Working from a Prison Cell
hatefulcrawdad
266
19k
The Invisible Customer
myddelton
114
12k
Why Our Code Smells
bkeepers
PRO
331
56k
Ruby is Unlike a Banana
tanoku
96
10k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
22
2k
Designing for humans not robots
tammielis
247
25k
Into the Great Unknown - MozCon
thekraken
16
1.2k
A Tale of Four Properties
chriscoyier
153
22k
How STYLIGHT went responsive
nonsquared
92
4.9k
The Invisible Side of Design
smashingmag
294
50k
For a Future-Friendly Web
brad_frost
172
9.1k
Transcript
Node学園 42時限目 ー Next.js AppRouterについて ServerAction で Progressive Enhancement は
どこまで頑張れるか?
自己紹介 ▪ Takepepe(吉井 健文) ▪ フロントエンドエンジニア ▪ 社内横断開発組織に所属 ▪ フロントエンド開発の横断サポート
実践Next.js – App Router で進化する Web アプリ開発 ▪ 2024.3/16 技術評論社より刊行 ▪ Next.js
App Router を題材にした書籍 ▪ 一通りの機能を備えたサンプル App を対象に解説 ▪ 公式ドキュメントの分かりづらい箇所を重点的に
▪ 【1】Progressive Enhancement に関する書籍内容の紹介 ▪ 【2】Progressive Enhancement 対応はどこまでやるべきか? ▪ 【3】Server Action に関する近況アップデート Agenda
【1】Progressive Enhancement に関する 書籍内容の紹介
▪ Progressive Enhancement とは? Progressive Enhancement と React 【1】Progressive Enhancement に関する書籍内容の紹介
▪ Progressive Enhancement とは? ・ MDN引用 https://developer.mozilla.org/ja/docs/Glossary/Progressive_Enhancement Progressive Enhancement と React 【1】Progressive
Enhancement に関する書籍内容の紹介
▪ Progressive Enhancement とは? ・ MDN引用 https://developer.mozilla.org/ja/docs/Glossary/Progressive_Enhancement > 可能な限り多くのユーザーに不可欠なコンテンツと 機能のベースラインを提供することを中心とした設計哲学 Progressive Enhancement
と React 【1】Progressive Enhancement に関する書籍内容の紹介
React や Next.js ドキュメントでも使用されているワード ▪ Progressive Enhancement とは? ・ MDN引用 https://developer.mozilla.org/ja/docs/Glossary/Progressive_Enhancement >
可能な限り多くのユーザーに不可欠なコンテンツと 機能のベースラインを提供することを中心とした設計哲学 Progressive Enhancement と React 【1】Progressive Enhancement に関する書籍内容の紹介
▪ Server Component/Server Action で身近になった設計指針 Progressive Enhancement と React 【1】Progressive Enhancement
に関する書籍内容の紹介
▪ Server Component/Server Action で身近になった設計指針 ・ useFormState と Server Action により、JS オフでも
POST が可能に Progressive Enhancement と React 【1】Progressive Enhancement に関する書籍内容の紹介
▪ Server Component/Server Action で身近になった設計指針 ・ useFormState と Server Action により、JS オフでも
POST が可能に ・ ハイドレーション前でも、Form の送信が可能 Progressive Enhancement と React 【1】Progressive Enhancement に関する書籍内容の紹介
API Client & API Routes による従来アプローチでは不可能だった実装 ▪ Server Component/Server Action で身近になった設計指針
・ useFormState と Server Action により、JS オフでも POST が可能に ・ ハイドレーション前でも、Form の送信が可能 Progressive Enhancement と React 【1】Progressive Enhancement に関する書籍内容の紹介
Form 機能のベースラインとして、 JS オフでも最低限 POST ができるように ▪ Server Component/Server Action で身近になった設計指針
・ useFormState と Server Action により、JS オフでも POST が可能に ・ ハイドレーション前でも、Form の送信が可能 Progressive Enhancement と React 【1】Progressive Enhancement に関する書籍内容の紹介
▪ Form 機能のベースラインとして留意すること JS オフでも機能する Form 実装 【1】Progressive Enhancement に関する書籍内容の紹介
▪ Form 機能のベースラインとして留意すること ・ useState で入力値を管理しない JS オフでも機能する Form 実装 【1】Progressive Enhancement
に関する書籍内容の紹介
▪ Form 機能のベースラインとして留意すること ・ useState で入力値を管理しない ・ Form は非制御コンポーネントを使用して構成 JS オフでも機能する Form 実装
【1】Progressive Enhancement に関する書籍内容の紹介
▪ Form 機能のベースラインとして留意すること ・ useState で入力値を管理しない ・ Form は非制御コンポーネントを使用して構成 ・ <input type='hidden' /> を活用
JS オフでも機能する Form 実装 【1】Progressive Enhancement に関する書籍内容の紹介
JS オフでは useState が機能しないため ▪ Form 機能のベースラインとして留意すること ・ useState で入力値を管理しない ・ Form は非制御コンポーネントを使用して構成
・ <input type='hidden' /> を活用 JS オフでも機能する Form 実装 【1】Progressive Enhancement に関する書籍内容の紹介
▪ useFormState フックを使用する JS オフでも機能する Form 実装 【1】Progressive Enhancement に関する書籍内容の紹介
▪ useFormState フックを使用する JS オフでも機能する Form 実装 【1】Progressive Enhancement に関する書籍内容の紹介 const
[formState, formDispatch] = useFormState(updateAction, initialFormState);
const [formState, formDispatch] = useFormState(updateAction, initialFormState); ▪ useFormState フックを使用する ・ Client Component
で使用するフック JS オフでも機能する Form 実装 【1】Progressive Enhancement に関する書籍内容の紹介
const [formState, formDispatch] = useFormState(updateAction, initialFormState); ▪ useFormState フックを使用する ・ Client Component
で使用するフック ・ 第 1 引数には Server Action を渡す(updateAction) JS オフでも機能する Form 実装 【1】Progressive Enhancement に関する書籍内容の紹介
const [formState, formDispatch] = useFormState(updateAction, initialFormState); ▪ useFormState フックを使用する ・ Client Component
で使用するフック ・ 第 1 引数には Server Action を渡す(updateAction) ・ 第 2 引数には「状態(initialFormState)」を渡す JS オフでも機能する Form 実装 【1】Progressive Enhancement に関する書籍内容の紹介
const [formState, formDispatch] = useFormState(updateAction, initialFormState); ▪ useFormState フックを使用する ・ Client Component
で使用するフック ・ 第 1 引数には Server Action を渡す(updateAction) ・ 第 2 引数には「状態(initialFormState)」を渡す ・ Submit を跨いで更新される formState を使う JS オフでも機能する Form 実装 【1】Progressive Enhancement に関する書籍内容の紹介
const [formState, formDispatch] = useFormState(updateAction, initialFormState); ▪ useFormState フックを使用する ・ Client Component
で使用するフック ・ 第 1 引数には Server Action を渡す(updateAction) ・ 第 2 引数には「状態(initialFormState)」を渡す ・ Submit を跨いで更新される formState を使う ・ <form> の action 属性には formDispatch を使う JS オフでも機能する Form 実装 【1】Progressive Enhancement に関する書籍内容の紹介
const [formState, formDispatch] = useFormState(updateAction, initialFormState); ▪ useFormState フックを使用する ・ Client Component
で使用するフック ・ 第 1 引数には Server Action を渡す(updateAction) ・ 第 2 引数には「状態(initialFormState)」を渡す ・ Submit を跨いで更新される formState を使う ・ <form> の action 属性には formDispatch を使う JS オフでも機能する Form 実装 【1】Progressive Enhancement に関する書籍内容の紹介
export async function updateAction( prevState: FormState, formData: FormData ): Promise<FormState>
{} useFormState に渡す ServerAction 【1】Progressive Enhancement に関する書籍内容の紹介 useFormState に渡す Server Action は、実装制約を満たす必要がある
export async function updateAction( prevState: FormState, formData: FormData ): Promise<FormState>
{} useFormState に渡す ServerAction 【1】Progressive Enhancement に関する書籍内容の紹介 第一引数に FormState をとり、FormState を返す非同期関数とすること
export type FormState = { title: string; description: string; updatedAt:
string; error: Error | null; }; type Error = { message: string; status: number; fieldErrors?: Record<string, { message: string }>; }; useFormState に渡す State(書籍例) 【1】Progressive Enhancement に関する書籍内容の紹介 Error が発生したか否かを判定する状態をもつ
export type FormState = { title: string; description: string; updatedAt:
string; error: Error | null; }; type Error = { message: string; status: number; fieldErrors?: Record<string, { message: string }>; }; useFormState に渡す State(書籍例) 【1】Progressive Enhancement に関する書籍内容の紹介 Error が発生したか否かを判定する状態をもつ
ServerAction 内で発生したエラー表現(書籍例) 【1】Progressive Enhancement に関する書籍内容の紹介 Server Action ではエラーをどう扱うか? export async
function updateAction(prevState: FormState, formData: FormData): Promise<FormState> {
ServerAction 内で発生したエラー表現(書籍例) 【1】Progressive Enhancement に関する書籍内容の紹介 戻り値の FormState で判別する export async
function updateAction(prevState: FormState, formData: FormData): Promise<FormState> {
export async function updateAction(prevState: FormState, formData: FormData): Promise<FormState> { try
{ // ★: バリデーションエラーが発生した場合 catch 句へ const payload = validateFormData(formData); // ...省略 } catch (err) { // ★: Zod のバリデーションエラーをマッピング if (err instanceof ZodError) { return handleError(prevState, { ...errors[400], fieldErrors: transformFiledErrors(err), }); } return handleError(prevState, errors[500]); } } ServerAction 内で発生したエラー表現(書籍例) 【1】Progressive Enhancement に関する書籍内容の紹介 例えば、バリデーションエラーが発生した場合
export async function updateAction(prevState: FormState, formData: FormData): Promise<FormState> { try
{ // ★: バリデーションエラーが発生した場合 catch 句へ const payload = validateFormData(formData); // ...省略 } catch (err) { // ★: Zod のバリデーションエラーをマッピング if (err instanceof ZodError) { return handleError(prevState, { ...errors[400], fieldErrors: transformFiledErrors(err), }); } return handleError(prevState, errors[500]); } } ServerAction 内で発生したエラー表現(書籍例) 【1】Progressive Enhancement に関する書籍内容の紹介 例えば、バリデーションエラーが発生した場合
export async function updateAction(prevState: FormState, formData: FormData): Promise<FormState> { try
{ // ★: バリデーションエラーが発生した場合 catch 句へ const payload = validateFormData(formData); // ...省略 } catch (err) { // ★: Zod のバリデーションエラーをマッピング if (err instanceof ZodError) { return handleError(prevState, { ...errors[400], fieldErrors: transformFiledErrors(err), }); } return handleError(prevState, errors[500]); } } ServerAction 内で発生したエラー表現(書籍例) 【1】Progressive Enhancement に関する書籍内容の紹介 バリデーションエラーが throw される
export async function updateAction(prevState: FormState, formData: FormData): Promise<FormState> { try
{ // ★: バリデーションエラーが発生した場合 catch 句へ const payload = validateFormData(formData); // ...省略 } catch (err) { // ★: Zod のバリデーションエラーをマッピング if (err instanceof ZodError) { return handleError(prevState, { ...errors[400], fieldErrors: transformFiledErrors(err), }); } return handleError(prevState, errors[500]); } } ServerAction 内で発生したエラー表現(書籍例) 【1】Progressive Enhancement に関する書籍内容の紹介 handleError 関数でエラー発生状態の FormState を返す
export async function updateAction(prevState: FormState, formData: FormData): Promise<FormState> { try
{ // ★: バリデーションエラーが発生した場合 catch 句へ const payload = validateFormData(formData); // ...省略 } catch (err) { // ★: Zod のバリデーションエラーをマッピング if (err instanceof ZodError) { return handleError(prevState, { ...errors[400], fieldErrors: transformFiledErrors(err), }); } return handleError(prevState, errors[500]); } } ServerAction 内で発生したエラー表現(書籍例) 【1】Progressive Enhancement に関する書籍内容の紹介 FormState に Error が含まれていたら「エラー文言」を表示する
<form action={formDispatch} onSubmit={handleSubmit}></form> onSubmit による事前バリデーション(書籍例) 【1】Progressive Enhancement に関する書籍内容の紹介 JS オフ環境では
action が即座に実行される
<form action={formDispatch} onSubmit={handleSubmit}></form> onSubmit による事前バリデーション(書籍例) 【1】Progressive Enhancement に関する書籍内容の紹介 JS オン環境では
action の前に onSubmit が実行される
<form action={formDispatch} onSubmit={handleSubmit}></form> function handleSubmit(event: FormEvent<HTMLFormElement>) { try { const
formData = new FormData(event.currentTarget); // バリデーションエラーが発生した場合 catch 句へ validateFormData(formData); // ...省略(何もしない) } catch (err) { //★: Form のサブミット(action 実行)を中止 event.preventDefault(); // ...省略 } } onSubmit による事前バリデーション(書籍例) 【1】Progressive Enhancement に関する書籍内容の紹介 JS オン環境では action の前に onSubmit が実行される
<form action={formDispatch} onSubmit={handleSubmit}></form> function handleSubmit(event: FormEvent<HTMLFormElement>) { try { const
formData = new FormData(event.currentTarget); // バリデーションエラーが発生した場合 catch 句へ validateFormData(formData); // ...省略(何もしない) } catch (err) { //★: Form のサブミット(action 実行)を中止 event.preventDefault(); // ...省略 } } onSubmit による事前バリデーション(書籍例) 【1】Progressive Enhancement に関する書籍内容の紹介 JS オン環境では action の前にバリデーションを実行する
<form action={formDispatch} onSubmit={handleSubmit}></form> function handleSubmit(event: FormEvent<HTMLFormElement>) { try { const
formData = new FormData(event.currentTarget); // バリデーションエラーが発生した場合 catch 句へ validateFormData(formData); // ...省略(何もしない) } catch (err) { //★: Form のサブミット(action 実行)を中止 event.preventDefault(); // ...省略 } } onSubmit による事前バリデーション(書籍例) 【1】Progressive Enhancement に関する書籍内容の紹介 JS オン環境では、不正な入力値の場合「 Submit を中止する」
<form action={formDispatch} onSubmit={handleSubmit}></form> function handleSubmit(event: FormEvent<HTMLFormElement>) { try { const
formData = new FormData(event.currentTarget); // バリデーションエラーが発生した場合 catch 句へ validateFormData(formData); // ...省略(何もしない) } catch (err) { //★: Form のサブミット(action 実行)を中止 event.preventDefault(); // ...省略 } } onSubmit による事前バリデーション(書籍例) 【1】Progressive Enhancement に関する書籍内容の紹介 JS オン環境では、不正な入力値の場合「 Submit を中止する」
<form action={formDispatch} onSubmit={handleSubmit}></form> function handleSubmit(event: FormEvent<HTMLFormElement>) { try { const
formData = new FormData(event.currentTarget); // バリデーションエラーが発生した場合 catch 句へ validateFormData(formData); // ...省略(何もしない) } catch (err) { //★: Form のサブミット(action 実行)を中止 event.preventDefault(); // ...省略 } } onSubmit による事前バリデーション(書籍例) 【1】Progressive Enhancement に関する書籍内容の紹介 正常入力の場合、Submit は中止しない -> action が実行される
▪ 事前バリデーションは「 より良い体験の一部」という方針 onSubmit による事前バリデーション(書籍例) 【1】Progressive Enhancement に関する書籍内容の紹介
▪ 事前バリデーションは「 より良い体験の一部」という方針 ・ JS オフ時でも、Form の送信はできる onSubmit による事前バリデーション(書籍例) 【1】Progressive Enhancement に関する書籍内容の紹介
▪ 事前バリデーションは「 より良い体験の一部」という方針 ・ JS オフ時でも、Form の送信はできる ・ JS オフ時でも、Server Action 内でバリデーションはする onSubmit
による事前バリデーション(書籍例) 【1】Progressive Enhancement に関する書籍内容の紹介
▪ 事前バリデーションは「 より良い体験の一部」という方針 ・ JS オフ時でも、Form の送信はできる ・ JS オフ時でも、Server Action 内でバリデーションはする ・ JS
オン時には、追加で事前バリデーションをする onSubmit による事前バリデーション(書籍例) 【1】Progressive Enhancement に関する書籍内容の紹介
「無駄に Server Action が送られないなら、より嬉しいよね」という方針 ▪ 事前バリデーションは「 より良い体験の一部」という方針 ・ JS オフ時でも、Form の送信はできる ・ JS
オフ時でも、Server Action 内でバリデーションはする ・ JS オン時には、追加で事前バリデーションをする onSubmit による事前バリデーション(書籍例) 【1】Progressive Enhancement に関する書籍内容の紹介
詳細は「実践 Next.js」をご覧ください ▪ 事前バリデーションは「 より良い体験の一部」という方針 ・ JS オフ時でも、Form の送信はできる ・ JS オフ時でも、Server Action
内でバリデーションはする ・ JS オン時には、追加で事前バリデーションをする onSubmit による事前バリデーション(書籍例) 【1】Progressive Enhancement に関する書籍内容の紹介
【2】Progressive Enhancement 対応は どこまでやるべきか?
▪ useFormState で確保した State を活用すると、それなりに減らせる JSオン/オフで、どこまで差分を減らせるか? 【2】Progressive Enhancement 対応はどこまでやるべきか?
▪ useFormState で確保した State を活用すると、それなりに減らせる ・ Form 送信をして、バリデーションエラーを表示する JSオン/オフで、どこまで差分を減らせるか? 【2】Progressive Enhancement 対応はどこまでやるべきか?
▪ useFormState で確保した State を活用すると、それなりに減らせる ・ Form 送信をして、バリデーションエラーを表示する ・ Form 送信をして、エラーモーダルを表示する JSオン/オフで、どこまで差分を減らせるか? 【2】Progressive
Enhancement 対応はどこまでやるべきか?
▪ useFormState で確保した State を活用すると、それなりに減らせる ・ Form 送信をして、バリデーションエラーを表示する ・ Form 送信をして、エラーモーダルを表示する ・ https://github.com/takefumi-yoshii/useformstate-example JSオン/オフで、どこまで差分を減らせるか?
【2】Progressive Enhancement 対応はどこまでやるべきか?
▪ 実装アプローチが根本的に異なる 「対応をどこまでやるべきか?」という線引きが必要 【2】Progressive Enhancement 対応はどこまでやるべきか?
▪ 実装アプローチが根本的に異なる ・ 「JS オフでも動くForm」を考えることは、これまでなかった 「対応をどこまでやるべきか?」という線引きが必要 【2】Progressive Enhancement 対応はどこまでやるべきか?
▪ 実装アプローチが根本的に異なる ・ 「JS オフでも動くForm」を考えることは、これまでなかった ・ ブラウザに保持される State 無しでロジックが組めるか? 「対応をどこまでやるべきか?」という線引きが必要 【2】Progressive Enhancement 対応はどこまでやるべきか?
▪ 実装アプローチが根本的に異なる ・ 「JS オフでも動くForm」を考えることは、これまでなかった ・ ブラウザに保持される State 無しでロジックが組めるか? ・ JS オン/オフ、どちらも考慮された実装を維持できるか? 「対応をどこまでやるべきか?」という線引きが必要 【2】Progressive
Enhancement 対応はどこまでやるべきか?
従来の知識で通用しない場面が出てくる可能性もあり ▪ 実装アプローチが根本的に異なる ・ 「JS オフでも動くForm」を考えることは、これまでなかった ・ ブラウザに保持される State 無しでロジックが組めるか? ・ JS オン/オフ、どちらも考慮された実装を維持できるか? 「対応をどこまでやるべきか?」という線引きが必要
【2】Progressive Enhancement 対応はどこまでやるべきか?
▪ 要件定義が細かく決められている現場の場合、合意形成が必要 「対応をどこまでやるべきか?」という線引きが必要 【2】Progressive Enhancement 対応はどこまでやるべきか?
▪ 要件定義が細かく決められている現場の場合、合意形成が必要 ・ 要件定義では、どのように明文化するのか? 「対応をどこまでやるべきか?」という線引きが必要 【2】Progressive Enhancement 対応はどこまでやるべきか?
▪ 要件定義が細かく決められている現場の場合、合意形成が必要 ・ 要件定義では、どのように明文化するのか? ・ 手動・自動テストにおいて、どのように検証するのか? 「対応をどこまでやるべきか?」という線引きが必要 【2】Progressive Enhancement 対応はどこまでやるべきか?
ステークホルダー間で合意不要、開発者意思で実装できるなら問題なし ▪ 要件定義が細かく決められている現場の場合、合意形成が必要 ・ 要件定義では、どのように明文化するのか? ・ 手動・自動テストにおいて、どのように検証するのか? 「対応をどこまでやるべきか?」という線引きが必要 【2】Progressive Enhancement 対応はどこまでやるべきか?
▪ JS オフ環境でも使用できる(動機づけとして弱い) Progressive Enhancement を維持する目的は? 【2】Progressive Enhancement 対応はどこまでやるべきか?
▪ JS オフ環境でも使用できる(動機づけとして弱い) ▪ ハイドレーションに関係なく即座に Form 送信ができる Progressive Enhancement を維持する目的は? 【2】Progressive Enhancement
対応はどこまでやるべきか?
▪ JS オフ環境でも使用できる(動機づけとして弱い) ▪ ハイドレーションに関係なく即座に Form 送信ができる ・ ロースペックデバイスに効果あり? Progressive Enhancement を維持する目的は? 【2】Progressive
Enhancement 対応はどこまでやるべきか?
▪ JS オフ環境でも使用できる(動機づけとして弱い) ▪ ハイドレーションに関係なく即座に Form 送信ができる ・ ロースペックデバイスに効果あり? ・ 重厚なページで効果あり? Progressive Enhancement を維持する目的は?
【2】Progressive Enhancement 対応はどこまでやるべきか?
▪ JS オフ環境でも使用できる(動機づけとして弱い) ▪ ハイドレーションに関係なく即座に Form 送信ができる ・ ロースペックデバイスに効果あり? ・ 重厚なページで効果あり? ・ INP(Core Web Vitals)に効果あり?
Progressive Enhancement を維持する目的は? 【2】Progressive Enhancement 対応はどこまでやるべきか?
Pros / Cons を検討のうえ判断が必要 ▪ JS オフ環境でも使用できる(動機づけとして弱い) ▪ ハイドレーションに関係なく即座に Form 送信ができる ・ ロースペックデバイスに効果あり?
・ 重厚なページで効果あり? ・ INP(Core Web Vitals)に効果あり? Progressive Enhancement を維持する目的は? 【2】Progressive Enhancement 対応はどこまでやるべきか?
【3】Server Action に関する近況アップデート
▪ 【A】useActionState が生える 書籍刊行から1ヶ月。この間に起きたアップデート 【3】Server Action に関する近況アップデート
▪ 【A】useActionState が生える ▪ 【B】Parallel Routes のバグが解消 書籍刊行から1ヶ月。この間に起きたアップデート 【3】Server Action に関する近況アップデート
いずれも、書籍サンプルに小さな影響あり ▪ 【A】useActionState が生える ▪ 【B】Parallel Routes のバグが解消 書籍刊行から1ヶ月。この間に起きたアップデート 【3】Server Action に関する近況アップデート
▪ useActionState とは? 【A】useActionState が生える 【3】Server Action に関する近況アップデート https://github.com/facebook/react/pull/28491
▪ useActionState とは? ・ Renames useFormState to useActionState 【A】useActionState が生える 【3】Server Action
に関する近況アップデート https://github.com/facebook/react/pull/28491
▪ useActionState とは? ・ Renames useFormState to useActionState ・ Adds a pending state
to the returned tuple 【A】useActionState が生える 【3】Server Action に関する近況アップデート https://github.com/facebook/react/pull/28491
▪ useActionState とは? ・ Renames useFormState to useActionState ・ Adds a pending state
to the returned tuple ・ Moves the hook to the 'react' package 【A】useActionState が生える 【3】Server Action に関する近況アップデート https://github.com/facebook/react/pull/28491
▪ useFormState と useActionState の違い const [formState, formDispatch] = useFormState(updateAction, initialFormState);
const [isPending] = useFormStatus(); 【A】useActionState が生える 【3】Server Action に関する近況アップデート isPending の参照のために useFormStatus を併用する必要がある
▪ useFormState と useActionState の違い const [formState, formDispatch, isPending] = useActionState(updateAction,
initialFormState); 【A】useActionState が生える 【3】Server Action に関する近況アップデート useActionStatus では戻り値に isPending が含まれる
▪ useFormState -> useActionState なぜ? 【A】useActionState が生える 【3】Server Action に関する近況アップデート https://github.com/facebook/react/pull/28491
▪ useFormState -> useActionState なぜ? ・ 実態として、Form ではなくAction の状態を参照している 【A】useActionState が生える 【3】Server
Action に関する近況アップデート https://github.com/facebook/react/pull/28491
▪ useFormState -> useActionState なぜ? ・ 実態として、Form ではなくAction の状態を参照している ・ ReactDOM への依存はない 【A】useActionState
が生える 【3】Server Action に関する近況アップデート https://github.com/facebook/react/pull/28491
▪ useFormState -> useActionState なぜ? ・ 実態として、Form ではなくAction の状態を参照している ・ ReactDOM への依存はない ・ "isPending"
を Action と関連づけることで混乱を避ける 【A】useActionState が生える 【3】Server Action に関する近況アップデート https://github.com/facebook/react/pull/28491
▪ 書籍では useFormState のサンプルを多数掲載していますが、、、、 【A】useActionState が生える 【3】Server Action に関する近況アップデート
▪ 書籍では useFormState のサンプルを多数掲載していますが、、、、 ・ useFormState が非推奨 というわけではない 【A】useActionState が生える 【3】Server Action
に関する近況アップデート
▪ 書籍では useFormState のサンプルを多数掲載していますが、、、、 ・ useFormState が非推奨 というわけではない ・ ただし useActionState を優先するように促される見込み 【A】useActionState
が生える 【3】Server Action に関する近況アップデート
▪ 書籍では useFormState のサンプルを多数掲載していますが、、、、 ・ useFormState が非推奨 というわけではない ・ ただし useActionState を優先するように促される見込み ・ 実装詳細に関しては、サンプルに大きくは影響なし
【A】useActionState が生える 【3】Server Action に関する近況アップデート
今後は useActionState を使用した方が望ましい ▪ 書籍では useFormState のサンプルを多数掲載していますが、、、、 ・ useFormState が非推奨 というわけではない ・ ただし
useActionState を優先するように促される見込み ・ 実装詳細に関しては、サンプルに大きくは影響なし 【A】useActionState が生える 【3】Server Action に関する近況アップデート
▪ Parallel Routes モーダル内の Server Action バグ 【B】Parallel Routes のバグが解消 【3】Server
Action に関する近況アップデート
▪ Parallel Routes モーダル内の Server Action バグ ・ 実は、開いたモーダル内で「いいね」を押下するとクラッシュする 【B】Parallel Routes のバグが解消
【3】Server Action に関する近況アップデート
【B】Parallel Routes のバグが解消 【3】Server Action に関する近況アップデート ▪ Parallel Routes モーダル内の Server
Action バグ ・ 実は、開いたモーダル内で「いいね」を押下するとクラッシュする ・ バグが修正されることを期待して、書籍サンプルはそのままとした
【B】Parallel Routes のバグが解消 【3】Server Action に関する近況アップデート ▪ Parallel Routes モーダル内の Server
Action バグ ・ 実は、開いたモーダル内で「いいね」を押下するとクラッシュする ・ バグが修正されることを期待して、書籍サンプルはそのままとした ・ v14.2.2 現在、このバグは解消
すでにリポジトリをクローンされた方は、 pull & 再インストールをお願いします ▪ Parallel Routes モーダル内の Server Action バグ
・ 実は、開いたモーダル内で「いいね」を押下するとクラッシュする ・ バグが修正されることを期待して、書籍サンプルはそのままとした ・ v14.2.2 現在、このバグは解消 【B】Parallel Routes のバグが解消 【3】Server Action に関する近況アップデート
▪ Server Action 使用(関連機能)は以前より安定してきている Server Action 使用は以前より安定 【3】Server Action に関する近況アップデート
▪ Server Action 使用(関連機能)は以前より安定してきている ▪ Progressive Enhancement はベストエフォートではある Server Action 使用は以前より安定 【3】Server
Action に関する近況アップデート
Server Action を使用できるなら、Progressive Enhancement に挑戦してみても良いかもしれない ▪ Server Action 使用(関連機能)は以前より安定してきている ▪ Progressive Enhancement
はベストエフォートではある Server Action 使用は以前より安定 【3】Server Action に関する近況アップデート
ご清聴ありがとうございました