トーク

Webサービスのフロントエンドを開発していると、<link rel=”prefetch”>のような記述を見かけることがあります。
これはユーザーの動きや利用する際の環境を予測して、あらかじめWebページの読み込みやレンダリングなどを行い、パフォーマンスを向上させるための投機的読み込み向けの記述の1つです。

このセッションでは、link要素のrel属性で設定できる投機的読み込み機能を理解し、サービスの特性にあわせた使い分け方法をご紹介します。
また、ブラウザの実験的機能である投機ルールAPIで、従来の投機的読み込み機能のどういった課題を解決しようとしているのかについてもお話します。
対象者は、Webサービスのパフォーマンス改善に興味のある方を想定しています。

個人開発でWebアプリを量産したいけれど、ホスティング費用はできるだけ抑えたい。そんな悩みを抱える開発者の方に向けて、2026年時点での実用的なホスティング戦略を紹介します。
NextJSユーザー向けに、Vercelの代替選択肢としてCloudflare Workersを使ったホスティング方法を解説します。無料枠で何個までアプリをホストできるのか、具体的なデプロイ手順とともに実例を交えてお伝えします。
また、主要なホスティングサービス以外の選択肢として以下の方法も紹介します。
・NextJSに対応した低価格VPSの活用法
・バニラPHPアプリを共有サーバーで運用する方法
・ローカルサーバーとCloudFlare Tunnelを組み合わせた自宅ホスティング
各サービスの料金比較と実際の運用コストを明示しながら、皆さんの開発スタイルに合った最適なホスティング戦略を見つける手助けをします。

追加開発のたびにアプリケーションの仕様を設計書に書き写し、その設計書を見ながら実装する。
この往復作業は工数がかかるわりに付加価値が低く、設計と実装の乖離も生みやすい構造的な課題となっているのではないでしょうか。

本トークでは、SPA の画面から単一の HTML ファイルを自動生成し、「実画面そのものを設計の正」とする開発フローを紹介します。
生成された HTML モックは AI エージェントが直接読み書きできるため、画面の現状把握や改修案の作成に活かせます。
モックは開発サイクルごとに再生成するだけなので、従来の設計書のようなメンテナンスは不要です。
さらに Figma への取り込みも可能なため、デザイナーとの協働にも活用できます。

設計と実装をつなぐ作業に使っている時間を UX 設計やコンポーネント設計に回せるようにしたい、そんなきっかけになるフローをご紹介します！

差分の大きいPRを複数の小さなPRに分けることでレビュワーの負担を抑えることができます。
でも、チケットを細かく分割するのって正直めんどくさくないですか？
そんなあなたに！！！
エンジニア歴半年の学生でもできた、AIとタスク管理ツールを活用して"ちょっと楽に"チケット分割するためのヒントを、数千ファイルの変更を伴うチケットに立ち向かった経験をもとに紹介します！

React19.2で新しいHooksであるuseEffectEventが追加されました。
これにより古い状態を参照し続ける「stale closure問題」にメスが入り、イベントハンドラの貼り直しなど余分な処理をEffectとして実行する必要がなくなりました。
一方、どのようにして最新の状態を取得しているのかご存知でしょうか？
なぜ、依存配列に含めていないはずの最新の状態を持ってくることができるのでしょうか？

本セッションではReactのソースコードを紐解き、useEffectEventが内部でどのように「関数の同一性」と「最新状態の維持」を両立しているのかを解説します。

こちらの延長線の話となります。
https://zenn.dev/maguro_alterna/articles/17a0938c5b02a3

JavaScriptでの日付操作は、ブラウザの実装や実行環境のタイムゾーンに強く依存するため、フロントエンド開発における「鬼門」となりがちです。

実際に私のプロジェクトでも、日付フォーマットの違いによってタイムゾーンの解釈が変わったり、
toISOString を通した際に「1日のズレ」が生じたりと、Dateオブジェクトを正しく扱えなかったことによるバグが発生しました。

本LTでは、JavaScriptの仕様に基づいてバグの原因を深堀りつつ、環境に左右されない「堅牢な日付操作」の指針についてお話しします。

aタグを使ったLinkButton実装において、disabled状態にもかかわらずフォーカスが当たり、Enterキーで操作できてしまうケースに遭遇しました。

本LTでは、この挙動がアクセシビリティの観点でどのような点が問題になり得るのか、HTML要素の役割（セマンティクス）、W3C仕様、ARIA属性の考え方を踏まえながら見ていきます。
さらに、主要なUIライブラリの実装例を参考にしつつ、LinkButtonにおけるdisabled状態をどのように実装・表現するのがよいのかを考えていきます。

近年の Web における UI は装飾性の高いものが増えてきています。
a タグも例外ではなく、見た目や情報量に配慮した「装飾されたリンク UI」を求められる場面が多くなってきました。

こうしたリンク UI では、文字だけでなくアイコンや画像など様々な要素を a タグの中に含めることがあります。
これらの要素をレイアウトするために div タグを使うこともありますが、本当にそれは問題ないのでしょうか。

「a タグはインライン要素だから div タグを入れてはいけない」という認識を改め、現在の HTML 仕様ではなぜそれが可能になっているのか、その仕組みについて 透過的コンテンツモデル を中心に解説します。

実務に入りたての未経験エンジニアである私が、React Hook Form（RHF）とSWRを組み合わせた開発中に遭遇した「編集後に古いデータが残る」という不可解なバグ。その原因は、両ライブラリが持つ「ライフサイクル」の認識のズレにありました。

SWRがUX向上のために高速で返した「古いキャッシュ」を、RHFの defaultValues が「最新の初期値」として一度きりの評価で確定させてしまう。この両者の仕様同士の衝突をどう読み解き、どう解決したか。

本LTでは、単なるバグ修正に留まらず、ライブラリのライフサイクルをエンジニアがいかに設計すべきかという視点でお話しします。「ライブラリがよしなにやってくれる」という安心感の一歩先へ、実務での失敗から学んだ、状態管理における「意思表示」の大切さを共有します。

デザインシステムのコンポーネント配布はnpmパッケージが主流ですが、バージョン運用やブラックボックス化が課題になりがちです。
本セッションではshadcn/ui Registryを題材に、コンポーネントを「パッケージ」ではなく「コード」として配布する新しいアプローチを解説します。
CLIによって必要な実装がプロジェクトに展開される仕組みや、依存関係の解決方法を紹介し、従来方式との違いを整理します。
また、実装が手元に存在することでAIが内部コードを参照しやすくなり、修正提案や差分生成が行いやすい点にも触れます。

・ Registryの仕組みと導入の流れ
・ npm配布との比較と適用領域
・ AI代におけるコード配布の価値

多言語対応では、翻訳キーや文言を人が手動で管理する設計が長く前提とされてきました。
近年は開発体験や自動化への関心の高まりを背景に、こうした「人がすべてを管理する前提」そのものを見直す動きも出てきています。

本LTでは、私自身が実務で利用している Next.js + next-intl を例に、翻訳キーの自動抽出を行う Experimental 機能 useExtracted を取り上げます。
この機能自体は AI を用いたものではありませんが、翻訳キーを人が増やして管理する前提を崩す設計になっています。

未来予測やAI活用の紹介ではなく、現場の実装から見えてきた「多言語対応の前提が変わり始めている兆し」を共有します。
多言語対応を設計・運用している方が、これからの構成を考えるきっかけになれば幸いです。

あなたはautofocusの正しい用法を知っていますか？
私はまず存在を知りませんでした。

ESLintのjsx-a11yルールをプロジェクトでリポジトリに導入したとき、no-autofocusルールに違反するエラーが発生しました。
そこで初めてautofocusという属性の存在を知り、プロダクトで使われていることに気づきました。
ESLintのエラーなので単純にautofocusを消すこともできましたが、知らなかった属性だったのでMDNやW3Cのドキュメントを読みました。
その結果、アクセシビリティに配慮したautofocusの正しい用法を理解できました。
本LTでは、実務での経験をもとに以下を紹介します。

• autofocusとは何か
• なぜLinterが警告するのか
• autofocusの正しい用法
  聞き終わる頃には、autofocusを自信を持って使えるようになります。

Chrome 144にて<geolocation>要素という新しいHTML要素が利用できるようになりました。
この新機能は今まで命令的なAPIでしか取得ができず、制約の多かったWebにおけるパーミッションのあり方を大きく変える可能性があります。

この発表ではいままでのWebにおけるパーミッションモデルの限界や、<geolocation>要素など権限を扱うことのできるHTML要素が解決する課題などを、この機能の前段となったPEPC（Page Embedded Permission Control）の提案段階から総括して発表させていただきます。

「CSSが思った通りに動かない」 「とりあえずコピペして、値をいじって直す」
そんな「雰囲気実装」から卒業しませんか？ CSSの挙動はプロパティに使われている英単語の「原義（本来の意味）」を知ることで格段に理解しやすくなります。

例えば、flex-shrinkは「flex（柔軟に）」「Shrink（縮む）」という言葉の意味を知っていれば、「親要素が狭くなった場合はコンテンツを柔軟に縮める設定」だと直感的に理解できます。

本LTでは、CSSの挙動を支配する「10の英単語」を厳選して紹介します。
align, justify, inheritなど英語としてあまり聞きなじみはないのに、ＣＳＳでよく見る英単語の原義をＣＳＳプロパティを踏まえて説明します。
初学者の方にはＣＳＳを理解するきっかけを提供し、ベテランの方にはＣＳＳプロパティを原義から振り返ることができる発表にします。