Upgrade to Pro — share decks privately, control downloads, hide ads and more …

標準最高!標準はださくないぞ! at fukuoka.ts #1

yoiwamoto
August 30, 2024

標準最高!標準はださくないぞ! at fukuoka.ts #1

2024/08/30 に行われた fukuoka.ts #1 での 10min 登壇です。
https://fukuoka-ts.connpass.com/event/320038/

yoiwamoto

August 30, 2024
Tweet

Other Decks in Technology

Transcript

  1. 02. Web 標準について f u k u o k a

    . t s # 1 2024年8月30日 fukuoka.ts
  2. 02. Web 標準について これだけの HTML で実現しています (※あと少しの CSS) <form> は

    submit されると、action で指定した URL に、name を key とする FormData を送る button[type=”submit”] は form の submit をトリ ガー type, required, pattern などの組み込みバリデー ション CSS の :user-invalid 擬似クラスは、input が dirty でありかつバリデーションに違反している時 に適用される CSS の :has で、input:user-invalid を持つような label の span の表示非表示を制御できる
  3. これだけの HTML で実現しています (※あと少しの CSS) <form> は submit されると、action で指定した

    URL に、name を key とする FormData を送る button[type=”submit”] は form の submit をトリ ガー type, required, pattern などの組み込みバリデー ション CSS の :user-invalid 擬似クラスは、input が dirty でありかつバリデーションに違反している時 に適用される CSS の :has で、input:user-invalid を持つような label の span の表示非表示を制御できる Form submission - HTML Standard - whatwg Constraints - HTML Standard - whatwg user-pseudos user-pseudos 02. Web 標準について
  4. 03. 標準から外れるコスト f u k u o k a .

    t s # 1 2024年8月30日 fukuoka.ts
  5. (ちなみに) React でのよくある実装は 03. 標準から外れるコスト ライブラリが JS で入力値を管理 DOM イベントを基に独自のタイミングで

    バリデーションを実施 ライブラリでバリデーションルールを定義 onClick 時に値を取得して JSON.stringify() して fetch で POST エラーがあれば条件分岐で表示
  6. 04. App Router での標準寄せの実践 f u k u o k

    a . t s # 1 2024年8月30日 fukuoka.ts
  7. フォーム編 f u k u o k a . t

    s # 1 2024年8月30日 fukuoka.ts 04. App Router での標準寄せの実践 ※この例での“標準”は、ブラウザ組み込みの典型的なユースケース をサポートする機能の利用のことです。 (JavaScript も標準だろ、 という話なので)
  8. ちなみにバックエンドは Server Action でも実装できます。 FormData を受け取っても Object.fromEntries で serialize したら

    zod とかで簡単にバリデーションできるよ。 FormData を使うようにすると、state の管理、action への 値の引き渡しのコードが消えます。 (バックエンドのバリデーションは責務が違うのと、クライ アントサイド JS のサイズを気にしなくていいのでカジュア ルに zod が登場) 1. フォームはできるだけ状態を管理せず、 HTML に任せてみる 04. App Router での標準寄せの実践
  9. 2.必要に応じて JavaScript を追加 action や FormData のところは据え置きで、form に渡す action を

    Client Component で変更します。 children を受け取る形にすると、子供は Server Component のままで幸せになれます。↓ 04. App Router での標準寄せの実践
  10. 3.バックエンドから受け取ったエラーを フィードバック UNIQUE 制約違反等であれば、バックエンドから受け 取ったエラーを表示したくなります。 useActionState を使えば、状態を管理しなくても Server Action からの返り値をシームレスに

    UI に接続 できます。 useActionState は現在 canary に実装されている hook で、useReducer の非同期 action 版といった感 じです。 04. App Router での標準寄せの実践 ※動画です
  11. つまり、 、 まずはミニマムに HTML・CSS だけで作っても、段階的にリッチにしていくこと は容易。 Next.js App Router では比較的標準に準拠したワークフローが使いやすく整備さ

    れている (progressive enhancement の文脈もあり) 。 クライアントサイドに独自実装が少ないとバンドルサイズも減って嬉しい。 Button の onClick で fetch、とする前に一度 <form> で実装してみませんか? 3倍速く、まず動かすことができます! 04. App Router での標準寄せの実践