私たちの開発体験を高めるものとして、ソースマップは必要不可欠ともいえる存在です。しかし、ソースマップをじっくり眺めたことがある方は少ないと思います。

かく言う私も、「元のコードへの参照を保持してくれるJSONのやつ」という程度の認識でした。しかし改めて中身を見てみると、"mappings"というフィールドには「AAOI;AAPJ,SAASA,kBAAkB...」といった4~6文字程度のアルファベット列がたくさん詰め込まれいています。

これはVLQというアルゴリズムによって生成される文字列なのですが、今回のセッションではこのロジックなどを中心に、ソースマップがどのように生成され、元のコードへの参照をどのように保持しているか説明します。

「useEffectってなんかわからんけど使わない方がいいらしい」

ReactのuseEffectって便利ですよね。
ですが本来の用途とは異なる使い方をされることが多く、公式ドキュメントにも「そのエフェクトは不要かも」という項目が作られるほどです。
しかし非推奨ではなく本来使われるべき用途があります。
正しい使い方とは何か？AIにコードを書かせるとuseEffectを多用する部分も見られ、正しく使っているか見極める必要性が増してきました。

本セッションでは、useEffectの役割を使用例を交えながら説明します。
なぜ非推奨と言われるような風潮になっているのか、現代のライブラリ事情も合わせて解説します。
useEffectの使い方を見極められるようになれば幸いです。

概要

フロントエンド開発においてよく使われるようになったTypeScriptはJavaScriptに型の構文を追加した言語ですが、そのままではブラウザで直接動かすことはできず、実際に動かすにはトランスパイルやバンドルを経て最適化を行う必要があります。
発表では、TypeScriptのコードがどのようなプロセスを経てブラウザで動作するのかを図解しながら、5分で誰でも理解できる発表を目指します。

このテーマを選んだ理由

「とりあえずTypeScriptを書いて（AIに書いてもらって）画面に描画されているからOK」の段階を卒業し、ビルドプロセスを理解することは開発効率向上、トラブルシューティング精度向上、パフォーマンス配慮、さらにAIネイティブの若手育成など、TypeScriptを自由自在に用いることができるフロントエンドエンジニアとして成長するために、様々な効果が期待されます。

研究の世界が抱えているフロントエンド課題について発表します。
皆さんは普段とあまり接点がない領域かもしれませんが、新しい視点として興味を持ってもらえたり、この分野に挑戦してみたいと思うきっかけになればと思います。
学術論文は、複雑な数式を含むことや研究者自身による執筆・整形・公開が特徴の、現在主にPDF形式で配布されるの存在です。しかし、PDFは見た目を忠実に再現する一方で、文章構造や意味の保持が困難
です。近年、アクセシビリティ向上等のためにウェブ版の論文も増えていますが、多くの課題を抱えています。出版社によるウェブ版の残念な事例と優れた事例の両方を取り上げます。最後に、先進的な取り組みとして、arXiv.orgの論文をHTML化する「ar5iv」プロジェクトと、PDFの意味構造を豊かにするLaTeXの「Tagged PDF」プロジェクトを紹介し、この分野の未来と可能性について話します。

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

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

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

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

「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をどのように切り出していくのかについて具体例を交えて紹介します。

「Conditional Types、Infer、Recursive Types...」TypeScriptの複雑な型を学んでも、仕事で活用する機会はあまりありません。
しかし、これらの型は、私たちが日常的に使っているライブラリの内部で重要な役割を果たしています。
ライブラリ側で複雑な型定義が行われているからこそ、私たちは柔軟かつ型安全にライブラリを利用できます。
本セッションでは、TanStack Routerの実際のコードを理解することで、複雑な型定義がどのように使われているかを解説します。