WorryFree Computers »
Address
:
[go:
up one dir
,
main page
]
Include Form
Remove Scripts
Accept Cookies
Show Images
Show Referer
Rotate13
Base64
Strip Meta
Strip Title
Session Cookies
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
570
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.4k
フロントエンドの書くべきだったテスト、書かなくてよかったテスト
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.4k
Type-only Migrate by AST
takefumiyoshii
1
590
- Regular expression & Type - Naming Rule Linter
takefumiyoshii
1
320
Other Decks in Programming
See All in Programming
multipart/form-dataの省メモリパース / Go Conference 2024 Pre Party #gocon24_preparty
mazrean
0
140
Optiver参戦記&銀メダル解法
tonic
0
240
RubyKaigiでおいしいピクルスになろう! / Become a Delicious Pickle at RubyKaigi!
unikounio
0
5.6k
record4s --- Extensible Records for Scala 3, and Domain Modeling with Structural Types
tarao
2
210
型推論のちょっと深い話
omochi
0
270
ゆるっと話すSLI/SLOを設定してよかったこと出来ていないこと
maaaato
2
490
1BRC – Nerd Sniping the Java Community (Keynote JCon Slovenia)
gunnarmorling
1
130
The Final Frontier of Web Development: React Server Components vs Jakarta EE
ivargrimstad
0
820
Swift Attributes
hokuron
0
210
Containerization Tips and Tricks for PHP apps
dunglas
3
4k
パッケージ開発論
e99h2121
1
330
Rubykaigiの振り返り/fbc-meetup-20240530
yswengineer
0
5.6k
Featured
See All Featured
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
5
220
No one is an island. Learnings from fostering a developers community.
thoeni
16
2.2k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
358
22k
Side Projects
sachag
451
41k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
19
7k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
10
3.6k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
138
42k
Rails Girls Zürich Keynote
gr2m
91
13k
Creatively Recalculating Your Daily Design Routine
revolveconf
213
11k
Bootstrapping a Software Product
garrettdimon
PRO
302
110k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
23
1.5k
How GitHub Uses GitHub to Build GitHub
holman
471
290k
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 による事前バリデーション(書籍例) 【1】Progressive Enhancement に関する書籍内容の紹介 JS オフ環境では
action が即座に実行される
<form action={formDispatch} onSubmit による事前バリデーション(書籍例) 【1】Progressive Enhancement に関する書籍内容の紹介 JS オン環境では
action の前に onSubmit が実行される
<form action={formDispatch} 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} 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} 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} 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} 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 に関する近況アップデート
ご清聴ありがとうございました