Bon Voyage! CSS Ecosystem Meets Standards, now?
sakuさん(サイボウズ)
https://sakupi01.github.io/slides/ja/2025_09_21_css-ecosystem-meets-standards-now/
- CSSはセマンティックで再利用可能にしたい
- これまでは詳細度を駆使して対応してきた
- クラス名の工夫とかツールを使ったり
- CascadeLayer
見た目は動く。でも使えない、、アクセシブルなUIの実装アンチパターン集
maddyさん(Goodpatch)
- アクセシビリティとは
- 見た目は問題なさそうだけど使えないパターン
- ボタンなのにフォーカスできなくてキーボードで操作できないとか
- ラベルが設定されてないとどんなボタンか伝わらない
- tabindexでフォーカス順を変えていると見た目と異なって混乱する
- セマンティックなhtmlを使ってtabindexを使わない
- ariaはたくさん使えばいいものではない
- htmlの標準で対応できるところはそこに書く
- 特殊な例でどうしても必要なときだけariaは使う
- アクセシビリティオーバーレイ
- 1行追加して導入するだけでアクセシビリティの対応ができるとうたってる製品
- それだけで対応できるなんてうまい話はない
実践AIチャットボットUI実装入門
syumaiさん(ベースマキナ)
https://speakerdeck.com/syumai/practical-ai-chat-bot-ui-implementation
- AIチャットとUI
- AG-UI
- MCP UI
そのJavaScript、V8が泣いてます。V8の気持ちを理解して書くパフォーマンス最適化
- Ignition
- Sparkplug
- Maglev
- ここまでの2つの間の高速な中間最適化コンパイラ
- Ignitionが収集した情報を活用する
- オブジェクトの形状から最適化したり
- TurboFan
- 最も高度な最適化
- その代わり時間かかる
- 何度も実行されるところで効果的
- 投機的最適化もしてる
- データから予測をして最適化する
- 予測が外れたら下位のコンパイルに戻して実行
- 最も高度な最適化
- V8に好まれる書き方
- オブジェクトの形状を保持する
{ id: 1 }にnameとか後から追加すると保持できてないことになる
- 型の一貫性を維持する
- 関数の同じ引数に数値と文字列渡すことがあったりするとダメ
- 例外による脱最適化を避ける
- try-catchせずに対応できる時は使わない方がいい
- インライン化されやすい関数にする
- 小さく純粋な関数を心掛けるといい
- オブジェクトの形状を保持する
爆速でプロダクトをリリースしようと思ったらマイクロフロントエンドを選んでいた
Nokogiriさん(カケハシ)
- マイクロフロントエンド
- 独立してリリース可能なフロントエンドアプリを構成するアーキテクチャ
- ユーザから見える1つのアプリを分割してる状態
- 異なるビルドが合わさってベージができる
- サービス特性
- 全国の薬局の20%で使われている
- 不具合があったときの影響が甚大
- 生成AI機能を入れようとしてる
- 素早く価値検証を進めたい
- 技術的不確実性が高い
- 技術要素が新しい
- 既存の機能と独立して開発/リリースできるアーキテクチャにしたい
- 全国の薬局の20%で使われている
- 独立した新機能の開発
- 既存開発チームとは別部隊
- 生成AIの新機能単体でリリース可能にする
- 独立化するためにUIも既存に依存しないように
- 技術スタックも古いものに縛られないスタックで
- マイクロフロントエンドの実現
- AngularとReactの共存
- Reactのビルド結果をAngularプロジェクトから見えるところに
- Angularアプリ内にReactのルートのタグを配置
- 既存UI非依存
- 既存画面の上に被せてボタンを置いてモーダルでメインを表示
- アプリ間通信
- CustomEventでdispatch/listenしてやりとり
- AngularとReactの共存
- 課題と工夫
Reduxモダナイズ〜コードのモダン化を通して、将来のライブラリ移行に備える〜
pvcresinさん(Sansan)
https://speakerdeck.com/pvcresin/reduxmodanaizu-kodonomodanhua-wotong-site-jiang-lai-noraiburariyi-xing-nibei-eru
- Redux
- 2015年〜
- 状態管理ライブラリ
- 状態を1箇所で管理
- 変更はAction -> Reducerで行う
- 単方向のデータフロー
- Redux DevToolsでデバッグ
- Reduxの難しさ
- 登場人物が多い
- ボイラープレート的なコードが多い
- Redux Toolkit
- 公式で推奨されているツール
- ボイラープレート削減できる
- 型との親和性
- よく組み合わせるライブラリが入ってる
- Immer
- Redus Thunk
- Reselect
- RTK Query
- hooksベースでデータの取得更新ができる
- thunkでデータを扱ってSliceに格納する
- キャッシュ機能も入ってる
TS - Type = JS ?
Jxckさん
