トーク

Tanstack Tableは検索、ソート、ページネーション、行・列の選択などが備わったテーブルが簡単に作れるHeadlessなUIライブラリです。

このLTでは、TanStack Tableで作ったテーブルの検索やソートなどの状態をURLパラメータに同期できるライブラリを作った話をします。

以下が話す予定の内容です。

• ライブラリの設計で考えたこと
  • Reactの各種フレームワークで使えるようにするためのURLパラメータとの同期の仕組み
  • 数行で簡単に使い始められる設定の少なさと、細かいカスタマイズ性
• issueから学んだ設計の甘かった部分
• 初めての自作ライブラリでの学びや感想

React用のライブラリの話ですが、Reactを使ったことがない方でも楽しめる内容になる予定です。

フロントエンドエンジニアであれば、 一度は Google Tag Manager（以降、GTM）を利用したことがあるのではないでしょうか。 基本的な使い方はご存じでも 「どのようなユーザー行動を把握したいか」によって、 タグの設計や仕込み方は大きく異なります。 GTMを活用したユーザー行動の分析は、 toC領域における現代のWebフロントエンド開発において欠かせない要素です。

本セッションでは、以下の2点を中心にお話しします。

1. 弊社におけるGTM活用の実例
2. BigQueryに蓄積したデータの活用方法

実際のコード例やBigQueryとの連携を通じて、 フロントエンドエンジニアの視点から、 ユーザーのリアルな行動をどのように捉え、 プロダクトマネージャーと連携しながら活用していけるのかをご紹介します。

パソコンを開いた瞬間、「にゃーん」と鳴くねこちゃんが大量に襲いかかってきたら……。

本セッションでは、そんな“無限増殖ねこちゃん”をJavaScriptで実装する過程を通じて、macOSの自動起動・再起動制御・UI操作をLaunchAgentとJSだけで行う方法を紹介します。

JSだけでOSと仲良くなる方法を、かわいいネコと一緒に学んでいきましょう！

Next.jsの中にHonoを入れてAPIを組んでいたところ、テストのたびにハンドラをMockするのがだんだん面倒に感じてきました。とはいえ、大げさな設計を持ち込むのも違う…。そこで「ちょうどいい依存性注入（DI）」の形を探りながら、Hono側に必要な依存を注入できるようにすることで、無理なくテストを書ける構成を目指しました。

このトークでは、なぜMockがつらいと感じたのか、DIするために工夫したファイル構成や責務の分け方、Next.jsでやる上で気をつけたこと、そして「ここまではやってよかった」「ここはやりすぎだった」といった実感ベースの話を共有します。

HonoをNext.jsで使っている方、テスト設計でモヤモヤしている方、あるいは「ちょっとしたDI」を試してみたい方にとって、肩の力を抜いて聞いていただける内容になればと思います。

Vitestは今やフロントエンド開発に欠かせないテストランナーの一つですが、「モック」機能がどう動いているかを深く知る機会は意外と少ないのでは？
このセッションでは、Vitestがどのように関数やモジュールを“すり替え”、テスト時に挙動を偽装しているのか、その内部のしくみを追いかけます。

ESMの制約、Viteとの連携、vi.mock()がやっている魔法、spyとの違いなどを解き明かしていきます。
「ただの便利なAPI」が、実はどれだけ緻密な仕組みの上に成り立っているのかを一緒に覗いてみませんか？

想定する聴講者
-VitestやJestを普段から使っているが、内部動作までは知らないフロントエンドエンジニア

• テストツールやバンドラの裏側に興味がある方

Vitestは今やフロントエンド開発に欠かせないテストランナーの一つですが、「モック」機能がどう動いているかを深く知る機会は意外と少ないのでは？
このセッションでは、Vitestがどのように関数やモジュールを“すり替え”、テスト時に挙動を偽装しているのか、その内部のしくみを追いかけます。

ESMの制約、Viteとの連携、vi.mock()がやっている魔法、spyとの違いなどを解き明かしていきます。
「ただの便利なAPI」が、実はどれだけ緻密な仕組みの上に成り立っているのかを一緒に覗いてみませんか？

想定する聴講者
-VitestやJestを普段から使っているが、内部動作までは知らないフロントエンドエンジニア

• テストツールやバンドラの裏側に興味がある方

2021年のMaterial Youやそれに続くMaterial You Expressive、そしてiOS 18のTinted Icon ── モバイルOSはユーザー主導のダイナミックUIへ大きく舵を切っています。生成AIの発展により、インターフェースを個人にパーソナライズさせていく流れは今後も続くでしょう。

一方、Webでは依然としてサービス提供者が決めたある一つのテーマのみが提供されることが多数派です。色覚特性を持つユーザーに向けて最適な配色を提供したり、物語の投稿サイトで文脈に応じた配色を提供したりするなど、クライアント側で自由にテーマを操作できるメリットは十分にあると考えます。

本LTでは生成AIとテーマ生成を組み合わせ、ユーザーの嗜好やWebページのコンテンツに応じて、「LLMでCSS変数の値を生成」というアプローチで、最適な配色やデザインを提供するデモを示します。

WebAssembly の名前は一度は聞いたことがあったり、使い方は知ってるがその技術が目指しているゴールや思想を知らない人が多いかと思います。WebAssembly は Web 標準として組み込まれるために以下の 4 つの目標を挙げています。

1. 高速かつ高効率、そしてポータブルであること
2. 可読性があり、デバッグ可能であること
3. 安全であること
4. ウェブを破壊しないこと

本セッションでは、実際に策定された仕様や実装例から、WASM を利用する開発者の目線からどのように Web 標準として組み込まれ、モダンなフロントエンド技術からどのように利用できるのか、順を追ってご紹介しようと思います。

フロントエンドエンジニアの登場以降サービスのUIはどんどん使いやすくなる一方で裏側のUIロジックは複雑になる一方です。
Reactはコードを宣言的にかけるようにしてくれましたが、現在のアプリケーションはそれでもなお複雑なロジックを抱えています。

私は業務の中でReact/Next.jsのアプリケーションのリファクタリング業務などを行っており、その経験を元に現在業務でReactを活用している人向けに、分かりやすいReactコンポーネントの書き方について紹介させていただきます。

大まかな構成

• 漸進的にコンポーネントを移行する
• C/Pパターンから学ぶファイル構成の重要性
• Reactを使いこなそう

※構成は現状の想定のため少し内容の変更があるかもしれません。

旅行アプリ『NEWT』では、ツアー、ホテル、マガジンの機能をモノレポ内の独立したNext.jsアプリとして構築し、これらをメインドメイン配下にリライトとベースパスで統合しています。

さらにリライト機能を駆使し、(1)空港/出発地コードのURL正規化、(2)マガジン記事のクロスドメイン提供、(3)クエリパラメータのパス変換、(4)外部ノーコードツールの同一ドメイン統合などを実現しています。
これによりマイクロサービスごとの独立性を保ちながら、ドメインオーソリティの集約・ドメインランクの大幅な向上を達成しました。

状態管理やログ分析への課題と、それらを乗り越えてドメインランク向上に貢献した実践知を、具体例を交えながらご紹介します。

■ 想定観客：フロントエンド中級者〜上級者、SEOを意識したアーキテクチャ設計に興味がある方
■ 期待効果：マイクロサービス環境でのSEO戦略立案など

【セッション概要】
近年のフロントエンド開発は、AIによる開発体験と生産性がより求められるようになってきました。そんな中で業務上で、どんなふうに私たちがAIと向き合ってきたか、どうやって生産性を上げることができたのかなどをトピックに話します。

本セッションでは、特に以下の3つについてお話しします。

• Design to Codeをより効率的に実現するFigma MCPの活用法を実践例を交えて紹介します。
• AIの力を借りて、いかに開発効率を高めていくかについて、私が思う勘所を共有します。
• これらの取り組みを通じて私たちが目指したい理想の開発体制や文化についての展望を提示します。

【対象者】

• フロントエンド開発の生産性を向上させたいエンジニアの方
• 実際のAI x フロントエンドの実践例を知りたい方
• よりAIを活用できる方法に興味がある方

現代のフロントエンド開発では TypeScript を用いることが多く、開発者は型の恩恵を享受しながら本質的な開発に集中できます。

しかし、REST API を挟んだ「外界」との接続点において「型安全」は必ずしも担保できるわけではなく、仮初めの型定義に頼った開発を余儀なくされる場面も少なくありません。
あるいは、バックエンドから書き出したスキーマから TypeScript 用型定義を生成する手もありますが、開発においてバックエンドが先行する必要があるなどの難点を抱えています。

このトークでは、

• 「REST API 型安全は誰の嬉しさなのか」という原点に立ち返り
• バックエンドと協調しながら双方が嬉しい「API 仕様」の共有を実現する手法について
• 技術面だけでなくドキュメンテーションの観点からも

「REST API 型安全」を考え直すきっかけとなることを期待してお話します。

現代のフロントエンド開発では TypeScript を用いることが多く、開発者は型の恩恵を享受しながら本質的な開発に集中できます。

しかし、REST API を挟んだ「外界」との接続点において「型安全」は必ずしも担保できるわけではなく、仮初めの型定義に頼った開発を余儀なくされる場面も少なくありません。
あるいは、バックエンドから書き出したスキーマから TypeScript 用型定義を生成する手もありますが、開発においてバックエンドが先行する必要があるなどの難点を抱えています。

このトークでは、

• 「REST API 型安全は誰の嬉しさなのか」という原点に立ち返り
• バックエンドと協調しながら双方が嬉しい「API 仕様」の共有を実現する手法について
• 技術面だけでなくドキュメンテーションの観点からも

「REST API 型安全」を考え直すきっかけとなることを期待してお話します。

大規模なNextjsプロジェクトにおいて、一つの修正をした際に「どこに影響が出るのか」を正確に把握することは面倒ですよね？

本トークでは、ts-morphを活用して修正箇所の影響範囲を自動分析・一覧化し、手動でのコード追跡作業を削減します。GitHub Actionsに組み込むことで、PR作成時に影響範囲が自動コメント表示され、レビュアーが影響箇所を意識したレビューができ、PR作成者も想定外の影響箇所に気づけます。開発チーム全体で安心してリファクタリングできる環境を作っていいきましょう！

サービス成長に伴い、機能の複雑化やマーケティングツール導入によってパフォーマンスが劣化する課題が発生します。弊社の提供する旅行アプリ『NEWT（ニュート）』でも同様の問題に直面しました。
本セッションでは新機能開発で忙しい中でも、AIを活用して効率的にパフォーマンス改善を効率的に実現する手法をお話しします。アクセス数の多いページに改善対象を絞り、LighthouseとDevToolsのPerformance AIアシスタント、ChatGPTを組み合わせることで、設定ミス、不要ライブラリ、分析ツール読み込み順序などの問題を手軽に特定できました。問題の修正にはDevinを用いています。
サービス成長期におけるパフォーマンス改善の優先順位付けと、AI活用による効率的な問題解決アプローチをお教えします。

Reactのアイコンは核反応、Hydrationは直訳すると“水分補給”？

既知の概念にたとえて新しい概念を説明する試みは、アナロジー（類推）という言葉で呼ばれています。
実は、フロントエンド領域では化学実験や物理学に関するアナロジーがしばしば用いられてきました。これらのバックグラウンドを持つエンジニアには直観的な理解の助けとなる一方、英語に非ネイティブな我々の多くにとってはあまりピンと来ていないようです。

学部では工業化学を専攻した発表者が、これらフロントエンドの概念の「元ネタ」を、その背後にあるコンテキストとともに解説します。

この発表を聞いた人は同僚に雑学自慢できるだけでなく、これから新しい概念が登場した時でもスムーズに理解ができるようになるでしょう。

プロダクション水準のWebアプリ開発において、ReactはUI構築のためのJavaScriptライブラリとして、国際的にも事実上の一強状態であると言えます。
Next.jsはそれを支えるReactフレームワークとして、App RouterをやRSCといった革新的なメカニズムをReactに先駆けて導入してきました。
しかし移行の困難さやSSRに偏重した姿勢は「Next.js疲れ」を開発者にもたらし、Remixなど他のフレームワークへの離反も招きました。

本発表ではNuxtやSolidといった「React以外の」オルタナティブなOSSフレームワークの開発体制に着目し、フロントエンドを取り巻くエコシステムを「地政学」の観点から読み解きます。

米国を中心に激変しつつある昨今の国際情勢において、本発表がエンジニアとしての技術スタックを見つめ直すきっかけとなることでしょう。

「ReactでRPGって作れるの？」そんな思いつきから始まった個人開発プロジェクト『ケイタMAXの冒険』。フロントエンド技術を学ぶ中で、自分自身が一番ワクワクできるアウトプットを作りたいと思い、RPGをNext.jsで作成しました。

本セッションでは、なぜ作成したのか、どんな工夫をしたのか、そしてReactでどのように実装したのかを紹介します。
Cursorを使用しての開発や、PWAとしての配信、Jotaiを使ったステート管理などの開発体験を共有します。

Reactを学習したい方、技術学習を楽しく続けたい方、そしてちょっとRPGが好きな方にも楽しんでもらえる内容です。

使用技術・ツール
• Next.js
• React
• Jotai
• PWA

コードゴルフ大会に参加し、とても楽しかったため、「自分の会社でも実施したい！」と思い立ち、実際に開催しました。結果は大成功で、とても楽しい時間を過ごせたので、その時の話をします。

コードゴルフの内容は、「FizzBuzz」問題や、1時間で解ける程度のの難易度のものを採用しました。言語はTS、PHPを使用しました。

具体的には以下のような内容を話す予定です。

•コードゴルフ大会を実施するにあたって、コードゴルフができるWEBアプリをどのように作成したか
•コードゴルフ大会の雰囲気や参加者からの評判
•参加者たちの感想
•コードゴルフ大会を定期的に開催していることでの社内への影響
•コードゴルフ大会を開催した私自身の感想

皆さんは、インプットだけでなく、記事を書いたり、LTをしたりといったアウトプットをしていますか？僕は、1年前Qiitaに記事を投稿し始めるまではほとんどアウトプットをしていませんでした。
そんな僕が、去年の2月からQiitaに毎日記事を投稿し始め、約1年でなんと160記事を公開しました。
テーマはReactなど、日々の学びや実践で得た知見です。
「アウトプット経験ゼロ」からスタートした僕が、どのようにして投稿を続け、何を得たのかについてお話しします。

内容
・どんな内容の記事を書いたのか
・毎日投稿して感じたメリット
・デメリットや大変だったこと
・投稿を通して得られた成長
・やってみて感じた素直な感想

アウトプットって実際どうなの？毎日投稿ってどうやるの？といった疑問に、僕なりの答えを届けられたらと思います。
「自分も何か書いてみようかな」と思ってもらえるきっかけになれば嬉しいです！