JavaScript なしで動作するモダンなコードの書き方

by azukiazusa

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

ﬁeld-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 を使わなければ実現できなかった機能を置き換えられるようになってきている