トーク

わたしはhono/ssgの提案者です。とはいえ色々あって最近のHonoにキャッチアップできておらず、久しぶりにみたところ残課題のplugin機能が実装されていたのだった… このトークは一応SSGを実装した一人が、いちユーザーとしての新鮮な気持ちを持ってhono/ssgをキャッチアップしていくための最新の知識を紹介します。

サービス間通信を実装する上で、スキーマを定義し何らかの方法で表現されているとスムーズに開発を進めることができます。言語に依存しないスキーマ表現方法としてOpenAPIがあります。

Next.jsはReactを用いたWebアプリケーションを作成するのに便利なフレームワークです。Next.jsはHTTP APIを提供する仕組みとしてRoute Handlersを提供しています。しかしながらRoute Handlersをそのまま用いてもAPIのスキーマを生成することはできません。Next.jsで提供しているHTTP APIのスキーマを別アプリケーションから参照したいときにこれでは不便です。

ところでhono/vercelを用いることによりNext.js Route HandlersでもHonoを使うことができます。
そしてhono-openapiと@hono/valibot-validatorを用いることによりHonoで提供するAPIのスキーマをOpenAPI形式で出力することができます。
さらに副次的な効果として、Honoならではの型や豊富なエコシステムによる支援を受けることができます。

このようにして我々はHTTP APIのスキーマを手に入れることができました。

このトークでは実際に以下の内容について話します。

• コードファーストでOpenAPIスキーマを生成するためのアプローチ
• Next.js Route HandlerからHonoへの段階的な移行

講談社「現代ビジネス」では、全ページをHonoによるMPA (Multi-Page Application) で提供しています。本セッションでは、大規模メディアでのHono実運用の設計指針、Next.jsからの移行理由とプロセス、そこで直面した課題や解決の工夫を紹介します。

特に hono/jsx および hono/jsx/dom (Client Components) を利用して必要な箇所のみクライアントで動的に動作させるHydrationを取り上げます。いわゆるIsland Architectureを採用しており、Honoでの実例は珍しいのではないでしょうか。またなぜこれを採用したか、React / Preactなど他のライブラリと比較して説明します。

さらに、Next.js App Routerからの移行について、RSC (React Server Components) など特徴的な機能をどう移行したか、Reactで書かれたcomponentをHono JSXの互換性を活かして再利用する方法も紹介します。

またNextのようなファイルベースでのルーティングの実装、JS/CSSアセットのビルドと配信、Viteの採用可否など、フレームワークをプロダクトに合わせて構築していく実践知を共有します。

Honoの利用やNext.jsからの移行を検討する方へ参考になる情報をお届けします。

このトークでは、チーム開発における Hono と @hono/zod-openapi を活用したスキーマ駆動開発の具体的プラクティスを紹介します。私は現在、この構成を採用したプロジェクトに二つ参加しています。

ひとつ目のプロジェクトでは、フロントエンドとバックエンドの双方が TypeScript で実装され、いずれも Hono を利用しています。スキーマ定義は共有資産として扱われており、Hono が提供する RPC 機能を活用することで、HTTP レベルの詳細を意識せず型安全な関数呼び出しのように API を利用できる仕組みを整えています。

もうひとつのプロジェクトでは、フロントエンドは TypeScript、バックエンドは Kotlin で実装されています。現状スキーマはフロントエンドに置かれていますが、将来的には共有資産へ移行が検討されています。スキーマに基づいたレスポンス検証をフロントエンドに組み込むことで、バックエンドの実装とスキーマが乖離している場合に不整合を早期に検知できるようになっています。

両プロジェクトに共通するのは、フロントエンドがスキーマを基にモックを手動実装している点です。これによりバックエンドの進捗に依存せず開発を進められるほか、動的なレスポンスも柔軟に再現可能になっています。

これらの事例を通じて、スキーマをどのチームが所有すべきかという組織的な判断だけでなく、フロントエンド主体でモックを整備することによる独立性の確保、Hono の RPC 機能を活用した効率的な開発プロセスの実現、さらにスキーマとレスポンスの整合性検証による品質担保といった実践的な知見を共有します。

このトークを通じて、参加者が自身の開発現場において Hono を用いたスキーマ駆動開発をどう適用できるかを判断するための視点を持ち帰っていただければと思います。

「2ちゃんねる」に代表されるスレッドフロート型掲示板は、日本のインターネット文化の象徴です。本トークでは、「ゼロちゃんねるプラス」を参考に、この伝統的な掲示板をHono, Bun, Cloudflare Workersといった令和の最新技術スタックで再構築した個人開発プロジェクト「VakKarma」についてお話しします。

開発の核としたのは、型安全性の徹底的な追求です。フロントエンドからバックエンド、データベースアクセスに至るまで、一貫して型安全な開発体験を目指しました。
UI構築には、Honoベースのメタフレームワーク「HonoX」を採用。JSXを用いてReactのような開発体験で型安全なHTMLを構築できる点が大きな魅力です。これにより、従来のテンプレートエンジンが抱える型情報の喪失といった課題を解決しました。
データベース操作には、ESLintプラグイン「SafeQL」を導入。SQLクエリを静的に解析し型情報を生成、タイプミスや型の不一致をコーディング中に検出することで、実行時エラーのリスクを大幅に低減させました。

アーキテクチャはドメイン駆動設計（DDD）を意識し、ドメイン層・ユースケース層・リポジトリ層に分割。堅牢で保守性の高いコードベースを構築しました。
また、専用ブラウザ（ChMate）からの接続もサポートし、JavaScriptを無効化した環境でも動作するよう、クライアントサイドのJSに依存しない設計を採用しています。デプロイ先の選択肢も複数対応しています。

このトークを通じて、HonoXを用いたモダンなWebアプリケーション開発の魅力と、型安全性を軸にしたシステム設計の実践的な知見を共有します。

Web地図界隈では古来より「地図タイル」という仕組みが存在します。
地図タイル配信のベストプラクティスは日進月歩で変化しており、かつてより遥かに低いコストで巨大な地図タイルを配信することが可能となっています。
タイル配信の最新のプラクティスをHonoと組み合わせることで、とても手軽に安いタイルサーバーを構築できます。本トークでは、地図タイルの理屈を簡単に紹介したうえで、AWSやCloudflareという基盤でHono製のタイルサーバーを構築・運用する手法を実際の事例を添えて紹介します。

アウトライン（予定）

1. 地図タイルの概要
2. Honoでタイルサーバーを実装する
3. AWS/Cloudflareにデプロイする
4. 事例紹介