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

JavaScript なしで動作するモダンなコードの書き方 azukiazusa / JSConf JP 2023

アジェンダ • 昨今のフレームワークの動向 ◦ 開発者に求められていること • JavaScript を使わないで動くコードの紹介 • まとめ

Progressive Enhancement プログレッシブエンハンスメント

プログレッシブエンハンスメントなフォーム • 可能な限り多くのユーザーに対して機能を提供する ◦ クライアントの JavaScript が動作しない環境でも、必要不可欠な機能を提供する •
JavaScript が動作するユーザーに対しては、リッチな体験を提供する

ハイドレーション前でも操作が可能 FID/INP に有利

SvelteKit のフォーム • 古典的な HTML のフォーム • JavaScript が有効な環境であれば、フルページリロードを取り
除くなど、ユーザーの体験を強化する

Remix のフォーム

Next.js Server Actions

フォームの UI が JavaScript なしで動作することが必要

React Server Components

Server Components がデフォルトというメンタルモデル • 従来はひとまず useState() から考えていた • useState()
を使うには、"use client" を宣言するというステップが追加される ◦ useState() を使うかわりにパフォーマンスの悪化を受け入れますよ、という宣言のようなもの • 先に別の手段を取れないか？を考えるように

開発者に求められていること JavaScript で実現していた機能を HTML や CSS など他の技術に置き換えつつ、ユーザーの体験を損なわないようにする。

HTML や CSS の仕様は進化しつつあり、Web の表現力が上がっている

JavaScript を使わないで動くコードの紹介 https://github.com/azukiazusa1/jsconfjp-2023-demo

CSS の :has() 擬似クラス • 引数で渡した要素が存在する場合にスタイルを適用する ◦ CSS 条件式のようなもの使用できる

CSS の :has() 擬似クラス .form-group 要素の中に検証に失敗した要素 (:invalid 擬似クラス)があれば、エラーメッセージ
を表示する

:user-invalid 擬似クラス • :invalid 擬似クラスはページをロードした直後や入力中に評価されるという問題がある ◦ 今までは JavaScript
を使用して任意のタイミングでフィードバックを返していた • :user-invalid はユーザーが操作した後に検証される

ﬁeld-sizing: content 入力量に応じて高さが可変する textarea を CSS のみで実現

ポップオーバー API JavaScript を使わずにポップアップを表示する。 • ポップオーバーの開閉状態を切り替える要素に popovertarget 属性を指定 • ポップオーバーのコンテンツとなる要素に
popover を指定

アクセシビリティ上必要な機能を備えている • ポップアップの外側をクリックするとポップアップが閉じる • Escape キーを押すとポップアップが閉じる • ポップアップが非表示になったときに、ポップアップ内にフォーカスがある場合前にフォーカスしていた要素にフォーカスが戻る •
1 度に 1 つのポップアップしか表示できない • ポップオーバーの表示・非表示を切り替える要素に expanded ステートがアクセシビリティツリーに公開される（aria-expanded 属性と同等）

<selectlist> 要素 • カスタマイズ可能なセレクトボックス • <seliectlist> が提供する擬似クラスを通じてスタイリングを行う • スロットによりカスタマイズする
◦ スロットは Web Components の <slot> と同じ、独自の拡張を入れることができるプレースホルダー

• <button type=”selectlist”> はリストボックスを開閉する要素として振る舞う • <selectedoption> 要素には、現在選択されているオプションのテキストを表示する
• <option> 内に <img> 要素を含めるなど、従来の <select> では不可能なパターンの実装も可能スロットで拡張する例

Invokers JavaScript を使わずにインタラクションを追加する • <button> 要素に invoketarget 属性を指定する ◦ invoketarget
の値は対象の要素の ID • invokeaction 属性でインタラクションの動作を指定できる

様々な要素が対象となる • popover：ポップオーバーの開閉 • <dialog>ダイアログの開閉 • <detail>：クロージャーの開閉 • <input type=”date”>,
<input type=”file” >：ピッカーの表示（showPicker()） • <video>：再生、停止、ミュート • <audio>：再生、停止、ミュート • 任意の要素：fullscreen Invokers

OpenUI コミュニティグループ https://open-ui.org/

まとめ • フレームワークの機能を最大限発揮するために、 JavaScript に頼らないで機能を実現することが求められている • HTML や CSS
の仕様は進化しつつあり、従来は JavaScript を使わなければ実現できなかった機能を置き換えられるようになってきている

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

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

azukiazusa

More Decks by azukiazusa

Other Decks in Programming

Featured

Transcript