トーク(30分)
フロントエンド

静的解析が見せてくれる世界と現在地

re_taro_ りんたろー

静的解析は単なる「コードの粗探し」ではありません。

React Compiler はコードを静的に解析することで、 React が前提としているメンタルモデルを私たちに提示します。
また、プロジェクト固有のカスタムルールは、暗黙のコード規約を明文化し、人が書いても、 AI が生成しても同じ品質を担保するための基盤になります。

本セッションでは、静的解析が私たちに「どんな世界を見せてくれるのか」を掘り下げた上で、 ESLint・Biome・oxlint といった主要ツールの現在地を整理します。
その上で、プロジェクト規模やフェーズに応じた、静的解析との現実的な向き合い方を提案します。

2
トーク(30分)
フロントエンド 北海道在住 北海道出身

Next.js 16を知ろう、CacheComponentsライブコーディング

_n13u_ n13u

Next.js 16 から従来のPPAを置き換える形でCache Components機能が登場しました。

Next.js Conf 2025 の目玉でもあったこの機能を実際に皆さんの目の前で使いながら解説していきます。

トーク(30分)
フロントエンド

microCMSとFigmaを管理画面として謎解きゲーム「カミとミコ」をどうやって作ったか

chocodogmagic まぁし / 知念

謎解きアドベンチャーゲーム「カミとミコ」開発の裏側を紹介します。
https://realdgame.jp/s/kamitomiko/

ReactのSPA構成で実装したブラウザゲームです。
サーバーサイド無しのため、画面遷移や進行状態の設計で苦労しました。

ゲーム開発ではキャラクターやフラグなど扱う情報が多く、開発が進むほどデータと状態の関係性も複雑になります。
シナリオ・会話・キャラクター情報・謎の答え・フラグなどの情報はmicroCMSで管理しており、「なぜブラウザゲームにCMSを使うのか」という背景から、スキーマ設計や開発・運用のコツまで説明します。
また、「Figmaを管理画面」としてキャラクターの配置や移動ルートを設定する手法を取り入れたので、その連携方法にも触れます。

本セッションでは、JavaScriptでゲームを作ってみたい人や、状態管理・データ設計で悩んでいるエンジニアに向けて、実装の工夫や苦労した点を紹介します。
・進行フラグや状態管理の設計
・CMSやFigmaによるコンテンツ管理
・LocalStorageでのオートセーブ
・開発中にデバッグしやすくする工夫

トーク(30分)

「あのマネージャー、何考えてるの?」を解明する。開発者に期待するコミュニケーション(見積り・対話・責任)について

ici_mici ナカミチ

マネージャーに対して「開発状況をわかっていない」「どう関わるべきか迷う」と感じたことはあるだろうか?

開発プロジェクトのマネジメントを生業としている私から、
「何を考えて、この発言をしたのか」 「どんな回答を期待しているのか」といったコミュニケーションの裏側を伝えたい。

このセッションで目指すのは、私見ではあるが「マネージャーが何を考えていて、開発者とどんなコミュニケーションを取りたいのかを伝えること」である。

以下のアウトラインでお届けする

  • 見積りについて
    見積りに正確さは求めていない。既知と未知の線引きを一緒に行いたい
    精緻な見積りなど不可能である前提に基づいて会話していることを知ってほしい

  • 日々の対話について
    世間一般でのコミュ力はいらない。笑いも盛り上がりもいらない。ただ情報と感情について知りたい

  • 責任範囲と自由について
    指定していない限りはとにかく自由に開発してほしいと願っている
    そして開発者からのプロフェッショナルとしての責任(提言や批判)を期待している

マネージャーを正しく利用し、もっと自由に楽しく開発できるチームをどう作るか。そのためのヒントを持ち帰ってほしい。

2
LT(5分)
フロントエンド 初登壇

LinkButtonのdisabledは本当にdisabledか?

shiraha_maru shirahama

<a>要素を使ったLinkButton実装において、disabled状態にもかかわらずフォーカスが当たり、Enterキーで操作できてしまうケースに遭遇しました。

本LTでは、この挙動がアクセシビリティの観点でどのような点が問題になり得るのか、HTML要素の役割(セマンティクス)、W3C仕様、ARIA属性の考え方を踏まえながら見ていきます。
さらに、主要なUIライブラリの実装例を参考にしつつ、LinkButtonにおけるdisabled状態をどのように実装・表現するのがよいのかを考えていきます。

トーク(15分)
フロントエンド

デザインシステムは、作って終わりじゃない!チームに根づかせるためにエンジニアができること

kajitack 梶川 琢馬

デザインシステムというと、UIの共通化やルールの整備を思い浮かべる方が多いかもしれません。
でも実際には、それを「どう運用していくか」「どうやってチームに根づかせるか」のほうが、ずっと悩ましかったりします。

このトークでは、デザインシステムを導入・運用してきた中で見えてきた

  • 再利用と柔軟さのバランスを取るコンポーネント設計の考え方
  • 一貫性を保ちつつ変更に強くするための構造づくり
  • チーム内の共通理解を育てるレビューやドキュメントの工夫
  • 属人化しないための設計
    など、エンジニア視点での実践と気づきを紹介します。

「とりあえず作って終わり」じゃなくて、「ちゃんと使い続けられるデザインシステム」を目指す。
そのために実践してることを紹介します!

2
LT(5分)
フロントエンド 初登壇

Reactに依存しないReactライブラリとはなんなのか

kiririLee kirik

長期的な保守性や再利用性を考慮して、Reactに依存しないライブラリを選ぶことがあります。
このLTでは、TanStack Query風のライブラリを簡易的に自作しながら、「Reactに依存しないライブラリ設計」とは何か、コードベースからイメージを掴みます。

useSyncExternalStore と Pub/Subパターンを使った React と VanillaJS の連携
Reactから他UIライブラリへの対応

について話します。

2
LT(5分)
フロントエンド 初登壇

Tiptapで実現する堅牢なリッチテキストエディタ設計

kiririLee kirik

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

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

ProseMirrorのスキーマ定義を活用したHTML構造の強制と正規化
Reactコンポーネントの組み込みやプラグインによる拡張性
TiptapのExtension単位での単体テストによる機能ごとの信頼性担保
について話します。
WYSIWYGエディタの扱いに課題を感じている方や、Tiptapを本格的に活用したい方にとって実践的なヒントとなる内容をお届けします。

1
トーク(15分)
フロントエンド

境界と依存を整えるMonorepo戦略

kajitack 梶川 琢馬

複数のサービスを運用する中で、コードの重複、責務の曖昧さ、変更時の影響範囲の広さに悩んでいませんか?
本セッションでは、4つのフロントエンドアプリケーションを1つのMonorepoに統合した事例をもとに、統合を起点に進めたリアーキテクトを紹介します。

パッケージの責務境界を見直し、共通コンポーネントと依存関係を整理することで、開発体験を改善しました。
Monorepoへの統合プロセスとツール選定から、責務分離を軸にしたアーキテクチャ再設計の手法まで、実践的なヒントをお届けします!

1
パネルディスカッション(30分)
PHP 北海道出身

ドメイン駆動設計、結局どう始めれば良い?実践者に学ぶDDDのリアル

aki_artisan あき

「DDDって何から始めればいいの?」
エヴァンスの原典は難解、実践ドメイン駆動設計も分厚い、ネットの情報は断片的……。DDDを学ぼうとして挫折した経験はありませんか?
このパネルディスカッションでは、DDDに取り組んできたパネリストが初学者の疑問から実践者の悩みまで幅広く議論します。

タイムライン:

  • 自己紹介・イントロなど(5分)
  • 何をもって「DDDを実践している」と言えるのか(5分)
  • バランスを見て妥協するポイントは?(5分)
  • 越境するのってぶっちゃけ難しくない?(5分)
  • 会場からの質問(10分)

当日は会場からSlidoで質問を受け付けます。「パターンを覚えればOK?」「チームに導入するには?」など、皆さんの疑問をぶつけてください。明日から一歩踏み出すヒントを持ち帰れるセッションを目指します。


パネリスト
竹澤 有貴 @ex_takezawa
成瀬 允宣 @nrslib

モデレータ
瀧川 啓紀 @aki_artisan

3
トーク(30分)
PHP

ソースコードが「未来へのメッセージ」だとしたら、何を"書かない”べきか

o0h_ きんじょうひでき

「プログラマが知るべき97のこと」に、未来へのメッセージというエッセイがあります
「いま動く」だけでなく「未来の世界で、それを読む人のため」にコードを、と説くものです

それは、ただ単に「読んで理解しやすいコードを書こう」という話に留まらないと理解できます
レイヤーの設計に、クラスや変数の命名1つとっても、「何をして欲しいか・何を望んでいないか」を伝えていくものになります

1度書かれてpushされたら、「他の誰かのもの」です
そのコードには"signifier"が宿り、それを受け取った人の次なる判断を進ませます
そして、その人の隣に「今それを書いた貴方自身」はいないのです

例えば「◯◯Manager」と「◯◯TableAccess」で、それぞれどんなメソッドが追加されそうでしょうか?
あなたの思った未来に近いのは、どちらでしょう

このトークでは、個人的に考える「設計行為に重要な2つの観点」を共有します

  1. 全てのコードは「あなたのいない世界」で勝手に育つ
  2. あらゆる形象は、受け手にとっての「示唆」を持つ
1
トーク(15分)
PHP

ORM用のクラス定義から、そのままER図を生成する

o0h_ きんじょうひでき

バックエンドアプリケーションをPHPで書いていると、ORMをもりもり使いますよね。
アプリケーションレイヤーとDBレイヤーで、持っている知識が微妙に異なる事がありませんか?
例えば「DB上で外部キーを利用していない場合」や、「より論理的なグルーピング」を考えた場合です。

そして、次の発想に至ります。
─ORMでの定義からER図を生成できたら、より本質的な形式知の共有の助けにならないか?

Data MapperベースのORMなら実現可能性が高いです。
Doctrine ORMを利用したPJに関わっている中で、
「PHPのクラス定義からER図を出力しちゃえ!」というツールを作りました。
汎用性が高く高機能なER図生成ツールであるtblsと、その「外部ドライバー」を自作した組み合わせです。

これは、「tblsは便利!自分の環境用のオレオレな使い方してもいいよね」を届けるトークです。
ポイントさえ踏まえれば、特定の言語やORMライブラリに閉ざさない話になると考えています。

トークの主なポイント

  • tblsはそもそも何ができるか
  • Doctrineだと何故できるのか
  • 開発したツールの動作例
トーク(15分)
フロントエンド 初登壇

「その実装、本当に美しいか?」──CSS transform仕様を理解して実装の複雑さを回避した話

sbleru maru。

何かの問題を解決する時、
実装としては動くけど、方法が複雑すぎて、もっと良い解決方法があるのでは
と感じたことはありませんか?

僕は何度もあります。
そのたびに「ではこの実装は、美しいか?」と、
僕の中のフベルトさんが問いかけてきます。
(チ。 ―地球の運動について― 1巻 p39)

そんな時、仕様を深く読み解くことでシンプルな解決方法が見つかることがあります。

本トークでは、ある問題に直面した際に、
CSSのtransformの仕様を読み解く中で、
それが内部的に行列計算されていることを知り、
各記法がどのような計算をしているかを理解することで
複雑だった実装をシンプルにできた経緯を紹介します。

もしかすると最後には
ラファウよろしくこう叫ぶことになるかもしれません。

あんな複雑な実装を、仕様を読み解くだけで、こんなにシンプルにできてしまったら、
この実装を、美しいと、思ってしまうッ!!

1
トーク(15分)
フロントエンド

Figma Code Connectで実現する、デザインシステムの真の採用

_nacal nacal

デザインシステムの目的は、デザイナーと開発者の間に共通言語を作ることです。しかしFigmaのDev Modeが出力するコードと実際のコードベースが一致していなければ、開発者はデザインを見ながら自分で書き直すことになります。共通言語のはずが翻訳が必要な状態では、デザインシステムは本来の価値を発揮できません。

この課題を解決するのがFigma Code Connectです。FigmaコンポーネントとコードをPropsレベルで接続し、Dev Modeから直接使えるコードを出力可能にします。本セッションでは、自作UIコンポーネントライブラリとFigmaを1:1で対応させた実践をもとに、設計方針と実装手順を解説します。

さらにCode ConnectはFigma MCPと組み合わせることで、AIエージェントにもデザインシステムの文脈を共有できます。静的変換の確実性とAIの柔軟性を両立させるアプローチ、そしてCode Generation APIによるページ単位の出力まで、実践的な活用法をお伝えします。

1
トーク(30分)
フロントエンド

AI時代だからこそ、(React)の基礎を整えろ!

シャン

皆さんは、AIを日々活用しながら、フレームワークの基礎をどれくらい意識的に学んでいますか?

生成AIの登場により、コーディングは劇的に効率化されました。しかし、私が危惧しているのは、AIが出力したコードを深く理解せずに「そのまま使う」エンジニアが増えていることです。
その結果、一見動くけれどバグやパフォーマンス問題を抱えたコードが生まれています。さらに深刻なのは、タスクが終わっても何も学んでいない——「AIに任せた」で終わってしまうケースです。
私自身、React公式ドキュメント(https://react.dev/learn)を最初から最後まで通読したことで、全体像が見えるようになりました

本セッションでは:

  • React公式ドキュメントを紹介
  • 確固たる基礎を持つことで、AIの提案を瞬時に評価し、問題点を見抜けるようになることを示す
  • 基礎があれば、AIをもっと効果的に使える。何より自分が書いたコードに責任を持てるようになる。この「オーナーシップ」こそ、信頼されるエンジニアの土台であり、開発をもっと面白くし、学び続ける情熱の源である
    一緒に基礎を見直しましょう。
1
LT(5分)
初登壇

Webアプリをたくさん作るWeb開発者のためのホスティング(無料枠・格安VPS・ローカルマシン??)

0fuzimaru0 0fuzimaru0

たくさんWebアプリを構築するけどホスティング費用は抑えたい
そんな個人的な悩みの解決方法を共有したくなったので、2026年現在のホスティングサービス料金を徹底比較します!

NextJSを使用されている方向けに、Vercel以外のホスト手段として
・Cloudflare Workers
を用いたホスティングについて解説します。
無料枠内でWebアプリをホストできるので
・何個までホストできるのか
・どのような手順でホストできるのか
を紹介します。

またLaravelなどを使用されている方向けに
Renderを使用した複数のWebアプリのホスティングについて解説します。
無料枠内でWebアプリをホストできるので
・何個までホストできるのか
・どのような手順でホストできるのか
・Dockerファイルの設置
を紹介します。

上記のホスティングサービスを利用する以外の手段として
・Nextjs / Laravelがホストできる安価なVPSを利用する方法
・バニラPHPのWebアプリを共有サーバーを利用する方法
・ローカルサーバーを用いたホスティング(CloudFlare Tunnel併用)方法
を紹介します。

2
トーク(15分)
フロントエンド 北海道在住

Googleに頼らずにストリートビューを自作した話

satoshi7190 Satoshi Komatsu

ストリートビュー機能で有名なGoogleマップは、今の生活で必須のサービスになっています。
そんなストリートビュー付きのWebマップを自作できないかと思って、小さなフィールドを舞台に撮影から実装まで自力で行いました。
WebGLを使って360度パノラマを表示し、地図と連携させるまでの苦労話を共有します。

https://forestacdev.github.io/morivis/map?3d=0&b=0&c=136.920747_35.552897&cr=18.04_122.77&p=0&sv=1327&z=18.0

3
トーク(15分)
PHP

自宅で動くIPルーターをPHPで実装する

cakephper 市川@cakephper

PHPのsocket機能を使うと手軽にネットワークプログラミングができます。
2025年11月にリリースされたPHP8.5からそれが強化され、TCP/IP以下の層も手軽に読み書きできるようになりました。

PHPのネットワークプログラミングでどこまでいけるか探るため、自宅で動いている無線LANルーターのようなものをPHPで実装してみました。
PHPでイーサネットフレームを処理し、パケットの転送、ARPによるアドレス解決などを実装、それをラズベリーパイという小型のPCに乗せて実際のIPルーターとして動作させることに成功しました。

IPルーターを作るにはどのような機能が必要か、それをPHPでどう処理するかという話をしつつ、
ネットワークプログラミングの楽しさ、実機で動いた時の感動が伝えられたらと思います。

3
LT(5分)
フロントエンド 初登壇 北海道在住

認証統合から始めるフロントエンドの機能単位開発 — マイクロサービス思想の適用

koki_m kouki.miura

モノリシックなフロントエンドでは、認証や画面の増加に伴い開発と保守の負担が増大します。本発表では、認証を統合した上でフロントエンドを機能単位に分割し、それぞれ独立して開発・デプロイ可能にする手法を紹介します。バックエンドのマイクロサービスアーキテクチャの考え方をフロントエンドに応用する「マイクロフロントエンド」や、認証・データ取得の統合戦略を解説し、開発効率とスケール性の向上につなげる具体的な実装例と注意点を共有します。小規模〜大規模チームに有効なフロントエンドの新しい開発アプローチをお届けします。

トーク(15分)
PHP フロントエンド

Gemini × pgvector で作るセマンティック検索 〜 個人開発サービスCuraQのAI実装 〜

「この記事、前に読んだはずなのに見つからない」——キーワード検索の限界を感じたことはありませんか?
私が個人開発している記事キュレーションサービス「CuraQ」では、Gemini APIとpgvectorを組み合わせたセマンティック検索を実装しています。

本セッションでは、以下の実装をコードレベルでお話しします:

  • Gemini 2.0 Flashによる記事解析と「concepts」生成
  • gemini-embedding-001によるベクトル埋め込み
  • Supabase + pgvectorでのベクトル検索RPC実装
  • キーワード検索とのハイブリッド戦略
  • プロンプトインジェクション対策と安全性への配慮

    「個人開発でもここまでできる」という実践例として、すぐに使える知見をお持ち帰りいただけます。

対象者

  • ベクトル検索・セマンティック検索を実装してみたい方
  • Gemini APIをプロダクトに組み込みたい方
  • Supabase + pgvector の実践例を知りたい方
  • 個人開発でAI機能を実装したい方