カテゴリー
コンピューター 文化

🤝 フロントエンド・PHPカンファレンス北海道2026@6/6開催 感想 #frontend_phpcon_do

🤝 フロントエンド・PHPカンファレンス北海道2026@6/6開催 感想 frontend_phpcon_do

💡 本投稿は全部人間が手で書きました。

リンクまとめ・はじめに

10年ぶりくらいにこういったカンファレンスに参加したので、熱も冷めやらぬうちに、聴きながらメモしたことを投稿しておきます。自分のための思い出。大した内容はないよ。

Nginxになりきって、FCGIでPHPと喋ろう

PHP とウェブサーバーがどうやってやりとりして動いているか、そういえばよく知らない。

Webサーバの役割

  • 複数捌く
  • httpsセキュリティ
  • 静的ファイル扱う ↓ 分業。DBやりとりや動的動作がPHP

CGI。でた、謎のやつ。 Common Gateway Interface。 Webサーバから動的コンテンツを返すためのインターフェース その上位版が FastCGI PHP-FPM = PHP FastCGI Prosess Manager Webサーバ <–> PHP-FPM <–> PHP

PHP で CGI を実装。デモ

じゃなかった。Nginx Modokiを作って PHP-FPM に投げるデモだった。 ウェブサーバーの実装デモだった。

最近のPHP

RoaadRunner, FrankePHP、プロセスだけでなくアプリケーションの状態も引き継ぐ、狙い。 FrankePHP は公式に近いので気になっている、ここ２、３年。 FrankePHP は PHP のランタイム不要。速い。

感想

Nginx Modoki 面白かった。次は PHP-FPM Modoki が見たい。 おすすめ資料、Nginx Apache 必要？、は自分の抱えていた興味を前進させるものになるかも。こちらも読みたい。 FastCGIはメンテされなったのか、、、歴史の終わり？

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

趣味にいい。プロトコルは仕様が決まっている、答えがわかっている。これはいい着眼。

ルーターに必要なもの。 宛先読み取り、ルーティング決定、Macアドレス書き換え。

感想

難しかった。ルーターについて、いかに自分が知らんということがわかった。多分ルーターについて理解できれば、やっていることは自分でもできるのかも、と思わせてくれた内容だった。 「もっとできるはず」からのアプローチ、xdebug で探っていく入り口が参考になった。

あえてPHPでリアルタイム通信をやってみる

PHP はリアルタイム通信ができない、わけではない。苦手ではあるのか？ リアルタイム通信、 WebSocket, WebRTC, etc…

WebSocket relay を実装。 TS, Go と比べて遜色なし？なんで？ PHPの強み、短命。 一方、リアルタイム通信は、長命のコネクション。 だから、PHPと相性が悪いはず。 単一プロセスでPHPを動かさないようにすればどうなる？ PHP はリクエスト -> レスポンス、で子プロセスが解放される。 Websocket は子プロセス解放しない。 複数リクエストがリアルタイム通信を使おうとするとやっぱり性能悪い、後続接続が待たされる。 改善。 シングルから、キューを挟ませた。設計変えることで改善した。 ↓ 常駐サーバと設計を考えるのが鍵？

感想

こういう弱そうなところをやってみるチャレンジ大好き。面白い。

「嘘をつくテスト」の失敗例から学ぶ 良いテストコード

テストダブル

使いすぎて破滅。

テストは何のため

仕様を表現可能 コードレビューが楽 退行への保護

感想

私はテスト可能にするために設計を考えるっていう思考をよくする。 Sebastian と同じところに皆、行き着くのかもしれないなと思った、どうだろう。 全体がぼやっっと一つの関心ごとになってしまうみたいな発言があったと思うが、腑に落ちた感がある。

AI時代のWebセキュリティリスク x レビュワーを救いたい / VAddy 様

AIでコード生成したセキュリティ担保はどうしてる？ -> 何もしてない。 AI優秀、レビュー追いつかない。 ここら辺は改善できそう、掘り下げ。

レビュワーつらいは、積み重なりの負のシナジー レビューとは？コードに問題がないかを確認。 PRを出す時は、レビュワーの気持ちを考えましょう。 まずツールで対応

  • SCA ソフトウェア構成分析
  • SAST 静的けキュリティテスト
  • DAST 動的セキュリティテスト

感想

LLMの仕組みの基礎から押さえているのがとても嬉しかった。わかりやすかった。

PHP と TypeScript の型システム比較：AI 時代の「型」は誰のためにあるのか？

言語の動的 vs 静的

この2つだけでなく、さらにこれらの中に種類があり、それらが組み合わされる。言われてみればそうだが、考えてみたことがなかった。すごくよく整理されていてすごい。勉強になる。

  • 型付け 弱い強い
  • 検査タイミング 実行時、トランスパイル
  • 互換性モデル
  • 実行時の型情報

近年のPHPの型

strict モード、NULL許容型などの型

実行されにくいPHP <- 静的解析？ 出荷されにくいTypeScript <- ビルドエラー

誰のためにある？

読み手のためにあると考える。 -> コンテキスト情報が付与され理解が促進 読み手とは？ 人間 & AI & コンパイラ

これからのPHP

型システム強化 型を書く方がメリットに 総称型(ジェネリクス) 実現？

感想

型推論の駆使が書き手の負荷を減らしていたこれまでから、型の明示で読み手の負荷を減らすことを重視するべき。 なるほど、興味深い。

AI時代のUIはどこへ行く？その2！

生成AI -> チャット それ以前は、Google 検索。UI なくなる？いや、無くならない。 ３パターン考えた。 AIがUIを受け取るパターン MCP-UI チャットの解答欄に別のHTMLが出る感じ。 ここまでが前回、その1。

ここから、今回。 ChatGPT 回答に、UIが出出した。写真や地図とか。 UI付アプリが出てきた。 MCP Apps で実装されている、ChatGPT回答内に ZOZO の商品が出るとか。

MCP App だけではない、 Generative UI は。

MCP App, A2UI, etc… 設計パターン3つ

  1. Static 固定化されたレイアウトに変数値を入れる。 スケルトンローダー表示できる。体感的に大事。 回答早い ツールコール
  2. Declarative レイアウト数種類からAIが判断 レイアウトの順番もAIが判断 制約があるが表現力が想像以上にある。 JSON UI ツリー
  3. Open-Ended 自由。生成AIがHTMLを生成する。 回答遅い HTML 3.5. Dynamic (本日提案) 生成AIによるReact(JSX) -> DynamicWorker SSR -> 返す。 非同期と suspens が使える。

感想

全然知らない世界が見れた。とても嬉しい。ワクワクした。

React、まだ楽しくて草

Async React WG

Async React を普及するワーキンググループ(WG)

  • ルート移動はトランジションにしろ
  • useTransition ViewTransition 使え、UX良くなる
  • 宣言的UIが次の段階へ
  • AIはAsync React 使ってくれない。親和性が低い。
  • Susupenseとトランジションを使うだけでユーザーの上位3割に入れるぞ。
    • より宣言的なコード
    • UXと保守性の両立

React の深み深淵を想像

依存配列のない世界のコードが、Reacct が目指していた React のコードなのだろう。

感想

React 使ったこと全くなかったが、界隈の中の人たちの期待やジレンマが知れてとても興味深かった。 React すごいな！ StrictMode で将来のバージョンで問題になる挙動も見れるのか、なかなか聞いたことないぞ。すごく興味深かった。 React の深み深淵を想像している姿が楽しそうなのが発表から滲み出てて草(褒め)

TipTapと向き合いつつ考えるRTEとコンテンツモデル / デザインスポンサーセッション

RTE = リッチテキストエディタ

CMS, note.com WordPress

スタイリングをリッチ Wysiwygエディタ, アウトラインエディタ

TipTap / ProseMirror

ProseMirror は直接HTMLを編集しない。 ProseMirror -> HTML, JSON といった具合。 Transactionベースの編集モデル。最新の状態 = 最初 + 変更 + 変更 +… -> undo/redo を可能に

ユーザーの成果物とRTEドキュメントの関係性

ユーザーは必ずしもRTEの結果を成果物にしたいわけではない。 構造的な課題 見出しレベルの整合性が保てない、など。つまり、ページの見出しのフォームが別にあるのに、RTEに H1 を入れてしまうとか。

パターン

  • 汎用ドキュメントモデル Google Docs, Notion
  • HTMLドキュメントモデル WordPress
  • 独自コンテンツモデル

感想

導入はしやすいけど、最終的にどうしたいかが大事、整合性を保つために、に最後につながっていく、聞いていて腑に落ちたよい話だった。

そのバリデーション、フロントでやる必要ありますか？ 〜Laravel Requestに慣れた私が立ち止まった話〜

  • 06/06 (土) 17:05 〜 17:10
  • そのバリデーション、フロントでやる必要ありますか？ 〜Laravel Requestに慣れた私が立ち止まった話〜
  • guppe

UX/体験の補助としてはあり。 フロントで、絵文字弾くとか。 バックエンドだけで管理できる、メリットあり。

ページ内で部分的に始めるReact導入

  • LT（5分) 06/06 17:10 カケハシ(小ホール)
  • ページ内で部分的に始めるReact導入
  • すばる

フォームの一部だけ複雑になってきた。 -> React で書きたい。ページ全部Reactにすれば？ やだ。コスト高い。一部だけ変えたい。 できる。 が、JSX欲しいとか、ビルドがしたい。考えることが増える。コストやっぱり高い。 Astro に面倒を見させるのだ。

Smarty から React に値を渡すには、 JSON を渡す。

Build 成果物を head に入れるには、 manifest で解決。

https://x.com/KentarouTakeda/status/2063174048486748473?s=20

ビルド成果物のサーバ側での解決ヘルパ、これはlaravel-vite-pluginでもやってるやつ

Web IDLって知ってる？

  • LT（5分) 06/06 17:15 カケハシ(小ホール)
  • Web IDLって知ってる？
  • infixer

WebAPI -> MDN

Web IDL

初めて知った。

TypeScript の型がない場合は、Web IDLの定義を見に行こう！

作って学ぶ、 JSX (TSX) ランタイムの基本

  • LT（5分) 06/06 17:20 カケハシ(小ホール)
  • 作って学ぶ、 JSX (TSX) ランタイムの基本
  • syumai

JSX 普段全く書かないからこういう時に触れてくれたのは嬉しい。 h 関数？ Vue.js ではと思ったらその話も出てきた。React は知らないが Vue.js は知っているので、少し React に踏み込めた感じがして嬉しかった。

実践！春の上川空知駆動開発〜旭川・東川・美瑛・上富良野・富良野・芦別・赤平・滝川・深川編

  • LT（5分) 06/06 17:25 カケハシ(小ホール)
  • 実践！春の上川空知駆動開発〜旭川・東川・美瑛・上富良野・富良野・芦別・赤平・滝川・深川編
  • 西原 翔太

水辺は喉に優しい、嬉しい。 pasokata パソカタ、というパワワード

「👍」と「👎」の押しミスに震えない世界を作りませんか?

  • LT（5分) 06/06 17:30 カケハシ(小ホール)
  • 「👍」と「👎」の押しミスに震えない世界を作りませんか?
  • しゅんそく

Google Meet は左から右に向かってGood、Badになる。 絵文字は意味ごとに並んでると嬉しい。 ユーザーはそんなにたくさんの種類の絵文字を使わない。 同意。

PHPで使える日時の表現と、その知り方

  • LT（5分) 06/06 17:35 カケハシ(小ホール)
  • PHPで使える日時の表現と、その知り方
  • きんじょうひでき

Podcast の落ち着いたペースじゃなくて、早口が聞けて嬉しい。 そして組み立てがPodcast で言われていた (と思う) 通りすごく上手で羨ましい。

Google Chrome の開発者ツールで C# コードをデバッグできるって知ってました?

  • LT（5分) 06/06 17:40 カケハシ(小ホール)
  • Google Chrome の開発者ツールで C# コードをデバッグできるって知ってました?
  • 坂本 純一

C# Blazor WebAssenbly ブラウザでブレークポイントで停止！？新しい世界の扉が開く音がしました。 ニッチではある。

あえて今、ブラウザ上でMIDIファイルを再生したい

  • LT（5分) 06/06 17:45 カケハシ(小ホール)
  • あえて今、ブラウザ上でMIDIファイルを再生したい
  • DE-TEIU

懐かしい。とてもよかった。Web Audio API という新たな知識を得た、やったぜ、ありがとうございます。

クロージング

  • 運営 06/06 18:25 カケハシ(小ホール)
  • クロージング
  • ことみん

朝オープニングで感じた予感通り、よいカンファレンスだった。

おわりに

自分が最も印象的だったのは、 AI時代のUIはどこへ行く？その2！ by Yusuke Wada | トーク | フロントエンド・PHPカンファレンス北海道2026 #frontend_phpcon_do – fortee.jp で、AIチャットのAI回答の部分に自分のコンテンツを入れることができる、それはいくつか種類があり、AIと協調させながら入れさせることができる、というもので、これから少し先のコンテンツ作りはこうなっていくのかも、と強く思わせる内容だった。

カンファレンスからしか得られない栄養がある、誰がいった言葉だったか、そんな言葉があったと思うが、そう思う。元気になった。また行きたいです。

以上です。

コメントを残す