Share
Embed
Slide 1
Slide 1 text
JavaScript なしで動作する
モダンなコードの書き方
azukiazusa / JSConf JP 2023
Slide 2
Slide 2 text
アジェンダ
● 昨今のフレームワークの動向
○ 開発者に求められていること
● JavaScript を使わないで動くコードの紹介
● まとめ
Slide 3
Slide 3 text
アジェンダ
● 昨今のフレームワークの動向
○ 開発者に求められていること
● JavaScript を使わないで動くコードの紹介
● まとめ
Slide 4
Slide 4 text
Progressive Enhancement
プログレッシブエンハンスメント
Slide 5
Slide 5 text
プログレッシブエンハンスメントな
フォーム
● 可能な限り多くのユーザーに対して機能を提供する
○ クライアントの JavaScript が動作しない環境でも、
必要不可欠な機能を提供する
● JavaScript が動作するユーザーに対しては、リッチな体
験を提供する
Slide 6
Slide 6 text
ハイドレーション前でも操作が
可能
FID/INP に有利
Slide 7
Slide 7 text
SvelteKit のフォーム
● 古典的な HTML のフォーム
● JavaScript が有効な環境であれ
ば、フルページリロードを取り
除くなど、ユーザーの体験を強
化する
Slide 8
Slide 8 text
Remix のフォーム
Slide 9
Slide 9 text
Next.js Server Actions
Slide 10
Slide 10 text
フォームの UI が JavaScript
なしで動作することが必要
Slide 11
Slide 11 text
React Server Components
Slide 12
Slide 12 text
Server Components がデフォルトとい
うメンタルモデル
● 従来はひとまず useState() から考えていた
● useState() を使うには、"use client" を宣言するという
ステップが追加される
○ useState() を使うかわりにパフォーマンスの悪化を受
け入れますよ、という宣言のようなもの
● 先に別の手段を取れないか？を考えるように
Slide 13
Slide 13 text
開発者に求められていること
JavaScript で実現していた機能を HTML や CSS など他の
技術に置き換えつつ、ユーザーの体験を損なわないようにす
る。
Slide 14
Slide 14 text
HTML や CSS の仕様は進化
しつつあり、Web の表現力が
上がっている
Slide 15
Slide 15 text
JavaScript を使わないで動く
コードの紹介
https://github.com/azukiazusa1/jsconfjp-2023-demo
Slide 16
Slide 16 text
CSS の :has() 擬似クラス
● 引数で渡した要素が存在する場合にスタイルを適用する
○ CSS 条件式のようなもの使用できる
Slide 17
Slide 17 text
CSS の :has() 擬似クラス
.form-group 要素の中に
検証に失敗した要素
(:invalid 擬似クラス)があ
れば、エラーメッセージ
を表示する
Slide 18
Slide 18 text
:user-invalid 擬似クラス
● :invalid 擬似クラスはページをロー
ドした直後や入力中に評価されると
いう問題がある
○ 今までは JavaScript を使用し
て任意のタイミングでフィード
バックを返していた
● :user-invalid はユーザーが操作した
後に検証される
Slide 19
Slide 19 text
field-sizing: content
入力量に応じて高さが可変する
textarea を CSS のみで実現
Slide 20
Slide 20 text
ポップオーバー API
JavaScript を使わずにポップアップを表示する。
● ポップオーバーの開閉状態を切り替える要素に popovertarget 属性を指定
● ポップオーバーのコンテンツとなる要素に popover を指定
Slide 21
Slide 21 text
アクセシビリティ上必要な機能を備えている
● ポップアップの外側をクリックするとポップアップが閉じる
● Escape キーを押すとポップアップが閉じる
● ポップアップが非表示になったときに、ポップアップ内にフォーカスがある
場合前にフォーカスしていた要素にフォーカスが戻る
● 1 度に 1 つのポップアップしか表示できない
● ポップオーバーの表示・非表示を切り替える要素に expanded ステートがア
クセシビリティツリーに公開される（aria-expanded 属性と同等）
Slide 22
Slide 22 text
要素
● カスタマイズ可能なセレクトボックス
● が提供する擬似クラスを
通じてスタイリングを行う
● スロットによりカスタマイズする
○ スロットは Web Components の
と同じ、独自の拡張を入れ
ることができるプレースホルダー
Slide 23
Slide 23 text
●
はリストボックスを開閉する要
素として振る舞う
● 要素には、
現在選択されているオプション
のテキストを表示する
● 内に ![]()
要素を
含めるなど、従来の
では不可能なパターンの実装も
可能
スロットで拡張する例
Slide 24
Slide 24 text
Invokers
JavaScript を使わずにインタラクションを追加する
● 要素に invoketarget 属性を指定する
○ invoketarget の値は対象の要素の ID
● invokeaction 属性でインタラクションの動作を指定できる
Slide 25
Slide 25 text
様々な要素が対象となる
● popover：ポップオーバーの開閉
● ダイアログの開閉
● ：クロージャーの開閉
● , ：ピッカーの表示（showPicker()）
● ：再生、停止、ミュート
● ：再生、停止、ミュート
● 任意の要素：fullscreen
Invokers
Slide 26
Slide 26 text
OpenUI コミュニティグループ
https://open-ui.org/
Slide 27
Slide 27 text
まとめ
● フレームワークの機能を最大限発揮するために、
JavaScript に頼らないで機能を実現することが求められ
ている
● HTML や CSS の仕様は進化しつつあり、従来は
JavaScript を使わなければ実現できなかった機能を置き
換えられるようになってきている