- 2025/11/30

なぜフロントエンド技術を追うのか？なぜカンファレンスに参加するのか？

sakitoさん(サイボウズ)
https://speakerdeck.com/sakito/nazehurontoendoji-shu-wozhui-unoka-nazekanhuarensunican-jia-surunoka

なぜフロントエンド技術を追うのか

流行を追うのは疲れる
技術を点でなく線で追う
- 流れを追う
ビルドツールの流れの例
- バンドラーなしの時代
- Grunt/Gulp/Browserify
- Webpack/Rollup/Parcel
- Vite
- Bun/Turbopack/Rspack
エコシステムからWeb標準
- エコシステムで作られる -> Web標準へ -> エコシステムでそれを使う
  - Web標準を考えてる人たちはエコシステムのことをよく見ている
- JS0/JSSugar
- ランタイム側に取り込まれていく流れが進んでる
  - 実装が膨らんでセキュリティの問題が起きたりも
  - 取り込んでいく流れに限界が
- ランタイムとエコシステムの役割分担の流れ

なぜカンファレンスに参加するのか

記事で得られる情報との違い
- 現場で使った生の体験を聞ける
- 疑問に感じたことを直接聞ける
カンファレンスは全員が共通の話題を持ってる

俺流レスポンシブコーディング 2025

TAKさん
https://speakerdeck.com/tak_dcxi/an-liu-resuponsibukodeingu-2025

ピクセルパーフェクトはゴールにしない
- 変数が多すぎる
- 多様なデバイスサイズ/解像度
- 雑に作っていいというわけではない
- 限られた環境で満点より全ての環境で合格点
ブラウザに仕事をさせる
- 特定サイズのみでなく中間/外部領域のことも考慮しないと行けない
  - デザインは特定サイズのみなことも
- - 例えば
    - CSSでグラデーション
    - 画像のobject-fit
- CSSはブラウザがよしなにやってくれるのでそれに頼る方が良い結果になることが多い
- イントリンシックデザイン
  - 本来備わってる性質を活かすデザイン
  - ブラウザに情報を与えて頼る
- 命令書ではなく提案書
変化に耐えるレイアウト設計
- Webはデフォルトでレスポンシブ
  - 親要素いっぱいに広がったり
  - 自然に折り返されたり
  - それを壊すのは実装者
- 固定サイズを避ける
  - width: 800 とかしたらそれより狭くなるとあふれる
    - max-widthとかの方がいい
  - height: 100svh とかすると画面の高さがコンテンツの高さを下回るとあふれる
    - min-heightを使う
  - min-やmax-を使う
  - min()やmax()やclamp()を使う
    - paddingやmarginでも
  - 固定サイズを使うのはborderやbox-shadowなど
    - 小さいアイコンとかは例外
  - font-sizeの拡大で変化してほしくないやつはpxでいい
  - min-width: min(32px, 100%)
- カードレイアウト
  - 画面サイズでcolサイズを帰るよりauto-fillやauto-fitがいい
メディアクエリとコンテナクエリ
- 従来のレスポンシブは画面サイズに依存していた
- コンテナクエリを使うと親の幅を気にせずに使い回せるようになる
- コンテナクエリは無限ループするような指定はできないので注意
- ビューポートは部屋でランドマークが家具
- 家具の上に置かれてるものはコンテナクエリ
スマホ/タブレット/デスクトップという概念を捨てる
- 画面幅が複雑化しすぎて3分類なんてできない

なぜ僕たちのNext.js導入はうまくいかなかったのか

奥山聡さん(akippa)

PHPの巨大なレガシープロダクト
フロントエンドのアジリティのために刷新へ
- ページごとに段階移行
- 認証周りなどもあって最初の1ページを出すまででも苦労した
移行ののつらみ
- レガシーの複雑さがフロントエンドに染み出してくるのできれいに書けない
- Nextのキャッチアップも必要
- 却ってスピードが落ちていた
優先順位を考えて撤退へ
- 他の技術夫妻もたくさんある状態だった

「え？！それ今ではHTMLだけでできるの！？」驚きの進化を遂げたモダンHTML

西悠太さん
https://speakerdeck.com/riyaamemiya/e-sorejin-dehahtmldakededekiruno-jing-kinojin-hua-wosui-getamodanhtml

Popover
- 自前でやると細かいところではまることがある
  - z-index
  - フォーカス管理
  - 外側クリックで閉じる
- popover属性とpopvertarget属性で作れるようになった
Dialog
- これも自前で作るとちゃんと作るのが難しい
- dialog要素で作れるようになった
detailsの排他制御
- 複数のdetailを置いた時にどれか1つだけ開くようにしたい
  - 開いた状態で他のを開くと元のは閉じてほしい
- detail要素のname属性でグルーピングできる
inert属性
- 隠れてる要素を無効化したい
- 指定した配下の要素をツリーから見えなくさせることができる
search要素
- 従来は roll="search" としていた
- 今はsearch要素が使える
loading属性
- 画像の遅延読み込みさせたいときに使える
- 従来ならビューポートに近づいたら〜とか自前で書いてた
fetchpriority
- 画像の優先度を指定できる
- LCPに影響するものを優先度あげるといい
blocking属性
- フォントの読み込みが遅くてちらつくことがあった
- blocking属性で防止できる
inputmode属性
- 入力要素に指定するとキーボードをいい感じにしてくれる
enterkeyhint
- 検索なのにEnterに改行とか出さないように

堅牢なフロントエンドテスト基盤を構築するために行った取り組み

Shogo Fukamiさん
https://speakerdeck.com/shogo4131/jian-lao-nahurontoendotesutoji-pan-wogou-zhu-surutamenixing-tutaqu-rizu-mi

フロントエンドのテスト
- 重要なところをカバーできてない
- テストの量が無駄に多くなる
テスト対象をどう絞るか
- プロダクトで最も重要な導線をテストする
テストガイドライン
- スタイルが決まってないとAIが書けない
  - 両方が理解できるフォーマットが必要
- Testing Trophy
- BDDで書く
  - 振る舞い駆動開発
  - 実装に依存しないテスト
  - ユーザの操作をそのままシナリオにする
- Given - When - Then
  - 前提 - 操作 - 期待結果
AIにテストを書かせる
- そのまま書かせても上手くいかなかった
- テスト専門のカスタムサブエージェントを活用する

心地よいアニメーションのつくりかた

wattanxさん
https://talks.wattanx.dev/2025/fec-kansai/

心地よいアニメーション
- 目的を考える
- 適切なイージング
- 適切なスピード
Motion
- JSライブラリ
- Spring Animation
- Shared Layout Animation
アニメーションとアクセシビリティ
- 体験を損なわないために望まない人向けの対応
- prefers-reduced-motion
  - メディアクエリでユーザの設定を読み取れる
  - reduceを設定してる人には自動アニメーションを起こさないように実装しないといけない