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
標準最高!標準はださくないぞ! at fukuoka.ts #1
Search
yoiwamoto
August 30, 2024
Technology
1
550
標準最高!標準はださくないぞ! at fukuoka.ts #1
2024/08/30 に行われた fukuoka.ts #1 での 10min 登壇です。
https://fukuoka-ts.connpass.com/event/320038/
yoiwamoto
August 30, 2024
Tweet
Share
More Decks by yoiwamoto
See All by yoiwamoto
プロダクト開発でも使おう 関数のオーバーロード
yoiwamoto
0
510
Other Decks in Technology
See All in Technology
「どこから読む?」コードとカルチャーに最速で馴染むための実践ガイド
zozotech
PRO
0
450
Automating Web Accessibility Testing with AI Agents
maminami373
0
1.3k
COVESA VSSによる車両データモデルの標準化とAWS IoT FleetWiseの活用
osawa
1
290
エラーとアクセシビリティ
schktjm
1
1.3k
AIエージェント開発用SDKとローカルLLMをLINE Botと組み合わせてみた / LINEを使ったLT大会 #14
you
PRO
0
120
自作JSエンジンに推しプロポーザルを実装したい!
sajikix
1
180
企業の生成AIガバナンスにおけるエージェントとセキュリティ
lycorptech_jp
PRO
2
170
なぜテストマネージャの視点が 必要なのか? 〜 一歩先へ進むために 〜
moritamasami
0
220
💡Ruby 川辺で灯すPicoRubyからの光
bash0c7
0
120
【実演版】カンファレンス登壇者・スタッフにこそ知ってほしいマイクの使い方 / 大吉祥寺.pm 2025
arthur1
1
870
スマートファクトリーの第一歩 〜AWSマネージドサービスで 実現する予知保全と生成AI活用まで
ganota
2
220
AI開発ツールCreateがAnythingになったよ
tendasato
0
130
Featured
See All Featured
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.5k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
61k
For a Future-Friendly Web
brad_frost
180
9.9k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6k
Producing Creativity
orderedlist
PRO
347
40k
How GitHub (no longer) Works
holman
315
140k
Making Projects Easy
brettharned
117
6.4k
Scaling GitHub
holman
463
140k
Transcript
標準最高! 標準はださくないぞ! Yo Iwamoto / よう @yoiwamoto f u k
u o k a . t s # 1 2024年8月30日 fukuoka.ts
目次 01 自己紹介 02 Web 標準について 03 標準から外れるコスト 04 App
Router での標準寄せの実践
01. 自己紹介 Yo Iwamoto / よう 株式会社SmartHR で プロダクトエンジニアをしています @yoiwamoto
2024年8月30日 fukuoka.ts
02. Web 標準について f u k u o k a
. t s # 1 2024年8月30日 fukuoka.ts
なんの変哲もないフォーム ※動画です
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 の表示非表示を制御できる
これだけの 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 標準について
様々な標準化団体 Web 技術は様々な標準化団体により標準化されています。 W3C WAI → WCAG CSS Working Group
WHATWG ... HTML Living Standard ECMA ... ECMAScript 02. Web 標準について
03. 標準から外れるコスト f u k u o k a .
t s # 1 2024年8月30日 fukuoka.ts
(ちなみに) React でのよくある実装は 03. 標準から外れるコスト ライブラリが JS で入力値を管理 DOM イベントを基に独自のタイミングで
バリデーションを実施 ライブラリでバリデーションルールを定義 onClick 時に値を取得して JSON.stringify() して fetch で POST エラーがあれば条件分岐で表示
当然、敢えて組み込み機能を JS でやるメリットがあるということ All JS であることでスキーマが型安全にな ったり、共通化できたりする 標準にない複雑なバリデーションや、 きめ細かなインタラクション設計が可能に なる
03. 標準から外れるコスト
一方で、全て JS でやるのが当たり前で、 標準から外れるコストが見過ごされていないか、 、? ライブラリに依存するコスト 調査・導入の検討 定期的なバージョンアップ 独自のインターフェースの学習 時が来たら、別の技術へのリプレイス
品質を自チームで担保するコスト Real World の入力の多様さはすさまじく、対応するのは困難 etc... 03. 標準から外れるコスト
そうは言っても標準じゃ実現できないことが多い、 、 → 標準・非標準のトレードオフを正しく認識して判断するのが重要 (最近は、HTML・CSS でまずは作ってみる、という選択肢があまりない?ような気がするの で敢えて当たり前のことを書いてみています。 ) 標準 独自実装
柔軟性 複雑な要件の実現可能性 ▲ ✅ 品質を保つ難易度 ✅ ▲ メンテナンス性 ✅ ▲ 学習コスト ✅ ▲ 配信サイズ ✅ ▲ ※当然ですがケースバイケースなので、表はイメージです。
04. App Router での標準寄せの実践 f u k u o k
a . t s # 1 2024年8月30日 fukuoka.ts
フォーム編 f u k u o k a . t
s # 1 2024年8月30日 fukuoka.ts 04. App Router での標準寄せの実践 ※この例での“標準”は、ブラウザ組み込みの典型的なユースケース をサポートする機能の利用のことです。 (JavaScript も標準だろ、 という話なので)
1. フォームはできるだけ状態を管理せず、 HTML に任せてみる 開発しているプロダクトでこれが受け入れられる可能性もな くはない。なぜなら全然動くので。 Server Component なのでバンドルサイズも減ってハッピー 04.
App Router での標準寄せの実践
ちなみにバックエンドは Server Action でも実装できます。 FormData を受け取っても Object.fromEntries で serialize したら
zod とかで簡単にバリデーションできるよ。 FormData を使うようにすると、state の管理、action への 値の引き渡しのコードが消えます。 (バックエンドのバリデーションは責務が違うのと、クライ アントサイド JS のサイズを気にしなくていいのでカジュア ルに zod が登場) 1. フォームはできるだけ状態を管理せず、 HTML に任せてみる 04. App Router での標準寄せの実践
2.必要に応じて JavaScript を追加 「成功したらトーストを出したい!」 「ルーターキャッシュをリフレッシュしたい!」 やっぱり色々あると思うので、部分的に JavaScript を追加します。 04.
App Router での標準寄せの実践 ※動画です
2.必要に応じて JavaScript を追加 action や FormData のところは据え置きで、form に渡す action を
Client Component で変更します。 children を受け取る形にすると、子供は Server Component のままで幸せになれます。↓ 04. App Router での標準寄せの実践
3.バックエンドから受け取ったエラーを フィードバック UNIQUE 制約違反等であれば、バックエンドから受け 取ったエラーを表示したくなります。 useActionState を使えば、状態を管理しなくても Server Action からの返り値をシームレスに
UI に接続 できます。 useActionState は現在 canary に実装されている hook で、useReducer の非同期 action 版といった感 じです。 04. App Router での標準寄せの実践 ※動画です
3.バックエンドから受け取ったエラーを フィードバック こんな感じ。 Server Action はほとんど RPC と言えるので、レスポ ンス型も実装も隣のファイルで最高(脱線) 。
04. App Router での標準寄せの実践
つまり、 、 まずはミニマムに HTML・CSS だけで作っても、段階的にリッチにしていくこと は容易。 Next.js App Router では比較的標準に準拠したワークフローが使いやすく整備さ
れている (progressive enhancement の文脈もあり) 。 クライアントサイドに独自実装が少ないとバンドルサイズも減って嬉しい。 Button の onClick で fetch、とする前に一度 <form> で実装してみませんか? 3倍速く、まず動かすことができます! 04. App Router での標準寄せの実践
https://yoiw.dev @yoiwamoto ありがとうございました〜 2024年8月30日 fukuoka.ts