next/imageを触ったとき、「widthとheightの数値指定が必須！？widthを親要素の100%でアスペクト比を維持したいな。。。」と悩んだことはありませんか？
そこに現れた救世主、fill=true。なんとこの要件をいとも簡単に満たしてくれます。
これで表示されているし一件落着。。。しかしここには１つ落とし穴があります。

next/imageを採用する理由の1つは、画像サイズを表示領域に合わせるように最適化して配信してくれることです。
しかし、fill=trueだと事前に取得したい画像サイズが不明であり、多くの場合では表示領域より巨大な画像が取得されてしまいます。

本トークでは起こりうる状況・原因・解決策を、imgタグ、devicePixelRatioの話を絡めつつお話します。

ClineやGitHub Copilotのようなコーディングエージェントの登場により、エンジニアが従来のチャットによるLLMとの対話からAIエージェントを使用する機会は増えてきていると思います。
一方で、生成AIアプリケーションの開発という点でも、業務をワークフローとしてAIエージェントに実行させるAgentic Workflowアプリケーションの開発というのも増えてきています。
本トークではAgentic WorkflowアプリケーションのUI実装をする際に発生した複雑な状態管理に立ち向かうために行ったことについてお話しします。

話すこと

• チャットアプリケーションとAgentic WorkflowアプリケーションのUI実装における違い
• Agentic Workflowの状態管理を行う際の複雑さ
• XStateを使用した解決策の提案

長期的な保守性や再利用性を考慮して、Reactに依存しないライブラリを選ぶことがあります。
このLTでは、TanStack Query風のライブラリを簡易的に自作しながら、「Reactに依存しないライブラリ設計」とは何か、コードベースからイメージを掴みます。

• useSyncExternalStore と Pub/Subパターンを使った React と VanillaJS の連携
• Reactから他UIライブラリへの対応

について話します。

歴史あるフロントエンドコード内部は型のないJavaScriptで溢れかえっていませんか？ 私たちのチームも同じ問題に直面していました。
チームではフロントエンド担当1名を含むエンジニア5名でNuxt3アプリケーションを扱っています。そのうち8割はJavaScriptです。
この状況で、すべてのコードにTypeScriptを厳密に導入するのは、影響範囲・工数観点でも現実的ではありません。
本発表では、私たちが実践している段階的なTypeScript導入のアプローチを共有します。
特に「コンポーネント改修の優先順位付け」「現実的な型定義の落としどころ」、そして「妥協しなかったAPIスキーマの型定義」について具体的な事例を交えて解説します。
完璧な型システムを目指すわけではありません。重要な箇所に型を適用し、エンジニアが快適に開発できる環境を構築する実践的な知識をお伝えします。

Rust 製 NES エミュレータを 1 コードベースのまま

• wasm（ブラウザ）
• SDL2（デスクトップ）
• CLI（ターミナル）
  の 3 環境で動作させる設計方針を 5 分で紹介します。

今回の発表では主に以下の内容を詳しく話します。

• 純 Rust コアと UI 境界を trait で分離するアーキテクチャ
• ブラウザ向けに wasm-bindgen でバインディングを生成する手順
• Canvas＋WebAudio を用いたフレーム／音声レンダリング
• ts-bindgen 等を使った Rust 型 → TypeScript 型自動生成ワークフロー

名刺忘れた？名刺切れた？——あるあるですよね！
でももう大丈夫。そんなときは、スマホをサッと出して「これが私のWeb名刺です！」ってドヤ顔キメちゃいましょう！

今回のLTでは、できるだけ簡単に！でもちゃんとカッコよく！ をモットーに、リアルなWeb名刺をVanillaで爆速制作しちゃいます！
フレームワーク？ナニソレおいしいの？今回はVanillaのHTML・CSS・JavaScriptだけで作っちゃいます！

「Webは好きだけど、ちょっと作るのめんどくさそう…」という方も大丈夫！
超簡単に、自分だけのオレオレ名刺を爆誕させましょう！

とあるプロジェクトにアサインされたときのこと。

巨大なAPIをフロントエンドで受け取り、フロントエンドでいい感じに描画するため、APIのデータを整形する様々な整形処理がされていました。
APIにはクエリパラメータもない。APIを改修するのは、諸般の事情で何故かできない...

同じような処理が様々なファイルに記述され、複雑に絡まったコードベースたち...　（これはメンテナンスができない！）
そんな複雑に絡み合った状況に、少しでも見通しを良くするためモデル層を設けて、データフローを一方通行にしてリファクタリングしました。
データフローを、一方通行にするために助けてくれたのが、Remedaのpipeというメソッドの力でした。

本セッションでは、Remedaのpipeを使ってリファクタリングを行った仮定を追いながらpipeの威力をご紹介します。

魔法のようなAIコードエディタ（Cursor、GitHub Copilot、Cline）は、一見すると謎めいたツールですが、その正体はElectronを基盤に、TypeScriptとReactを用いて構築されたWebフロントエンドです。

本セッションでは、AIコードエディタの内部動作を技術的に詳しく解説します。ユーザーが入力したプロンプトがどのようにLLMのAPIに送信されるのか、その際に必要な文脈や情報がどのように収集されるのか、レスポンスをどのように解析してUIに反映するのかを順序立てて説明します。

また、LLMからのツールコール（edit_file）を解析し、具体的なコード差分をVS Code APIを介してどのようにファイルへ反映するかについても触れます。実際のソースコードや具体的な動作フローの図解を交えて、「魔法」の中身を分解・理解できるようになることを目指します。

ウェブページの入力フォームでは、inputやselectなどの入力要素に適切なラベルをつけることが、アクセシビリティとユーザビリティの両面で非常に重要です。入力すべき内容を明確に示すラベルがあれば、ユーザーはスムーズに入力を完了できるでしょう。

しかし、ときには固有の可視ラベルなしに、入力要素を使用したいケースがあると思います。本LTでは、SmartHRの開発の中で実際に見つけた“ラベルのない入力要素”たちについて5分間でご紹介します。