ServerAction で Progressive Enhancement はどこまで頑張れるか？ / progressive-enhancement-with-server-action

Node学園 42時限目 Next.js AppRouterについて https://nodejs.connpass.com/event/315443/

Transcript

1. Node学園 42時限目 ー Next.js AppRouterについて ServerAction で Progressive Enhancement は どこまで頑張れるか？
2. 自己紹介 ▪　Takepepe（吉井 健文） ▪　フロントエンドエンジニア ▪　社内横断開発組織に所属 ▪　フロントエンド開発の横断サポート
3. 実践Next.js – App Router で進化する Web アプリ開発 ▪　2024.3/16 技術評論社より刊行 ▪　Next.js App Router を題材にした書籍 ▪　一通りの機能を備えたサンプル App を対象に解説 ▪　公式ドキュメントの分かりづらい箇所を重点的に
4. ▪　【1】Progressive Enhancement に関する書籍内容の紹介 ▪　【2】Progressive Enhancement 対応はどこまでやるべきか？ ▪　【3】Server Action に関する近況アップデート Agenda
5. 【1】Progressive Enhancement に関する 　　 書籍内容の紹介
6. ▪　Progressive Enhancement とは？ Progressive Enhancement と React 【1】Progressive Enhancement に関する書籍内容の紹介
7. ▪　Progressive Enhancement とは？ ・　MDN引用 　　https://developer.mozilla.org/ja/docs/Glossary/Progressive_Enhancement Progressive Enhancement と React 【1】Progressive Enhancement に関する書籍内容の紹介
8. ▪　Progressive Enhancement とは？ ・　MDN引用 　　https://developer.mozilla.org/ja/docs/Glossary/Progressive_Enhancement 　　> 可能な限り多くのユーザーに不可欠なコンテンツと 　　機能のベースラインを提供することを中心とした設計哲学 Progressive Enhancement と React 【1】Progressive Enhancement に関する書籍内容の紹介
9. React や Next.js ドキュメントでも使用されているワード ▪　Progressive Enhancement とは？ ・　MDN引用 　　https://developer.mozilla.org/ja/docs/Glossary/Progressive_Enhancement 　　> 可能な限り多くのユーザーに不可欠なコンテンツと 　　機能のベースラインを提供することを中心とした設計哲学 Progressive Enhancement と React 【1】Progressive Enhancement に関する書籍内容の紹介
10. ▪　Server Component／Server Action で身近になった設計指針 Progressive Enhancement と React 【1】Progressive Enhancement に関する書籍内容の紹介
11. ▪　Server Component／Server Action で身近になった設計指針 ・　useFormState と Server Action により、JS オフでも POST が可能に Progressive Enhancement と React 【1】Progressive Enhancement に関する書籍内容の紹介
12. ▪　Server Component／Server Action で身近になった設計指針 ・　useFormState と Server Action により、JS オフでも POST が可能に ・　ハイドレーション前でも、Form の送信が可能 Progressive Enhancement と React 【1】Progressive Enhancement に関する書籍内容の紹介
13. API Client & API Routes による従来アプローチでは不可能だった実装 ▪　Server Component／Server Action で身近になった設計指針 ・　useFormState と Server Action により、JS オフでも POST が可能に ・　ハイドレーション前でも、Form の送信が可能 Progressive Enhancement と React 【1】Progressive Enhancement に関する書籍内容の紹介
14. Form 機能のベースラインとして、 JS オフでも最低限 POST ができるように ▪　Server Component／Server Action で身近になった設計指針 ・　useFormState と Server Action により、JS オフでも POST が可能に ・　ハイドレーション前でも、Form の送信が可能 Progressive Enhancement と React 【1】Progressive Enhancement に関する書籍内容の紹介
15. ▪　Form 機能のベースラインとして留意すること JS オフでも機能する Form 実装 【1】Progressive Enhancement に関する書籍内容の紹介
16. ▪　Form 機能のベースラインとして留意すること ・　useState で入力値を管理しない JS オフでも機能する Form 実装 【1】Progressive Enhancement に関する書籍内容の紹介
17. ▪　Form 機能のベースラインとして留意すること ・　useState で入力値を管理しない ・　Form は非制御コンポーネントを使用して構成 JS オフでも機能する Form 実装 【1】Progressive Enhancement に関する書籍内容の紹介
18. ▪　Form 機能のベースラインとして留意すること ・　useState で入力値を管理しない ・　Form は非制御コンポーネントを使用して構成 ・　<input type='hidden' /> を活用 JS オフでも機能する Form 実装 【1】Progressive Enhancement に関する書籍内容の紹介
19. JS オフでは useState が機能しないため ▪　Form 機能のベースラインとして留意すること ・　useState で入力値を管理しない ・　Form は非制御コンポーネントを使用して構成 ・　<input type='hidden' /> を活用 JS オフでも機能する Form 実装 【1】Progressive Enhancement に関する書籍内容の紹介
20. ▪　useFormState フックを使用する JS オフでも機能する Form 実装 【1】Progressive Enhancement に関する書籍内容の紹介
21. ▪　useFormState フックを使用する JS オフでも機能する Form 実装 【1】Progressive Enhancement に関する書籍内容の紹介 const [formState, formDispatch] = useFormState(updateAction, initialFormState);
22. const [formState, formDispatch] = useFormState(updateAction, initialFormState); ▪　useFormState フックを使用する ・　Client Component で使用するフック JS オフでも機能する Form 実装 【1】Progressive Enhancement に関する書籍内容の紹介
23. const [formState, formDispatch] = useFormState(updateAction, initialFormState); ▪　useFormState フックを使用する ・　Client Component で使用するフック ・　第 1 引数には Server Action を渡す（updateAction） JS オフでも機能する Form 実装 【1】Progressive Enhancement に関する書籍内容の紹介
24. const [formState, formDispatch] = useFormState(updateAction, initialFormState); ▪　useFormState フックを使用する ・　Client Component で使用するフック ・　第 1 引数には Server Action を渡す（updateAction） ・　第 2 引数には「状態（initialFormState）」を渡す JS オフでも機能する Form 実装 【1】Progressive Enhancement に関する書籍内容の紹介
25. const [formState, formDispatch] = useFormState(updateAction, initialFormState); ▪　useFormState フックを使用する ・　Client Component で使用するフック ・　第 1 引数には Server Action を渡す（updateAction） ・　第 2 引数には「状態（initialFormState）」を渡す ・　Submit を跨いで更新される formState を使う JS オフでも機能する Form 実装 【1】Progressive Enhancement に関する書籍内容の紹介
26. 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 に関する書籍内容の紹介
27. 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 に関する書籍内容の紹介
28. export async function updateAction( prevState: FormState, formData: FormData ): Promise<FormState> {} useFormState に渡す ServerAction 【1】Progressive Enhancement に関する書籍内容の紹介 useFormState に渡す Server Action は、実装制約を満たす必要がある
29. export async function updateAction( prevState: FormState, formData: FormData ): Promise<FormState> {} useFormState に渡す ServerAction 【1】Progressive Enhancement に関する書籍内容の紹介 第一引数に FormState をとり、FormState を返す非同期関数とすること
30. 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 が発生したか否かを判定する状態をもつ
31. 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 が発生したか否かを判定する状態をもつ
32. ServerAction 内で発生したエラー表現（書籍例） 【1】Progressive Enhancement に関する書籍内容の紹介 Server Action ではエラーをどう扱うか？ export async function updateAction(prevState: FormState, formData: FormData): Promise<FormState> {
33. ServerAction 内で発生したエラー表現（書籍例） 【1】Progressive Enhancement に関する書籍内容の紹介 戻り値の FormState で判別する export async function updateAction(prevState: FormState, formData: FormData): Promise<FormState> {
34. 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 に関する書籍内容の紹介 例えば、バリデーションエラーが発生した場合
35. 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 に関する書籍内容の紹介 例えば、バリデーションエラーが発生した場合
36. 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 される
37. 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 を返す
38. 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 が含まれていたら「エラー文言」を表示する
39. <form action={formDispatch} onSubmit={handleSubmit}></form> onSubmit による事前バリデーション（書籍例） 【1】Progressive Enhancement に関する書籍内容の紹介 JS オフ環境では action が即座に実行される
40. <form action={formDispatch} onSubmit={handleSubmit}></form> onSubmit による事前バリデーション（書籍例） 【1】Progressive Enhancement に関する書籍内容の紹介 JS オン環境では action の前に onSubmit が実行される
41. <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 が実行される
42. <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 の前にバリデーションを実行する
43. <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 を中止する」
44. <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 を中止する」
45. <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 が実行される
46. ▪　事前バリデーションは「 より良い体験の一部」という方針 onSubmit による事前バリデーション（書籍例） 【1】Progressive Enhancement に関する書籍内容の紹介
47. ▪　事前バリデーションは「 より良い体験の一部」という方針 ・　JS オフ時でも、Form の送信はできる onSubmit による事前バリデーション（書籍例） 【1】Progressive Enhancement に関する書籍内容の紹介
48. ▪　事前バリデーションは「 より良い体験の一部」という方針 ・　JS オフ時でも、Form の送信はできる ・　JS オフ時でも、Server Action 内でバリデーションはする onSubmit による事前バリデーション（書籍例） 【1】Progressive Enhancement に関する書籍内容の紹介
49. ▪　事前バリデーションは「 より良い体験の一部」という方針 ・　JS オフ時でも、Form の送信はできる ・　JS オフ時でも、Server Action 内でバリデーションはする ・　JS オン時には、追加で事前バリデーションをする onSubmit による事前バリデーション（書籍例） 【1】Progressive Enhancement に関する書籍内容の紹介
50. 「無駄に Server Action が送られないなら、より嬉しいよね」という方針 ▪　事前バリデーションは「 より良い体験の一部」という方針 ・　JS オフ時でも、Form の送信はできる ・　JS オフ時でも、Server Action 内でバリデーションはする ・　JS オン時には、追加で事前バリデーションをする onSubmit による事前バリデーション（書籍例） 【1】Progressive Enhancement に関する書籍内容の紹介
51. 詳細は「実践 Next.js」をご覧ください ▪　事前バリデーションは「 より良い体験の一部」という方針 ・　JS オフ時でも、Form の送信はできる ・　JS オフ時でも、Server Action 内でバリデーションはする ・　JS オン時には、追加で事前バリデーションをする onSubmit による事前バリデーション（書籍例） 【1】Progressive Enhancement に関する書籍内容の紹介
52. 【2】Progressive Enhancement 対応は 　　 どこまでやるべきか？
53. ▪　useFormState で確保した State を活用すると、それなりに減らせる JSオン／オフで、どこまで差分を減らせるか？ 【2】Progressive Enhancement 対応はどこまでやるべきか？
54. ▪　useFormState で確保した State を活用すると、それなりに減らせる ・　Form 送信をして、バリデーションエラーを表示する JSオン／オフで、どこまで差分を減らせるか？ 【2】Progressive Enhancement 対応はどこまでやるべきか？
55. ▪　useFormState で確保した State を活用すると、それなりに減らせる ・　Form 送信をして、バリデーションエラーを表示する ・　Form 送信をして、エラーモーダルを表示する JSオン／オフで、どこまで差分を減らせるか？ 【2】Progressive Enhancement 対応はどこまでやるべきか？
56. ▪　useFormState で確保した State を活用すると、それなりに減らせる ・　Form 送信をして、バリデーションエラーを表示する ・　Form 送信をして、エラーモーダルを表示する ・　https://github.com/takefumi-yoshii/useformstate-example JSオン／オフで、どこまで差分を減らせるか？ 【2】Progressive Enhancement 対応はどこまでやるべきか？
57. ▪　実装アプローチが根本的に異なる 「対応をどこまでやるべきか？」という線引きが必要 【2】Progressive Enhancement 対応はどこまでやるべきか？
58. ▪　実装アプローチが根本的に異なる ・　「JS オフでも動くForm」を考えることは、これまでなかった 「対応をどこまでやるべきか？」という線引きが必要 【2】Progressive Enhancement 対応はどこまでやるべきか？
59. ▪　実装アプローチが根本的に異なる ・　「JS オフでも動くForm」を考えることは、これまでなかった ・　ブラウザに保持される State 無しでロジックが組めるか？ 「対応をどこまでやるべきか？」という線引きが必要 【2】Progressive Enhancement 対応はどこまでやるべきか？
60. ▪　実装アプローチが根本的に異なる ・　「JS オフでも動くForm」を考えることは、これまでなかった ・　ブラウザに保持される State 無しでロジックが組めるか？ ・　JS オン／オフ、どちらも考慮された実装を維持できるか？ 「対応をどこまでやるべきか？」という線引きが必要 【2】Progressive Enhancement 対応はどこまでやるべきか？
61. 従来の知識で通用しない場面が出てくる可能性もあり ▪　実装アプローチが根本的に異なる ・　「JS オフでも動くForm」を考えることは、これまでなかった ・　ブラウザに保持される State 無しでロジックが組めるか？ ・　JS オン／オフ、どちらも考慮された実装を維持できるか？ 「対応をどこまでやるべきか？」という線引きが必要 【2】Progressive Enhancement 対応はどこまでやるべきか？
62. ▪　要件定義が細かく決められている現場の場合、合意形成が必要 「対応をどこまでやるべきか？」という線引きが必要 【2】Progressive Enhancement 対応はどこまでやるべきか？
63. ▪　要件定義が細かく決められている現場の場合、合意形成が必要 ・　要件定義では、どのように明文化するのか？ 「対応をどこまでやるべきか？」という線引きが必要 【2】Progressive Enhancement 対応はどこまでやるべきか？
64. ▪　要件定義が細かく決められている現場の場合、合意形成が必要 ・　要件定義では、どのように明文化するのか？ ・　手動・自動テストにおいて、どのように検証するのか？ 「対応をどこまでやるべきか？」という線引きが必要 【2】Progressive Enhancement 対応はどこまでやるべきか？
65. ステークホルダー間で合意不要、開発者意思で実装できるなら問題なし ▪　要件定義が細かく決められている現場の場合、合意形成が必要 ・　要件定義では、どのように明文化するのか？ ・　手動・自動テストにおいて、どのように検証するのか？ 「対応をどこまでやるべきか？」という線引きが必要 【2】Progressive Enhancement 対応はどこまでやるべきか？
66. ▪　JS オフ環境でも使用できる（動機づけとして弱い） Progressive Enhancement を維持する目的は？ 【2】Progressive Enhancement 対応はどこまでやるべきか？
67. ▪　JS オフ環境でも使用できる（動機づけとして弱い） ▪　ハイドレーションに関係なく即座に Form 送信ができる Progressive Enhancement を維持する目的は？ 【2】Progressive Enhancement 対応はどこまでやるべきか？
68. ▪　JS オフ環境でも使用できる（動機づけとして弱い） ▪　ハイドレーションに関係なく即座に Form 送信ができる ・　ロースペックデバイスに効果あり？ Progressive Enhancement を維持する目的は？ 【2】Progressive Enhancement 対応はどこまでやるべきか？
69. ▪　JS オフ環境でも使用できる（動機づけとして弱い） ▪　ハイドレーションに関係なく即座に Form 送信ができる ・　ロースペックデバイスに効果あり？ ・　重厚なページで効果あり？ Progressive Enhancement を維持する目的は？ 【2】Progressive Enhancement 対応はどこまでやるべきか？
70. ▪　JS オフ環境でも使用できる（動機づけとして弱い） ▪　ハイドレーションに関係なく即座に Form 送信ができる ・　ロースペックデバイスに効果あり？ ・　重厚なページで効果あり？ ・　INP（Core Web Vitals）に効果あり？ Progressive Enhancement を維持する目的は？ 【2】Progressive Enhancement 対応はどこまでやるべきか？
71. Pros / Cons を検討のうえ判断が必要 ▪　JS オフ環境でも使用できる（動機づけとして弱い） ▪　ハイドレーションに関係なく即座に Form 送信ができる ・　ロースペックデバイスに効果あり？ ・　重厚なページで効果あり？ ・　INP（Core Web Vitals）に効果あり？ Progressive Enhancement を維持する目的は？ 【2】Progressive Enhancement 対応はどこまでやるべきか？
72. 【3】Server Action に関する近況アップデート
73. ▪　【A】useActionState が生える 書籍刊行から1ヶ月。この間に起きたアップデート 【3】Server Action に関する近況アップデート
74. ▪　【A】useActionState が生える ▪　【B】Parallel Routes のバグが解消 書籍刊行から1ヶ月。この間に起きたアップデート 【3】Server Action に関する近況アップデート
75. いずれも、書籍サンプルに小さな影響あり ▪　【A】useActionState が生える ▪　【B】Parallel Routes のバグが解消 書籍刊行から1ヶ月。この間に起きたアップデート 【3】Server Action に関する近況アップデート
76. ▪　useActionState とは？ 【A】useActionState が生える 【3】Server Action に関する近況アップデート https://github.com/facebook/react/pull/28491
77. ▪　useActionState とは？ ・　Renames useFormState to useActionState 【A】useActionState が生える 【3】Server Action に関する近況アップデート https://github.com/facebook/react/pull/28491
78. ▪　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
79. ▪　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
80. ▪　useFormState と useActionState の違い const [formState, formDispatch] = useFormState(updateAction, initialFormState); const [isPending] = useFormStatus(); 【A】useActionState が生える 【3】Server Action に関する近況アップデート isPending の参照のために useFormStatus を併用する必要がある
81. ▪　useFormState と useActionState の違い const [formState, formDispatch, isPending] = useActionState(updateAction, initialFormState); 【A】useActionState が生える 【3】Server Action に関する近況アップデート useActionStatus では戻り値に isPending が含まれる
82. ▪　useFormState -> useActionState なぜ？ 【A】useActionState が生える 【3】Server Action に関する近況アップデート https://github.com/facebook/react/pull/28491
83. ▪　useFormState -> useActionState なぜ？ ・　実態として、Form ではなくAction の状態を参照している 【A】useActionState が生える 【3】Server Action に関する近況アップデート https://github.com/facebook/react/pull/28491
84. ▪　useFormState -> useActionState なぜ？ ・　実態として、Form ではなくAction の状態を参照している ・　ReactDOM への依存はない 【A】useActionState が生える 【3】Server Action に関する近況アップデート https://github.com/facebook/react/pull/28491
85. ▪　useFormState -> useActionState なぜ？ ・　実態として、Form ではなくAction の状態を参照している ・　ReactDOM への依存はない ・　"isPending" を Action と関連づけることで混乱を避ける 【A】useActionState が生える 【3】Server Action に関する近況アップデート https://github.com/facebook/react/pull/28491
86. ▪　書籍では useFormState のサンプルを多数掲載していますが、、、、 【A】useActionState が生える 【3】Server Action に関する近況アップデート
87. ▪　書籍では useFormState のサンプルを多数掲載していますが、、、、 ・　useFormState が非推奨 というわけではない 【A】useActionState が生える 【3】Server Action に関する近況アップデート
88. ▪　書籍では useFormState のサンプルを多数掲載していますが、、、、 ・　useFormState が非推奨 というわけではない ・　ただし useActionState を優先するように促される見込み 【A】useActionState が生える 【3】Server Action に関する近況アップデート
89. ▪　書籍では useFormState のサンプルを多数掲載していますが、、、、 ・　useFormState が非推奨 というわけではない ・　ただし useActionState を優先するように促される見込み ・　実装詳細に関しては、サンプルに大きくは影響なし 【A】useActionState が生える 【3】Server Action に関する近況アップデート
90. 今後は useActionState を使用した方が望ましい ▪　書籍では useFormState のサンプルを多数掲載していますが、、、、 ・　useFormState が非推奨 というわけではない ・　ただし useActionState を優先するように促される見込み ・　実装詳細に関しては、サンプルに大きくは影響なし 【A】useActionState が生える 【3】Server Action に関する近況アップデート
91. ▪　Parallel Routes モーダル内の Server Action バグ 【B】Parallel Routes のバグが解消 【3】Server Action に関する近況アップデート
92. ▪　Parallel Routes モーダル内の Server Action バグ ・　実は、開いたモーダル内で「いいね」を押下するとクラッシュする 【B】Parallel Routes のバグが解消 【3】Server Action に関する近況アップデート
93. 【B】Parallel Routes のバグが解消 【3】Server Action に関する近況アップデート ▪　Parallel Routes モーダル内の Server Action バグ ・　実は、開いたモーダル内で「いいね」を押下するとクラッシュする ・　バグが修正されることを期待して、書籍サンプルはそのままとした
94. 【B】Parallel Routes のバグが解消 【3】Server Action に関する近況アップデート ▪　Parallel Routes モーダル内の Server Action バグ ・　実は、開いたモーダル内で「いいね」を押下するとクラッシュする ・　バグが修正されることを期待して、書籍サンプルはそのままとした ・　v14.2.2 現在、このバグは解消
95. すでにリポジトリをクローンされた方は、 pull & 再インストールをお願いします ▪　Parallel Routes モーダル内の Server Action バグ ・　実は、開いたモーダル内で「いいね」を押下するとクラッシュする ・　バグが修正されることを期待して、書籍サンプルはそのままとした ・　v14.2.2 現在、このバグは解消 【B】Parallel Routes のバグが解消 【3】Server Action に関する近況アップデート
96. ▪　Server Action 使用（関連機能）は以前より安定してきている Server Action 使用は以前より安定 【3】Server Action に関する近況アップデート
97. ▪　Server Action 使用（関連機能）は以前より安定してきている ▪　Progressive Enhancement はベストエフォートではある Server Action 使用は以前より安定 【3】Server Action に関する近況アップデート
98. Server Action を使用できるなら、Progressive Enhancement に挑戦してみても良いかもしれない ▪　Server Action 使用（関連機能）は以前より安定してきている ▪　Progressive Enhancement はベストエフォートではある Server Action 使用は以前より安定 【3】Server Action に関する近況アップデート
99. ご清聴ありがとうございました