トーク

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

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

大まかな構成

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

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

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

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

旅行アプリ『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作成者も想定外の影響箇所に気づけます。開発チーム全体で安心してリファクタリングできる環境を作っていいきましょう！

ネットサーフィンをしていると「アプリをインストール」というポップアップを誰しも１度は経験したことがあると思います。

ショートカットを作成するのと何が違うのか、何をインストールしているのか。
そんなポップアップの裏側である技術「Progressive Web Apps （PWA）」。
OSや端末を選ばないWebアプリの利点と、オフラインでも使用できるネイティブアプリの特性を融合したPWAはどのように生まれて、どのように実装されているのか。
なぜ、PWAはそこまで普及していないのか。
PWAはどこまでネイティブアプリに近づけているのか。

本トークでは、PWAに関するこれまでの歴史を振り返りつつ、PWAがどのような仕組みでブラウザや端末に実装されているのかを読み解きます。

PWAに夢を見た1人のWebエンジニアから見たPWAの世界を共有できればと思います。

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

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

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

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

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

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

バイオ×AI分野では、数百万〜1,000万件規模のデータをリアルタイムで可視化・分析するニーズが急速に高まっています。もともとAI解析ではバックエンドでの大規模データ処理が重視されていましたが、現在ではブラウザ上でのインタラクティブな可視化においても同等の処理性能が求められるようになっています。本セッションでは、WebGL2を活用し、Transform FeedbackやR32Fテクスチャ、Framebufferなどを組み合わせて、サーバーに依存せずにブラウザ内で完結するGPGPUベースの高速データ処理の仕組みを解説します。さらに、カテゴリ・数値フィルタの操作に対して即座にGPU演算が反映されるUIや、FPSやGPU時間などのパフォーマンス指標を可視化するインタラクティブなデモも併せて紹介します。

プロダクション水準の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など、日々の学びや実践で得た知見です。
「アウトプット経験ゼロ」からスタートした僕が、どのようにして投稿を続け、何を得たのかについてお話しします。

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

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

プロダクト開発におけるAI活用は、現状コーディングタスクが一般的です。しかしそれ以外の開発タスクにおいても、AIを有効に活用できる可能性があります。
その一例としてユーザービリティテストがあります。

ユーザビリティテストはユーザー体験を改善するために重要ですが、その継続的な実施には多大な時間とコストがかかります。また人間の主観的な評価が求められるため、自動化は困難な領域とされてきました。その一方でAIエージェントを用いてユーザーの行動をシミュレートし、擬似的にユーザビリティテストを行う萌芽的研究が登場しています。

本セッションでは、実際のプロダクト開発現場にAIエージェントによるユーザビリティテストをPoC導入した結果、得られたインサイトを共有します。
また、AIエージェントの活用がユーザー体験の改善に今後どのように貢献できるのか、その課題は何かについても考察します。

概要
サービス開発・運用をする上で最早テストは必須と言って過言ではありません。
私は普段業務でエディター開発を行っているのですが、構成の複雑さが相まって気がついたらとある機能が壊れていた・動いていなかった、画像表示のデザインを修正したらそれとは別の画像表示のデザインが崩れていた、といった事態が起こりやすい環境です。
そんな環境でも自分たちにとって安全に、安心してエディター開発ができるよう実装と共にテストの作成を行っています。

本セッションでは、
・VitestとPlaywrightの両方が必要な理由
・実際にテストで担保している機能の例
をベースにどのようにしてエディターの品質を保っているのかを解説します。

DuckDB Wasmの魅力の１つとして、フロントエンドの実装だけで地理空間情報を扱うことができるということがあります
実際、どのような構成となるのか、メリットやデメリットなど、サンプルのアプリケーションを通じてお伝えできればと思います

内容：React のアップデートを振り返り、現在の開発環境と比較を行う
対象者：初学者、若手フロントエンジニア、中級者

React は 2013 年の登場以来、Web フロントエンドの在り方を大きく変えてきました。
しかし、自分を含めエンジニアを始めた時には既に React が存在し、多くの開発現場で使用されている環境では、React がどのような歴史を辿って今の開発体験が得られたのか知らない方も多いと思っております。
そのため、本セッションでは、React の歴史的なアップデートを振り返りながら今の開発体験がどれほど快適になったかを見ていきたいと思います。