2025年9月8日

フロントエンドカンファレンス北海道2025 参加レポート

DE-TEIUです。

2025/09/06(土)、フロントエンドカンファレンス北海道2025に参加しました。去年同様、今年も最高のイベントだったので振り返っていきます。

ちなみに昨日収集した公開済の発表資料一覧はこちら

場所

今回の開催場所はJR桑園駅近くのエア・ウォーターの森です。2024年冬にできたばかりの建物で、オシャレなイベントホールや会議室が入っています。やはりガラス張りの建物は大学っぽくて良いですね。私も含め一部の人類には大学=ガラス張りのイメージがあるみたいです。

特に刺さったセッション

いくつか気になったセッションの紹介とその感想を書いていきます。ところでこれは私の勝手なイメージですが、フロントエンドに強いITエンジニアのスライドって大体カッコいいデザインになってますよね。見ていて飽きない。

奥深くて厄介な「改行」と仲良くなる20分

おぐえもん(@oguemon_com)さんのセッション。HTMLやCSSで改行とうまく付き合っていくためのテクニックが簡潔にまとめられています。セッションの最初、「楔形文字の時代には特別な意図で改行が行われていた」という話から始まるのが最高ですね。改行の話をする上でこれ以上ないツカミだと思います。

あとCRとLFがタイプライター由来の制御文字であることにも言及しており、改行という概念そのものへのリスペクトが感じられるセッションでした。

DuckDB Wasmで地理空間情報を扱う

Norihiro Narayama(@northprint)さんのセッション。DuckDBという、データ分析に強いDBをWasmで動かしてみよう、といった内容のセッションです。

セッションの後半で「OpenStreetMapに登録されている自動販売機の位置情報データをマップ上に表示する」というデモがあったのですが、「自販機の位置情報データが少なすぎて札幌の自販機を探すと青森の自販機が出てくる」というオチが良かったです。

あとスライドに出てくるサンプルコードがSvelteでした。Svelteは良いぞ。

Designing on The Web

saku(@sakupi01)さんのセッション。Webページのデザインというものが、どのような考えに基づいてどうやって発展してきたかを語るという内容になっています。

「HTMLやCSSはおかしな実装をしてもエラーが出ないからわかりにくい」という気持ちは、Web開発をやっていると誰もが1度は抱くものと思います。が、これにはちゃんと「あらゆるユーザーがあらゆる環境でコンテンツを適切に受け取れる」ようにするため、という正しすぎる理由があるようです。「Webコンテンツは基本的に皆が利用できないといけないから、環境によってはエラーになるプロパティが多少あっても無視して表示してる」と理解しました。

あと何やらCSSの仕様が生まれる前にCHSSという概念が存在していたらしいです。初耳でした。

<UserCard data={クソデカ複雑Object} />問題を考える

どうけ(@doke)さんのセッション。UIコンポーネントって気づいたら色んな機能持っちゃって複雑化するけどどう解消すれば良いんだ、という話でした。複雑なViewモデルはドメインに則ってうまいこと分割し、コンポーネントの責務をシンプルにしましょう、とのこと。

これ、要するに単一責任の原則に従ってMVVMをやれば良い、みたいな話かなと思いながら聞いてました。

Viteのプラグインを作ると内部をイメージできるようになる

ssssota(@ssssotaro)さんのセッション。その場で一気にViteのプラグインを実装するライブコーディングをやってました。強い。

何やらRollupのドキュメントとViteのドキュメントをざっと見ればとりあえず作れるようになるっぽい。 Viteのライフサイクルとか普段全然意識してなかったのでこれを機にちゃんと勉強しとこうかな。

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

西悠太(@Riya31377928)さんのセッション。かつてはJavaScriptで頑張って実装する必要があった色々な機能が、実はCSSだけでできるようになっているので色々紹介する、といった内容でした。

コンテナクエリを使って、親要素のサイズに応じてスタイルを変えられる
:has()セレクタを使って、子要素の状態に応じてスタイルを変えられる
Popover APIで要素を最前面に表示
@layerでプロパティの優先順位をわかりやすく定義
@scopeでスタイルの適用範囲を限定
SCSSなしでネスト記法
animation-timeline: scroll()でスクロールに連動するアニメーション
text-wrap: balance でテキストを良い感じに折り返し
light-dark() でダークモード対応
field-sizing; content でフォームの自動リサイズ

ちょうどかゆいところに手が届くような、いい感じの機能が色々出てきたようです。ブラウザの対応状況を見つつ活用していきましょう。

ブラウザは「フロントエンド」を何から守っているのか？

canalun(@i_am_canalun)さんのセッション。フロントエンドにフォーカスした攻撃手法をいくつか紹介するといった内容でした。

主にこのあたり

UI Spoofing
フィンガープリンティング
XS-leaks

特にXS-leaksは名前すら聞いたことなかったので非常に学びになりました。しかし色んな攻撃手法を考える人のセンスはすごいですね。

AI時代のUIはどこへ行く？

Yusuke Wada(@yusukebe)さんのセッション。Honoやboketeを作った人だそうです。 AIが発達して、あらゆる調べ物や作業をする時にAIを使うのが当たり前になったら、全部AIとのチャットで完結するからもうUIとか考えなくて良くなるのでは？と見せかけて実はそうではない、という内容でした。例えば、

グラフを文章で出されても困る
道順をテキストで出されてもよくわからん。Mapで出して

など、情報を表現するのに適切なUIが使われず、チャットだけで全部済まされると嫌ですよね。ということで、AI時代にはそれに即したUIを構築する必要がある、とのことでした。

UIの一部にAIを埋め込んで使う
AIに適切なUIを作らせる
AIがUIを受け取る

このうち3については、話だけだと最初あまりピンとこなかったのですが、「MCP-UIを使って、おすすめのラーメン屋を検索して場所をMapで表示する」というデモを見たらスッと入ってきました。納得。

5年目から始める Vue3 サイト改善

スプレッド・イーグルでおなじみ木原卓也(@tacck)さんのセッション。

トドックのWebサイトとアプリを運用していく中で、事業規模の成長による変化への対応ができておらず、トラブルが発生してしまったという話と、そういった問題へ現在どう取り組んでいるのかという話でした。

「安全に運用する」ことには配慮できていたが、様々な小さな変化を見逃していた
改善のために実施すべき取り組みを「すぐやれるもの」「利用者の体験を良くするもの」「通信料を減らすもの」「中長期的に目指すもの」に分類し、優先度をつけて着手
環境を整える意識を共通認識にしよう
具体的な数字に基づいた改善提案と実施をしよう

など、Vueの話というよりはサービスの運用保守寄りの話が多く面白かったです。こういう、他社がサービス継続のために取り組んでいる具体的な施策の話って無限に聞きたいですよね。

余談

トドックTシャツほしい

おじいちゃんに優しいUIを作ってみた

Shota Miyahira(@nano72mkn)さんのLT。高齢者の方々がどのような課題に直面しているのか、またその課題を乗り越えて利用できるようなUIを作るにはどうすれば良いかという内容でした。タッチ領域、フォントサイズ、コントラストには基準が存在するため、それに従って設計すると良いそうです。

さようなら Date。ようこそTemporal！ 3年間先行利用して得られた知見の共有

8-beeeaaat!!!(@8beeeaaat)さんのLT。

今のJavaScriptのDateは少々厄介だが、そのうちECMAScriptに「Temporal API」がやってきて日付管理が簡単になるぞ！という話でした。ちなみにこのTemporal APIは、現在はFirefoxでのみ使えるそうです。今のうちにpolyfillを入れて運用してみると良いとか。

JavaScriptのDate、イミュータブルじゃなくてしんどいんですよね。Temporal APIはちゃんとイミュータブルだそうです。期待。