<h2 id="h8d027c8ed3">はじめに</h2><p>昨日、Honoの作者のyusukebeさんのXにてhono-remix-adapterのリリース告知がありました！</p><p><a href="https://x.com/yusukebe/status/1832372692399296711">https://x.com/yusukebe/status/1832372692399296711</a></p><p>hono-remix-adapterのリポジトリはこちらです。</p><p><a href="https://github.com/yusukebe/hono-remix-adapter">https://github.com/yusukebe/hono-remix-adapter</a></p><p>私自身も何度かRemixのAdapterにHonoを使おうとして、yusukebeさんのサンプルリポジトリを読んだり、他にも情報収集をしたりしながら構築していたんですが、今回発表されたhono-remix-adapterを使うと本当に一瞬でRemixのサーバーサイドをHonoに置き換えることができました…！</p><p>簡単すぎて説明することはほぼないんですが、今回の記事ではRemixアプリケーションにhono-remix-adapterをインストールして、サーバーサイドをHonoで動かせるようにする方法を解説します！</p><h2 id="h878a9e501f">hono-remix-adapterを使ってRemixのサーバーサイドをHonoに置き換える方法</h2><p>所要時間は3分です。早速Remix and Honoしていきましょう！</p><p>手順はhono-remix-adapterの公式リポジトリのREADMEに沿っていますので、もし当記事の情報が古くなっている場合は公式リポジトリを参照してください。</p><h3 id="h58a6675258">パッケージのインストール</h3><div data-filename="terminal"><pre><code class="language-shell">npm i hono-remix-adapter hono @remix-run/react</code></pre></div><h3 id="hb1bf9e4756">サーバーサイドのエントリをHonoに置き換える</h3><p><code>app/entry.server.ts</code>を下記のように書き換えるだけでOKです。</p><div data-filename="app/entry.server.ts"><pre><code class="language-typescript">import { Hono } from &apos;hono&apos; import { handle } from &apos;hono-remix-adapter&apos; const app = new Hono() app.use(async (c, next) =&gt; { await next() c.header(&apos;X-Powered-By&apos;, &apos;Remix and Hono&apos;) }) export default handle(app)</code></pre></div><h3 id="hbfbd8693f1">レスポンスヘッダを確認してRemixのサーバーサイドでHonoが動いているか確認する</h3><p>Developer Toolsから通信ログを確認してみましょう。</p><p>サーバーからの応答時にX-Powered-Byヘッダーが追加されています！無事にHonoがRemixのAdapterとして動作しているようです。</p><figure><img src="https://images.microcms-assets.io/assets/0b9c56e585404b659842183a9dfaf05a/86ac696783c04c7bb6b2ee284946a95f/WebP%20conversion%20response.webp" alt="" width="330" height="180"></figure><h2 id="hbfc3eea3a3">RemixのサーバーサイドにHonoを使いたい理由</h2><p>これに関しては過去の記事で触れているので、興味があればご覧ください。</p><p><a href="https://www.kissa-katada.com/technology/5il5omikbw">https://www.kissa-katada.com/technology/5il5omikbw</a></p><p>簡単にまとめると、</p><ul><li>ルーティングがHonoによって高速化する</li><li>実行環境を選ばずに使うことができる</li><li>Honoの組み込みのミドルウェアを使うことができる</li><li>エッジコンピューティングに最適化されているため、Cloudflareなど容量が限られた環境でも使える</li></ul><p>などなどあります。</p><p>今私が個人的に作っているプロダクトだと、ユーザーの属性によってアクセスできるページを切り分ける必要があるため、Honoのパフォーマンス面での恩恵を受けつつ、認可系のミドルウェアを実装してアクセス制御していこうかと考えています。</p><h2 id="h73b74e50eb">Honoの組み込みミドルウェアを使ってみる</h2><p>RemixのAdapterにHonoを使うと、Honoの組み込みミドルウェアを簡単にRemixアプリケーションに導入することができます。</p><p>ミドルウェアはたくさんあって、公式の<code>src/middleware</code>や<code>honojs/middleware</code>リポジトリを見てみるといろいろあって楽しいです。</p><p>今回はその中でもhono-remix-adapterのREADMEでも紹介されている、<code>hono/basic-auth</code>を使いつつ、認可されたユーザーのみアクセスできるルートを定義していきましょう。</p><div data-filename="app/entry.server.ts"><pre><code class="language-typescript">import { handle } from &apos;hono-remix-adapter&apos; import { Hono } from &apos;hono&apos; import { basicAuth } from &apos;hono/basic-auth&apos; const app = new Hono() app.use(async (c, next) =&gt; { await next() c.header(&apos;X-Powered-By&apos;, &apos;Remix and Hono&apos;) }) app.use( &apos;/admin/*&apos;, basicAuth({ username: &apos;admin&apos;, password: &apos;pass&apos;, }) ) export default handle(app)</code></pre></div><p>今回のサンプルではユーザーネームとパスワードをベタ書きしているため、常に<code>/admin/*</code>にアクセスできる状態ですが、動的にデータを取得して検証すれば実用的な認可ミドルウェアを実装することが可能です。</p><p>欲しい機能がシンプルに実装できるのはHonoの良いところですね！</p><p>他にもHonoの公式ドキュメントに組み込みのミドルウェアが紹介されています。</p><p><a href="https://hono.dev/docs/middleware/builtin/basic-auth">https://hono.dev/docs/middleware/builtin/basic-auth</a></p><h2 id="h9be0c3393d">おわりに</h2><p>hono-remix-adapterパッケージを使うと本当に簡単にRemix and Honoができて感動です…！</p><p>過去にhono-remix-adapterを使わずにRemix and Honoした時の記事もあるので、よかったら覗いてみてください。</p><p><a href="https://www.kissa-katada.com/technology/5meuyt7mb2t">https://www.kissa-katada.com/technology/5meuyt7mb2t</a></p>