トーク

Push APIを活用すれば、Webサイトからネイティブアプリのようにプッシュ通知を送ることができます。
しかし、実際にはFirebaseなどのSDKを使って導入することが多く、内部の仕組みを学ぶ機会は多くありません。

本セッションでは、W3CのPush API仕様を紐解きながら、外部サービスに頼らずにフロントエンド・バックエンドをフルスクラッチで実装します。
通知が届くまでに、フロントエンド、ブラウザ、バックエンドサーバーがそれぞれどのような役割を担い、どう連携して動作しているのかを解説します。

LLMが出てきて、Webページを見る代わりに、チャットで情報を得るようになりました。チャットってチャットUIですよね。だから「Webページ、ひいては多くのUIが必要なくなるんじゃないか？」なんてビビってました。でも、UIは必要なんですよ。やり方が変わるんだと思います。

Kent C Doddsさんの「The future of AI interaction: Beyond just text」が非常に面白いです。「MCPでテキストを送るけど、それじゃ味気ないよね。例えばストップウォッチやデータの可視化、インタラクティブなマルチモーダルのUI欲しくない？」ってね。

MCPだとHTMLやJSXを含む新しいコンテンツタイプも提案されているし、UIを送るAIエージェントのデモもあります。今回はそれらの最新動向を紹介しつつ、デモも作って、AI時代のUIについて考えてみたいと思います。

この発表では、表題の ES2026 の新機能を JavaScript パーサーである acorn に実装した経験を通じて学んだことを共有します。

【アジェンダ】

• ECMAScript / TC39 とは何か
• JavaScript パーサー / acorn とは何か
• Explicit Resource Management とは何か
• 言語仕様書の読み方
• 実装する上で難しかったこと
  • using が予約語でないことによる難しさ
  • acorn にバックトラックがないことによる難しさ
  • (余談) なぜ acorn にバックトラックがないのか

あるレガシーな組織から、あるECサービスが 2020年12月 に公開されました。
このサービスは、Webアプリケーションとして開発されましたが、スマートフォンアプリからも利用されるようになりました。
現在ではアクティブユーザー数が27万名を超え、全道の多くの方々に利用されています。

そこから四年。

機能追加、メンバーの変遷、Vue3へのアップグレード、多くの歴史が刻まれています。
気がつくと、 Core Web Vitals の値が赤く輝いています。
そう、今こそ改善のとき。

このセッションでは、レガシー企業で産み出されたサービスを地道に改善した体験をお話しします。
この中で、何が問題になったか、改善の順番をどう考えたか、どのように改善を進めたか、といったことも具体的にお話ししていきます。

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

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

最近注目され、便利な UI を簡単に実装できる Popover API ですが、その手軽さの裏にはアクセシビリティの落とし穴が潜んでいるかもしれません。特に、新しい WCAG 2.2 の達成基準を考慮すると、これまで見過ごされてきた問題がクリティカルになる可能性があります。
このセッションでは、 Popover API を利用する際に特に注意すべき WCAG 2.2 の達成基準をピックアップし、具体的なコード例を交えながら、よくある実装のつまずきどころと、それを乗り越えるための実装のヒントを共有します。

アクセシビリティって難しそう...」そんな声をよく耳にします。
確かにWCAGガイドライン、スクリーンリーダー対応など専門用語が飛び交い、敷居が高く感じられるのも無理はありません。

しかし、2024年にiPhoneに搭載されたEye Tracking機能を触ってみると、驚くほどシンプルにアクセシビリティの恩恵を感じることができます。視線だけでアプリを操作する体験は、「使いやすさとは何か」を直感的に教えてくれるのです。

この発表では、実際にEye Tracking機能を使いながら、アクセシビリティの基本概念を体感的に学びます。

技術的な実装例も交えながら、Eye Tracking機能を通じて自然と身につくアクセシブルな設計思考を紹介します。

アクセシビリティは特別なものではなく、すべてのユーザーにとっての「当たり前の使いやすさ」なのだということを、一緒に体感してみませんか？

Web上でまるで魔法のようなビジュアル表現を実現したいと思いませんか？
本トークでは、その夢を現実にするWebGLシェーダーの魅力と、その魔法の呪文とも言えるシェーディング言語「GLSL」の面白さをお伝えします。
シェーダーを使えば、従来の常識を超えるインタラクティブなアニメーションや、美しいエフェクトを生み出すことが可能です。
GLSLの数行のコードが驚くようなグラフィックを生み出す様子を、実際のデモを交えながらご紹介します。

ID/パスワードを使わず、指紋や顔認証で安全かつ簡単にログインできる「パスキー認証」は、信頼性の高いFIDO技術を基盤としています。
このパスキー認証をフロントエンドで支えるのが、Web APIの「WebAuthn」です。
WebAuthn自体は数年前から存在する技術ですが、最近ではその利用可否チェックの関数が簡略化されたり、TypeScript 5.8から関連する型定義がサポートされるなど、開発環境が格段に整い、ぐっと利用しやすくなりました。
そして何より、フロントエンド側の実装は思った以上にシンプルです。

本LTでは、WebAuthn APIの実装例と共に「パスキー認証、意外と簡単！」を実感していただくことを目指します。

近頃、V8やJavaScriptCore、SpiderMonkeyのようなメジャーなJSエンジン以外にも新しいJSエンジンのプロジェクトがいくつか進んでいます。

また、自作のJSエンジンを含めた自作ブラウザを作るような書籍も出版されており、JSエンジンへの興味を持ちやすく、理解への敷居も多少は下がりつつあると思います。

そして、JSエンジンを（拙いなりに）自作できるということは自分の「推しプロポーザル」も実装出来るということです！

このトークでは、最小の実装で自分の「推しプロポーザル」であるIntl.MessageFormatの初歩的な機能が動くまでのポイントを紹介し、JSエンジンやJSの仕様・プロポーザルへ興味を持ってもらえるきっかけとすることを目指します。

登壇者: 小島 芳樹 様 / 後藤 滉希 様

本セッションでは、ちょっと株式会社の実務において、生成AIサービス「v0」をどのように活用しているかをご紹介します。
私たちはフロントエンド開発を中心に、多様なお客様案件を手掛けており、要件整理からUI設計、社内提案用のたたき台づくりまで、プロトタイピングのスピードが成果を大きく左右します。
本セッションでは、実際の社内ワークフローでv0をどう取り入れているのか、活用における工夫や課題を共有するとともに、今後どのようにプロジェクトの品質向上や効率化につなげていくのか展望を語ります。
明日からの開発現場に活かせる実践的なヒントを持ち帰っていただければ幸いです。

ロジスティクス関係で働く人には、おじいちゃんが沢山います。
おじいちゃん達は、年齢による症状（老眼、認知負荷）や長年ちから仕事をしているため、指が太く細かい操作がしにくいなどの問題がありました。
それらを解決するために、webエンジニアがおじいちゃんに優しいUIを作ってみたお話です。
（硬く言うと、シニア世代に向けたアクセシビリティのお話です）

Dateに代わる新たな日時操作標準APIとして、長らくTC39のプロポーザルだった Temporal がついに標準化間近。
Dateに苦しみ、多くのライブラリを用いて日時操作と格闘してきた我々フロントエンドエンジニアの福音となるか！？
2022年よりpolyfillを用いて先行利用してきた中で得られた知見とつらみを共有します！

某動画配信サービスのWebブラウザ向けプレイヤーにおいて、大規模なリプレイスを実施しました。
案件PRの最終的なファイル変更数は260を超え、リプレイスの対象領域もCSSフレームワークやグローバル状態管理ライブラリの刷新、利用しているOSSのメジャーバージョンアップの対応、パフォーマンス改善の一環としてのリファクタリングや非同期処理フローの見直しなど多岐に渡ります。

本セッションでは、主に以下の技術的観点について詳しく掘り下げます。

・なぜプレイヤーの全面的なリプレイスが必要だったのか（リリース当初に発生した課題）
・複数のブラウザやOS、ユーザー環境に依存するゆえのトラブルシューティング（再生環境や端末依存の不具合への対応）
・リプレイス前後で開発体験やパフォーマンスにどの程度ポジティブな効果があったか

本リプレイスに約半年間取り組んだ中で得た知見と学びについてお話しします。