トーク

Framerについてご存知でしょうか。本LTでは、React開発経験のあるエンジニアが、この注目ツールを実案件で試したリアルな体験談を共有します。
Reactでお手軽にリッチなLPが書けるようになった一方、少し凝ったことをしようとすると顔を出すノーコードツールの壁、そして複雑化するコード。エンジニアが実案件で感じたFramerの良さとその限界をリアルに語ります。
Framer導入を検討しているエンジニアの方、ノーコード/ローコードツールとエンジニアのより良い付き合い方にご興味のある方、ぜひお聞きください！

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

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

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

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

ANT+とはロードバイクに代表されるスポーツアクティビティ関連センサーにおける代表的な無線通信規格の1つです。
従来PCとの連携にはUSBタイプの送受信器を通じてシリアル通信する必要があることから、ANT+を用いたアプリ開発はネイティブアプリケーションに限られていました。
一方、ユーザーにアプリを利用してもらうには極力インストール・セットアップ作業を減らし、すぐ使えるWebアプリケーションが有利なことは明白です。
そこで、「セキュリティに難ありで万年Experimental的実装から脱却できない WebUSB APIを使ったら、それできんじゃね？」という安易な考えで数年前に製作したライブラリのお話をします！

Webブラウザの枠を超えよう……！！

Web Bluetooth APIを使えば、ほんの数行のJavaScriptでブラウザから物理デバイスと無線接続できます。
LEDを光らせる、センサーの値を読み取る、ボタンを押したら反応する…そんな世界が、ネイティブアプリなしで、ブラウザだけで実現可能です。

本LTでは、Web Bluetooth APIの概要と、採択されたら作る予定の「Bluetooth早押しボタン」デバイスを紹介します。
うまくいけば、ミニクイズを交えた参加型デモもできるかも…？（失敗したら笑ってください）

「マウスやタッチではできない体験」を、Webだけでどこまで広げられるのか。
その可能性とワクワクを、会場とシェアしたいと思っています。

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

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

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

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

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

フロントエンドのログ収集においては、多くの開発者がこのような課題に直面します。

• minify後のエラーログがわかりづらい
• ブラウザ拡張機能による大量のログがノイズになる
• Source Map公開によるコード流出のリスクがある

この発表では、Source Mapを安全に活用しながら効率的なログ収集を実現するアプローチを以下に注目して紹介します。

• CircleCIを使ったRollbarへのSource Mapの安全な配信
• ALBでのリクエストハンドリング

実際の実装では、CI/CDパイプラインと連携したSource Map管理フローを構築し、本番環境でのセキュリティを保ちながら開発者が読みやすいエラーログを実現します。

最後に、導入後の変化と今後の展望について紹介します。
この発表が、より安全で効率的なフロントエンド開発環境の構築に向けた一歩となれば幸いです。

フロントエンド開発では切っても切り離せないRegex。
とても便利ですがなかなか覚えられない人も多いのではないでしょうか。
私自身よくド忘れしては屈辱的な思いでググっていました......

最近ではAIエージェントのおかげで丸暗記する必要はなくなってきていますが、基本的な内容まで聞いてトークンを消費するのは少々勿体無い。

そこで、よく使う正規表現のパターンと事例をご紹介いたします！
「正規表現は上手く使うとこんなに便利」ということを伝えつつ、覚えておいた方が良いパターンをお話しできればと思います。

ライブラリの導入や更新時、package.json だけを管理対象にしていると、意図しないUIの崩れや動作不良が発生することがあります。このセッションでは radix-ui の使用中に発生した操作性の不具合を具体例に、lockファイルの不整合が引き起こす問題を紹介し、その原因と対策を考察します。
具体的には、dependabotを活用して問題を未然に防ぐ方法や、package.jsonのoverrides機能を使用して問題の再発を防ぐための管理手法を紹介します。
コードの品質を上げるためにLinterや自動テストの運用が注目を集めています。それらと同じように、依存ライブラリの管理の重要性も再認識し、安定的な運用に取り組むきっかけになれば幸いです。

フロントエンド担当不在で引き継いだアプリは、同じ用途のUIコンポーネントがファイルごとに散在し、モバイル対応もアクセシビリティも手薄でした。改修したい部分は多いものの、かけられる工数は限られています。
そこでコンポーネントコレクションのshadcn-vueを採用。高品質なUIコンポーネントに既存デザインシステムをTailwindトークンで適用し、最小限のスタイル変更で置換。少ない工数でコンポーネント整理と改修を実現しました。本発表では、このshadcn-vueを用い「頑張らない」UI刷新を少ない工数で達成した背景、実践テクニック、導入後の変化を紹介します。

話すこと

・shadcn-vueを選んだ背景と他案との比較
・最小変更でデザインシステムへフィットさせる実践テク
・shadcn-vue導入後の変化

そのアプリ肥大化していませんか？バックエンドはマイクロサービスなどのライフサイクル改善手法が進んでいますが、フロントエンドはまだ…という企業が多いのではないでしょうか。フロントエンドを単機能アプリに分割、独立して開発・保守・破棄を繰り返す、現代のアプリニーズに合った「マイクロアプリアーキテクチャ」を提案します。
統合認証・認可技術の普及によるシーズ、VUCA時代のアプリ開発の難しさによるニーズ、双方から必要となってくるマイクロアプリ開発の考え方について発表します。

・「新しいESLintルールを導入したいけど、既存のコードで大量のエラーが出てしまう…諦めよう」
・「ESLintを導入したけど、既存のエラーが多すぎで心が折れそう…」

このような挫折を経験された方も多いのではないでしょうか？（私も経験者です）

このような状況で、ESLintのルールを新たに導入したいけど既存のコードが邪魔をしている、という悩みはよくあります。

このトークでは、ESLintの新機能であるbulk suppressionsを使って、既存のコードに対して段階的にルールを適用し、品質改善を進める方法を紹介します。

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

TypeScriptの型を使い倒す「type-challenges」は有名ですが、その裏にある Compiler API（TSC API）は、実はVSCodeやVolarでも密かに活用されています。
このLTでは、TSC APIの面白さとその学習を目的に作っている問題集「tsc-challenges」を紹介します。
ASTから一歩進んで「型の意味を読み取る」世界を、楽しく学びましょう。

皆さんは游ゴシックというフォントを知っていますか？

このフォントはかつてWebサービスのデフォルトフォントとして（消去法的に）それなりに有力な選択肢となっていました。
そして2025年夏現在、選ぶ理由は実質なくなりました。

本LTでは游ゴシックを見捨ててNoto Sans JPを選定するまでの経緯と、稼働中のクラウドサービスでのフォント切り替えで行った具体的かつ泥臭い知見をお話しします。

発表者はフォントにそんなに詳しくないので暖かな目でお楽しみください。

SSR（Server Side Rendering） と Server Components って何が違う？と…過去の私は思いました。
だってどっちも名前にサーバー入ってるしサーバーでなんかやるし（？）

ということで調べました。
SSR と Server Components はそもそも目的が違います。

SSR は HTML を事前に生成し、SEOや初期表示速度を改善します。
RSC は JavaScript のバンドルサイズを削減し、クライアント側のパフォーマンスを改善します。

それを踏まえ、本LTでは以下の疑問を解消していきます！

• それぞれの目的をどう達成しているのか
• 何ができて何ができないのか
• SSR と RSC を一緒に使ったらなぜいいのか

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

Webサイト制作の際に気を付ける点のひとつに、リソースの容量があります。
読み込み速度を意識しつつ、さらにWebGLを用いたカロリーが高いサイトはモバイル環境でも快適に動作させなければなりません。
画像圧縮にもお作法があるように、3Dモデルの圧縮にもお作法があります。

本LTでは、私が実際に3Dモデルを用いたWebサイトやWebARコンテンツ案件を実装する上で学んできた知見を活かし、
WebGL製サイトがモバイルでも快適に動作するのに欠かせないモデル圧縮の基礎と応用をお伝えします。

【話すこと】
・Webに最適な3Dモデルデータ形式とは？
・テクスチャとポリゴン、それぞれの最適化法
・アニメーション付きモデルの最適化法
・スマートフォンでも快適に動作させるコツ
・フロントエンドエンジニアがモデラーへ3Dモデルを外注する際のコミュニケーションのコツ

「改行が消えた」「謎のタグが混入した」…
WYSIWYGエディタにありがちな壊れやすさに悩まされたことはありませんか？

本LTでは、Tiptap を用いてHTMLの一貫性・拡張性・テスト可能性を兼ね備えた堅牢なリッチテキストエディタをどのように設計・開発するかを紹介します。

• ProseMirrorのスキーマ定義を活用したHTML構造の強制と正規化
• Reactコンポーネントの組み込みやプラグインによる拡張性
• TiptapのExtension単位での単体テストによる機能ごとの信頼性担保

について話します。
WYSIWYGエディタの扱いに課題を感じている方や、Tiptapを本格的に活用したい方にとって実践的なヒントとなる内容をお届けします。

「改行が消えた」「謎のタグが混入した」…
WYSIWYGエディタにありがちな壊れやすさに悩まされたことはありませんか？

本LTでは、Tiptap を用いてHTMLの一貫性・拡張性・テスト可能性を兼ね備えた堅牢なリッチテキストエディタをどのように設計・開発するかを紹介します。

• ProseMirrorのスキーマ定義を活用したHTML構造の強制と正規化
• Reactコンポーネントの組み込みやプラグインによる拡張性
• TiptapのExtension単位での単体テストによる機能ごとの信頼性担保

について話します。
WYSIWYGエディタの扱いに課題を感じている方や、Tiptapを本格的に活用したい方にとって実践的なヒントとなる内容をお届けします。

　p5.jsは、Processing言語をベースにした、クリエイティブコーディングのためのJavaScriptライブラリです。簡単にグラフィックやアニメーションを生成し、Web上で動作するインタラクティブな作品を創出できます。Webエディタを利用すれば、環境構築なしに利用することができます。
　昨年のフロントエンドカンファレンス北海道2024でもp5.jsについてLTを行い、Webカメラやマイクを使ったデモやtoioとの連携などのデモをお見せしました。しかし、まだまだp5.jsの魅力を伝えきれていません。本LTでは、昨年紹介できなかったWeb Serial APIを用いた外部デバイス(M5Stack)との連携や、物理演算を手軽に扱えるゲームエンジンp5playを、デモを交えてご紹介します。LTを通じて、p5.jsの可能性をお伝えできればと思います。