プロポーザル

SPAが主流となった現在、フロントエンドは複雑化しがちですが、「HTML-over-the-wire」という別の選択肢があります。
本セッションでは、サーバからHTMLを送信し、最小限のJavaScriptでUXを構築するこのアプローチと、その代表例であるHotwireの思想を紹介します。
HotwireはRails専用の技術と思われがちですが、本質はフレームワーク非依存の設計にあります。
デモではRailsを使用せず、Express.js上でTurboを動作させ、Turbo Drive / Frames / Streamsの仕組みを解説します。
また、SPAとは異なるアーキテクチャであるため、状態管理やCSRF、XSSなどセキュリティにおいて考慮すべき観点も異なる点について触れます。
SPAと比較しながら、HTML-over-the-wireが有効な場面と設計上の判断軸を整理します。

CSSは長らく「見た目を整えるための言語」とされてきました。しかし近年、：has（）、
Container Queries, Popover API, Custom Properties などの登場により、CSSはUIの状態や振る舞いを表現できる言語へと進化しています。
本セッションでは「モダン CSS はJavaScript を置き換えるのか？」という問いを起点に、CSSが実際に置き換え始めている領域と、依然としてJavaScriptが担うべき責務を整理します。
単なる機能紹介にとどまらず、「どこまでをCSSで書き、どこからをJavaScriptに任せるべきか」という設計上の判断基準を、実例を交えて紹介します。

Canvas APIはGoogle SheetsやFigmaなどリッチなWebアプリを支える技術ですが、Reactなどの宣言的UIフレームワークとは設計思想が異なり、組み合わせに悩むポイントが多くあります。
本トークでは、実務でCanvas APIを用いたテーブルUIの開発経験をもとに、以下の内容をお話しします。
・ReactのライフサイクルとCanvas描画の責務分離
・useRefやカスタムフックを活用した設計パターン
・Branded Typeによる座標・サイズの型安全な扱い方

「Reactと組み合わせると設計に迷う」という方に、明日から使える設計指針を持ち帰っていただけるトークを目指します。
https://diggle.engineer/entry/canvas-table
https://diggle.engineer/entry/branded-type