このブログを御覧の皆様、こんにちは。技術開発室の井上です。
先日、フロントエンドカンファレンス北海道2025に参加してきました。昨年同様最高のイベントでしたので、今回はその様子をお伝えします。
フロントエンドカンファレンス北海道2025とは
2025年9月6日（土）に北海道札幌市で開催する、Webフロントエンド領域に関心のある参加者を対象とした技術イベントです。
全国のプロダクト開発に関わるエンジニアとデザイナーが交わる場を作ることを目指し、Webに携わるすべてのフロントエンド領域に関心のある方を対象としています。
（公式ページより引用）
開催場所
今回の開催場所は、JR桑園駅の近くにあるエア・ウォーターの森という施設です。
2024年冬にオープンしたばかりの、ガラス張りのお洒落な建物です。中にはコワーキングスペースや会議室やホールなどがあり、様々なイベントで活用できるようです。
特に気になったセッション
特に面白かったセッションをいくつか紹介します。もちろんここで紹介したもの以外にも面白い話が数多くありましたので、興味がある方はイベントの公式ページなどから他のセッションもご覧ください！
Viteのプラグインを作ると内部をイメージできるようになる
ssssota(@ssssotaro)様のセッションです。Viteのプラグインの仕様について軽く説明しつつ、その場でプラグインを実装するライブコーディングを実施していました。
Viteはビルド時に内部でRollupというモジュールバンドラが動いており、これがHTML、CSS、TypeScriptのコードをうまいことまとめて最適化してくれます。
また、このバンドラには、ビルドフックの機能がついており、プラグインを組み込むことでビルドの合間の適当なタイミングに任意の処理を割り込ませられるようになるそうです。（ビルド開始時、ビルド対象ファイル読み込み時、ビルド完了時など）
これを活用すれば、ビルド中に詳細なログを出すようにしてみたり、ビルド対象のファイルの中身を一部書き換えたりなどができますね。
後日ちょっと公式ドキュメントを見たところ、とりあえず動くものを作るのは割と簡単そうだったので試しに作って遊んでみました。Viteは業務でも使うので、これはかなり活用できそうです。
「え？！それ今ではCSSだけでできるの！？」驚きの進化を遂げたモダンCSS
西 悠太(@Riya31377928)様のセッションです。 かつてはJavaScriptで頑張って実装する必要があった色々な機能が、実はCSSだけでできるようになっているので色々紹介する、といった内容でした。
- コンテナクエリを使って、親要素のサイズに応じてスタイルを変えられる
- :has()セレクタを使って、子要素の状態に応じてスタイルを変えられる
- Popover APIで要素を最前面に表示
- @layerでプロパティの優先順位をわかりやすく定義
- @scopeでスタイルの適用範囲を限定
- SCSSなしでネスト記法
- animation-timeline: scroll()でスクロールに連動するアニメーション
- text-wrap: balance でテキストを良い感じに折り返し
- light-dark() でダークモード対応
- field-sizing; content でフォームの自動リサイズ
ちょうどかゆいところに手が届くような、いい感じの機能が色々出てきたようです。ブラウザの対応状況を見つつ活用していきましょう。
さようなら Date。 ようこそTemporal！ 3年間先行利用して得られた知見の共有
8-beeeaaat!!!(@8beeeaaat)様のLTです。
今のJavaScript標準機能のDateは少々使いにくいですが、そのうちECMAScriptに「Temporal API」がやってきて日付管理が簡単になります！という話でした。 ちなみにこのTemporal APIは、現在はFirefoxでのみ使えるそうです。Polyfillが公開されているようなので、今の内にそれを入れて運用してみると良さそうですね。
JavaScriptで日付管理を行う場合、Day.jsなどのライブラリを入れるのが主流かと思いますが、このAPIが各種ブラウザで動くようになったらライブラリは不要になりそうですね。(Fetch APIが普及して、その結果axiosがあまり使われなくなった流れに似ている）
MDNを見てみたら、確かに現在はFirefoxのみ利用可能になっていました。なるほど。
JavaScriptのDate、イミュータブルでないあたりが取っつきにくいんですよね。Temporal APIはちゃんとイミュータブルだそうです。素晴らしい。
AI時代のUIはどこへ行く？
JavaScriptフレームワークのHonoの作者でお馴染みのYusuke Wada(@yusukebe)様のセッションです。
AIが今後ますます発達していき、その結果あらゆる調べ物がAIに聞くだけで完結するようになるとします。そうなると、システムのUIはチャットだけになり、UIを考える必要がなくなるのでは？と見せかけて実は全然そんなことは無い、という趣旨の話でした。
例えば
- データの表現をすべてテキストにされるとわかりにくい。グラフなども出力してほしい
- 道案内をテキストで出されてもイメージできない。Mapを出力してほしい
など、情報を表現するには適切なUIが必要です。
そのため、今後はAIとの付き合い方を考えた上で、
- 元々あるUIの一部にAIを埋め込んで使う
- AIに適切なUIを作らせる
- AIがUIを受け取る
といった手段でシステムのUIを設計・構築する必要がある、というお話でした。
Designing on The Web
saku(@sakupi01)様のセッション。Webページのデザインというものが、どのような考えに基づいてどうやって発展してきたかを語るという内容になっています。
Web開発をしていると、誰しも一度は「HTMLやCSSは、実装が間違っていてもエラーがでないからわかりにくい」と思ったことがあると思います。しかし、このような仕様になっていることにはちゃんと「あらゆるユーザーがあらゆる動作環境でそのWeb上のコンテンツを受け取れるようにするため」という理由があります。
つまり「Webコンテンツは基本的に、あらゆる人が利用できる状態にすべきであるため、環境によってはエラーになるプロパティが多少あっても無視して表示してる」ということです。
ユーザーの動作環境に対応してないプロパティが1つあるだけで、そのページが一切表示できない、なんてことになったら確かにユーザーにとっては不便ですね。確かに。
次回の開催について
何やらもう既に来年の予定が決まっているようです。
イベント名：WAYACON
日時：2026/06/06(土)
場所：札幌コンベンションセンター
公式アカウント：@wayacon
概要：JAWS-UG 札幌、PHPカンファレンス北海道、フロントエンドカンファレンス北海道という3つのコミュニティ(イベント)が合同で開催するカンファレンス。おそらく主にAWSかPHPかフロントエンドの様々なセッションが聞けるはず。
ということで来年はこちらのイベントに参加しましょう！