トーク

Matter.jsは、Webブラウザで手軽に物理演算を扱える比較的軽量なライブラリです。例えば、以下のような表現が可能です。

・オブジェクトが重力や衝突で自然に動く表現
・ユーザー操作に反応して弾む・転がるインタラクション
・配置や衝突判定を伴うインタラクティブな演出
・物理法則に基づいたアニメーションによる動的UI

一方で、描画や更新の扱い方によってパフォーマンス面での課題が生じやすくなります。
本発表では、配信画面デザインサービスにおける事例をもとに、Reactと組み合わせた遊び心満点の物理エフェクトの実現方法を紹介します。
エンジン共有や再計算の抑制といった設計上の工夫から得られた、物理演算をWeb表現に活かすための実践知を共有します。

あなたのWebサイトも、手頃に「ぷにゃっ」と動かしてみませんか。

Reactでの開発に慣れていた私が、SvelteKitを使ってポートフォリオサイトを構築したところ、高速で開発することができました。本セッションでは、状態管理やコンポーネント設計に悩んでいたReactとの比較を軸に、SvelteKitの驚きの軽快さ、宣言的なUI設計、ファイルベースルーティング、SEO対応など、個人開発で実感したメリットをお伝えします。一方で、SvelteKitの課題や規模による使い分けのポイントにも触れたいと思います。

Webアプリケーションにおけるページ遷移は、コンテンツが切り替わるたびに体験が途切れがちです。そんな中、Chromeで利用可能な「View Transitions API」は、ページ間の遷移にアニメーションを加えることで、よりシームレスで滑らかなUXを実現できます。本セッションでは、ReactやSvelteKit、Next.jsなどモダンフレームワークへの導入や、DOMの変化をCSSアニメーションと連携させる具体的な手法を解説。導入時の制限や落とし穴、どんな場面で効果的かといった実践的な知見をお伝えします。

CSSにも関数的な進化が訪れています。abs()、sign()、sibling-index()、sibling-count()、progress()など、最新のCSS関数を活用することで、これまでJavaScriptで処理していたようなロジックをCSSだけで実現できるようになってきました。本セッションでは、これらの関数の基本的な使い方から、実際にどのようなインタラクションやデザイン制御が可能になるのかをお話します。

「iPhone SEでは大丈夫だったデザインが、iPhone 15 Plusで見ると文字が小さくて読めない…」そんな経験はありませんか？

iPhone SEの375pxからiPhone 15 Plusの430pxまで、わずか55pxの違いですが、約15%の画面幅の差がデザインに大きな影響を与えます。
本セッションでは、「異なる画面幅でも全く同じ内容を表示する」という方針で解決した実装手法を紹介します。pxからremへの移行、画面幅に連動するfont-size設定、CSSカスタムプロパティを活用した効率的な実装方法まで、BtoCサービス開発での実践的な経験をお伝えします。

「overflow: auto を指定したのに横スクロールできない」「長いコンテンツが親要素を突き抜けてしまう」そんな経験はありませんか？
私自身、横スクロールが効かない問題に直面した際、原因は親要素に設定された flex-direction: row でした。
実は、こうした構造的なレイアウト崩れは、FlexboxではなくGridを使うことでスマートに解決できるケースが少なくありません。
本LTでは、実際に遭遇した問題を通じてFlexboxの仕組みを解説しつつ、Gridレイアウトがより適切な選択肢となる理由をお伝えします。
min-width: auto の罠、不要なdivの増加、非セマンティックなHTML構造といった問題が、Gridでどのようにスマートに解決されるかを実例を交えて紹介します。
「とりあえずFlex」から一歩進み、意図に応じたレイアウト手法を選べる開発者を目指しましょう。

package by featureは、機能や関心ごとにディレクトリを切るディレクトリ構成です。
/hooksや/contextsといった技術ごとにディレクトリを切るpackage by layerはひとつの機能が分散して配置されるのに対して、package by featureはひとつの機能が一箇所にまとまっているのが特徴です。

しかし、実際にどのようにfeatureを切っていくのかについて取り上げている情報は、まだ少ないように感じます。

一方で、コンポーネントのDomain(関心)に特化した分類には、コンポーネントを関心・状況・基礎の3つの軸で分類することで体系的に管理できるBCD Designという手法があります。

そこで、本セッションではBCD DesignにおけるDomainの概念を応用し、featureをどのように切り出していくのかについて具体例を交えて紹介します。

振る舞い駆動開発（BDD：Behaviour-Driven Development）は、ソフトウェアの振る舞いを軸に仕様を記述し、それをそのまま自動テストとして活用する開発アプローチです。テストコードが仕様書の役割も果たすため、認識のズレを防ぎやすくなります。

本セッションでは、TypeScriptでBDDを始めるための基本的な考え方と実践方法を紹介します。Cucumber.jsなどのツールを用いることで、自然言語に近い形式で振る舞いを定義し、テストの読みやすさや保守性を高めることが可能です。また、BDDを導入することで、開発者とQAのあいだで仕様の意図や期待される挙動を共有しやすくなるといったメリットにも触れます。

TypeScriptでテストを書いて、これからBDDを始めたい方に向けてわかりやすく解説します。

LINEのミニアプリやLIFFを活用すると、スマートフォン向けのアプリを手早く構築できます。
この仕組みをつかった、イベントむけ謎解きゲームアプリのご紹介です。

Vite+React のSPAに@line/liff SDKを組み込んでいます。

• 基盤がLINEだからターゲット層が広い
• 認証つきなので、オンボーディング、正誤判定やランキングなどのゲーム要素と相性がいい
• QRコードリーダーでチェックインやクーポンのもぎり
• LINE公式アカウントのトークタイムラインやMessaging APIとも連携した仕掛け
• ヘッドレスCMSとも連携させれば運用効率も◎

マイクロフロントエンドというアーキテクチャスタイルは注目されて久しいですが、実際にどのような判断のもと採用され、どのような課題に直面するのかは、なかなか表に出てきません。
弊社プロダクトでは垂直分割のアプローチでマイクロフロントエンドを採用しました。
本セッションでは、その背景や、実際に運用する中で見えてきた課題と対策についてお話しします。

HTML/CSSで作れるのはWebサイトだけではありません！
Vivliostyleというツールを使えば、Web技術を使って紙の本を組版・デザインすることができます。
最近ではドキュメントも整備されており、数ページの本なら簡単に作れるようになってきました。

しかし、100ページを超える書籍ではそう簡単ではありません。秩序を保つのが困難になり、コンポーネントの一貫性担保や再利用もままなりません。

本セッションでは、この「規模の壁」を乗り越えるため、Vivliostyleに現代の大規模フロントエンド開発向けのエコシステムを組み合わせた事例を紹介します。

このセッションを聴けば、使い慣れたフロントエンドの知識を武器に、あなたのアイデアをかっこいいデザインの書籍で表現できるようになるかもしれません！

「このコード、意味不明…」「リファクタリング、後でいっか…」なんて、日々の開発で萎えていませんか？その気持ち、ポジティブな「ギャルマインド」でアゲていきましょう！

本セッションで言うギャルマインドとは、「このコード、もっとイケてんじゃん？」と気づいた時にシュッと直す、前向きな姿勢のこと。大規模で重たい作業ではなく、毎日できる「軽快なリファクタリング」術に絞って紹介します。

例えば、dataのような変数名を誰でも分かる名前に「盛る」、深いネストは早期リターンで即サヨナラ、コンポーネントを意味のある単位で「ちょい分け」するなど、明日から使えるハッピーな小技が満載です。

難しい話は一切なし！軽快なリファクタリングで、コードもチームのバイブスも、そして開発効率も一緒にブチ上げていきましょう！

Reactなどのフロントエンドフレームワークを使いこなす中で、「もっと速く、もっと手軽にUIを作りたい」と感じたことはありませんか？本セッションでは、PythonからUIを構築できるStreamlitを、あえてフロントエンド実装の選択肢として検討した経緯と実践を共有します。フォームやチャートの高速構築、LLMとの連携、プロトタイプ開発などで活躍する一方で、カスタマイズ性の限界や制約についてもお話します。