2 年前の 1 月，PHP Conference Hokkaido 2024 で冬の上川南部を巡る雪原開発旅行を提案しました．
フロントエンド・PHPカンファレンス北海道2026 では春の上川中部・南部，空知中部・北部を巡る草原開発旅行を提案します．
雪解けの大地を見下ろしながら着陸する，就航率99%を誇る旭川空港を起点に，実りある2泊3日の旅程をお楽しみいただけます．

旭川市，東川町，美瑛町，上富良野町，富良野市，芦別市，赤平市，滝川市，深川市を巡ります．
この旅では，芽吹きの大地があなたの開発環境です．咲き誇る花々，見渡す限りの空と心が通じたとき，かつてない躍動感に包まれるでしょう．

広い大地を巡ると体力が持たないのでは？
ご安心ください．旅程には源泉かけ流しの天然温泉も組み込まれています．
源泉かけ流しの天然温泉の力を借りることで，より精緻で俊敏な開発が実現可能です．

天井のある退屈な AI との対話を抜け出して，上川空知の春を満喫し，人間の底力で世界を変えるべきです．
北海道≒札幌——誤った認識は今すぐ捨てましょう．179の市町村があなたを待っているのですから．
（実践したものを LT します）

概要

LLMを活用したアプリが増加する中、AIが生成したコードを安全かつ迅速に実行する環境の重要性が高まっています。本セッションでは、TSネイティブなフレームワーク「Mastra」とセキュアな分離環境「Vercel Sandbox」を組み合わせ、ユーザーの入力からミニゲームを生成・実行する手法を解説しまし

材料

1. Mastra：型安全で旨みの強いベース
2. KAPLAY：爆速ゲーム開発用メイン食材
3. Vercel Sandbox：高火力な隔離環境
4. LLM：香り高いスパイス

作り方

1. ベース準備：MastraのAgentにコンテキストを馴染ませる
2. 隠し味：Sandbox操作用ToolをMastraに混ぜ込む
3. 仕込み：Workflowで生成からデプロイまでを準備
4. 安全な火入れ：Sandbox内で隔離実行し、味を整える
5. 盛り付け：完成URLをユーザーに提供し、その場で実食

ポイント

• 素材の簡単さ： 複雑なエージェントもTSだけで完結する手軽なレシピ
• 衛生管理： 隔離環境でAI生成コードを安全に実行

概要

LLMを活用したアプリが増加する中、AIが生成したコードを安全かつ迅速に実行する環境の重要性が高まっています。本セッションでは、TSネイティブなフレームワーク「Mastra」とセキュアな分離環境「Vercel Sandbox」を組み合わせ、ユーザーの入力からミニゲームを生成・実行する手法を解説しまし

材料

1. Mastra：型安全で旨みの強いベース
2. KAPLAY：爆速ゲーム開発用メイン食材
3. Vercel Sandbox：高火力な隔離環境
4. LLM：香り高いスパイス

作り方

1. ベース準備：MastraのAgentにコンテキストを馴染ませる
2. 隠し味：Sandbox操作用ToolをMastraに混ぜ込む
3. 仕込み：Workflowで生成からデプロイまでを準備
4. 安全な火入れ：Sandbox内で隔離実行し、味を整える
5. 盛り付け：完成URLをユーザーに提供し、その場で実食

ポイント

• 素材の簡単さ： 複雑なエージェントもTSだけで完結する手軽なレシピ
• 衛生管理： 隔離環境でAI生成コードを安全に実行

Smarty などのテンプレートエンジンで構築された既存ページに React を導入したい場面、ありますよね？

中には「ページまるごとリプレイス」ではなく「ページの中で部分的に React 導入」を選ぶべき場面も多いはずです。

この LT では、Astro で知られる "Islands Architecture" の概念を、
フレームワークに頼らず既存のシステム上で再現・実践するためのアプローチを 5 分間に濃縮します。

概念自体は React の大前提とも言えるユースケースであり、一見シンプルに見えます。
理論上は、script タグで React をロードして、createElement することもできます。

しかし、JSX はほしいですし、TypeScript 対応や npm ライブラリの利用にはビルドが必要となり、
アーキテクチャやデプロイフローが一気に複雑化してしまいます。

このような悩みに対して、理想論ではない「現実的で実践的な付き合い方」をお話します。

私はこれまで、大規模かつレガシーなMPAサイトの保守・運用に携わっていました。現場では「SPAいいな」と憧れつつも、大掛かりなリプレイスは現実的ではなく、モダンな画面遷移の提案を諦めていました。本セッションで紹介する「View Transition API」は、そんなかつての私と同じような制約下にあるエンジニアへの一つの回答となる標準技術です。

この技術の最大の特徴は、既存のHTML構造を維持したままCSS数行から導入でき、未対応ブラウザでもサイトが壊れない「プログレッシブ・エンハンスメント」の考え方にあります。リスクを最小限に抑え、ブラウザの標準機能だけで心地よい体験を後付けできるため、実務において非常に現実的な選択肢となります。

本セッションでは5分という限られた時間の中で、MPAでの実装方法や擬似要素による仕組みの要点を絞って解説し、実際の挙動をデモで素早く提示します。大規模サイトの保守に携わる方はもちろん、クライアントへ低コストかつ効果的な提案をしたいエンジニアやディレクターの方に向け、フレームワークに頼らず「もっと良い体験」を今すぐ届けるためのエッセンスを凝縮してお伝えします。

私はこれまで、大規模かつレガシーなMPAサイトの保守・運用に携わっていました。現場では「SPAいいな」と憧れつつも、大掛かりなリプレイスは現実的ではなく、モダンな画面遷移の提案を諦めていました。本セッションで紹介する「View Transition API」は、そんなかつての私と同じような制約下にあるエンジニアへの一つの回答となる標準技術です。

この技術の最大の特徴は、既存のHTML構造を維持したままCSS数行から導入でき、未対応ブラウザでもサイトが壊れない「プログレッシブ・エンハンスメント」の考え方にあります。リスクを最小限に抑え、ブラウザの標準機能だけで心地よい体験を後付けできるため、実務において非常に現実的な選択肢となります。

本セッションでは5分という限られた時間の中で、MPAでの実装方法や擬似要素による仕組みの要点を絞って解説し、実際の挙動をデモで素早く提示します。大規模サイトの保守に携わる方はもちろん、クライアントへ低コストかつ効果的な提案をしたいエンジニアやディレクターの方に向け、フレームワークに頼らず「もっと良い体験」を今すぐ届けるためのエッセンスを凝縮してお伝えします。

フロントエンドのパフォーマンス改善は「詳しい人がやるもの」と思っていませんか？

本セッションでは、プロジェクトの全体像を把握していなかった転職間もなかったエンジニアが、既存のVueアプリケーションのパフォーマンス改善に挑んだ実体験をもとにお話しします。
当時の私はコード理解が浅いまま、コーディングエージェントを活用して開発を進める中で、“それっぽい最適化”によって逆に性能を悪化させる失敗を何度も繰り返しました。

本発表では、
・コーディングエージェント利用下で起きたパフォーマンス改善のしくじり
・Chrome DevTools Performance タブを使ったボトルネック特定方法
・改善前後の具体的な変化
を、実例を交えながら紹介します。

勘や雰囲気ではなく、観測に基づいて進めるフロントエンドパフォーマンス改善の考え方と手順を持ち帰れるセッションです。

私の関わるプロジェクトでは独自PHPフレームワークを長年運用しています。
ここにClaude Codeを導入しましたが、想定ほどチームに広がりませんでした。

理由はいくつかあり、独自PHPフレームワーク特有の前提が伝わりにくく、提案されるコードが期待とズレる場面があったこと。
加えて、そもそも「どう使うのが良いのか分からない」というメンバーが一定数いたことも影響しました。

そこでAIコーディングツールの定着に向けてフォロー体制を整備しました。
主に、利用状況の見える化や、意見箱の設置による改善サイクルを回す工夫、
独自フレームワーク前提でも使いやすいようにClaude Codeの設定やコマンドも整備などです。
こうした泥臭い取り組みを続けた結果、利用率は改善し、開発生産性への影響も見られるようになりました。

このLTでは、
・前提が強い環境でAIコーディングが馴染まなかった理由
・定着させるために現場で回したフォローのやり方と判断のコツ
・Claude Codeを現場向けに使いやすくする最適化の工夫
を共有します。

特に、活用にチーム内の温度差がある状況をどう扱ったかを中心に話す予定です。

いまや、フロントエンド開発に欠かせなくなったJSX (TSX)。
これが、実際にどのようにして解釈・実行されているか、説明できるでしょうか？
本発表では、非常に単純なJSXランタイムの実装例を取り上げて、その構造と、応用幅について紹介します。
また、発表者が直近自作JSXランタイムをTypeScriptと合わせて使った際に、JSX (TSX) の式を評価した結果の型の表現力に感じた限界について説明します。

取り上げる予定のもの

• 自作JSXランタイム
• React
• hyperscript
• jsx-slack

皆さん、勉強会はお好きですよね？

というわけで、コロナ禍以降に開催された 約15,000件の connpass イベントのデータ を集め、
人口統計データなどとあわせて、開催地域・開催日・参加者数・テーマなどを幅広く分析しました。

このLTでは、そのデータを使った 勉強会クイズ に挑戦してもらいます。

• 勉強会が盛んなのはどこの都道府県？
• 北海道の勉強会は他の地域と比べてどう違う？
• PHP系/フロントエンド系勉強会の〇〇とは？

みんなでワイワイしながら、直感で答えられる参加型クイズ。
最も勉強会を分かっている「勉強会王」を決定します！
優勝者には何か良いことがあるかも…！？

2022年のGitHub Copilotの誕生、2025年のClaude Codeの定額使用可能などを通じて、今日ではAIを活用してコーディングを行うことが常識となってきています。そのなかで、「どのように新しいプログラミング言語を習得するのか？」という課題が出てきているように思います。

さて、Claude Codeの /config より「Output style」をみると、
「Learning：（訳 - Claudeが適宜立ち止まって、ハンズオン練習用の短いコードを書くよう求めてきます）」
という設定が存在します．

プログラミング言語を学ぶための方法として、「本」、「公式ドキュメント」、「チュートリアル」、「学習プラットフォーム」などが挙げられます。しかし、そこにAIツールも入るのではないか？
本LTでは、PHP 初学者である私自身が、AI ツールを用いて学習した経験についてお話しします。

▼ 話すこと
・Claude CodeのOutput Style 「Learning」の動作
・どのような内容を学ぶことができるのか
・どのような内容が不足するのか

Qwikは公式で「Qwik is the first open-source O(1) framework.」と謳っています。
なぜそんなことが可能なのか？ その鍵となる技術であるResumabilityの内部構造をざっくり押さえつつ、 従来のHydrationとの違いを交えながら5分で解説します。
Qwikの仕組みをなんとなく掴める5分にします。

■ 対象者

• Qwikを全く知らない方
• Qwikを知っているものの、具体的な仕組み（Resumability）までは知らない方
• 「O(1)を支える仕組み」に技術的な興味がある方

なんかまだまだVue/Nuxtの印象が悪そうな投稿を多々見ます！！！
たしかに、Vue2/Nuxt2から移行大変だったよね。わかります。
ただ、2026年にもなり、あの時とはだいぶ変わりました。にもかかわらず、好きな技術が認識違う発言をされると悲しくなりますし、その印象だけで評価するのはもったいないなーとも思います。

個人的にはReactもVue.jsもNext.jsもNuxtもみんな違ってみんな良いんですが、本LTは2026年時点のNuxtをざっと話し、今あえてNuxtを選ぶ理由を語りたいと思います。

2021年からNuxt2を触り始めて、移行のツラミ〜Nuxtの変化をみてきた僕から、当時からだいぶ変わったNuxtの魅力をさっと伝えられたら幸いです。

LaravelではRequestクラスを使うことで、バリデーションや前処理を意識せずに実装を進められる場面が多くあります。

一方、React Nativeの開発に関わり、TypeScriptで同じようにバリデーションを書こうとしたとき、「Requestのようなものがない」ことに戸惑いました。
厳密に書こうとすればするほど、フロントエンド側のコードが複雑になっていったのが正直な感想です。

そこで立ち止まり、「フロントエンドでそこまで厳密なバリデーションが本当に必要なのか？」を考え直しました。
そして、入力中のユーザー体験を良くするための制御や、無駄なリクエストを防ぐための制御と、仕様としての正しさを保証するバリデーションは、役割が異なると整理しました。

本LTでは、次にバリデーションを書く場面で「これはフロントで止めるべきか、それともAPIに任せるべきか」を判断するための視点を持ち帰ってもらうことを目指します。

WebSocketやSSEはステートフルな接続です。一度確立するとサーバー側に状態が残り続けるため、切断や再接続の制御が難しくなります。
本セッションでは、配信画面デザインツールにおけるストリーミングコメントのリアルタイム表示機能を題材に、SSEとWebSocketをイベント駆動で管理する設計を紹介します。
SSE接続の有無を起点にWebSocketを制御し、再接続の判断はクライアントに委ねる。このシンプルなルールで、実際の利用状況と整合した接続管理を実現する方法をお話しします。

未知なる規模のサービス構築・運用と向き合っていく方はおりますか？
ぼくは今年おそらくこれです。

本LTでは、自分がPHPを出発点にインフラ・クラウドへと領域を広げていったこの十数年を振り返りながら、フルサイクルを志向するエンジニアとして“守備範囲”をどう拡張してきたかをお話しします。

本LTを通じて思索の幅を広げ、これから向き合うサービス運用で足りていない備えを、一緒に考えるきっかけにできれば幸いです。

問: PHPの標準関数やクラスで扱える日時表現には、どんな形式があるかを知っていますか？

↓2025年6月6日に実行すると、全て同じ値になる例

date_default_timezone_set('Asia/Tokyo');
strtotime('now 00:00:00');
strtotime('today UTC - 9hours');
strtotime('midnight');
strtotime('noon - 12 hours');
strtotime('3 days ago 00:00:00 + 72 hour');
strtotime('Sat.');
strtotime('00:00');
strtotime('2026-06-26');
strtotime('06/06/26');
strtotime('2026-W23-6');
strtotime('2026.157');

答: たくさん！

そんな訳で、このLTでは、実際に使える日時表現を共有します。
php-srcにある構文定義ファイルとその解説を題材に、「日時、ちょっと分かる」を目指します。

大規模なWeb開発をチームごとに分割して進める「マイクロフロントエンド」。マイクロフロントエンドを実現するための技術「Module Federation」は、最新のNext.jsとは相性が悪く、導入が難しいという課題があります。

そこで今、Vercelが新たに提唱しているのが「Remote Components」です。

外部にあるコンポーネントを、まるでデータや画像のように必要な時にサッと読み込んで表示する新しい仕組みです。「Module Federation」のような複雑な設定は不要で、Next.jsの最新機能を活かしたまま、チームごとの自由な開発とデプロイを実現することができます。
本セッションでは、まだ正式リリース前のこの「remote components」について、解説します。

このセッションでは、PHPで作成したアプリケーションをVercelにデプロイする方法を紹介します。

Vercelはフロントエンド向けのプラットフォームという印象が強く、「VercelでPHP？」と意外に感じる方も多いかもしれません。しかし実は、構成を工夫することで PHPアプリケーションもVercel上で動かすことが可能 です。

本セッションでは、

• PHPアプリケーションをVercelで動かすための仕組み
• プロイまでの具体的な手順
• ハマりどころと実践的な構成例

を解説します。

さらに、Vercelが提供するマネージドデータベース Vercel Postgres にも触れ、PHP + PostgreSQL の構成でアプリケーションをVercel上に構築し、実際に公開する流れを紹介します。

フロントエンドエンジニアとPHPエンジニアのどちらにとっても、Vercel上にPHPアプリケーションを配置するための具体的な手順と構成を持ち帰れるセッションです。

90年代後半から2000年代前半頃、個人サイト全盛期の時代では、サイト上でMIDIファイルのBGMを再生する文化がありました。
しかし現代では、
・ユーザーの意図しないタイミングで音を鳴らすべきではない
・そもそも現在のブラウザにはembedタグによるMIDIの再生機能がない
という理由で、MIDIファイルが再生されるWebサイトを見かけることはほぼなくなりました。

ですが、やろうと思えばJavaScriptでMIDIの再生処理は実現可能です。
このLTでは、誰もが気になるJavaScriptによるMIDIファイルの再生方法についてお伝えします！