株式会社GIGのSales事業部でプロダクトエンジニアをしているちいかた（片田）です！

みなさん、「Hono」を使っていますか？

フロントエンドにTypeScriptを採用する事例が増えている昨今、「バックエンドもTypeScriptで書いて開発体験を統一したい」という要望をもつエンジニアの方も多いのではないでしょうか？

そんなニーズに応えるのが、国産のNode.jsフレームワーク「Hono」です。しかもHonoは、Cloudflare WorkersやDeno、Bunなど、複数のJavaScriptランタイムでも動作するので、かなり柔軟に使えます。

個人的に開発しているプロダクトでもReact Router v7と組み合わせてHonoを使っているんですが、フロントエンドと同じようにTypeScriptで書けて、何よりもRPC機能が便利で、開発体験がよすぎて最高です。

また、Honoには標準のミドルウェアパッケージも豊富に存在し、たとえばbasic認証などは数行のコードで簡単に実装できます。

今回の記事では、業務でも個人開発でもHonoを使い倒している私ちいかたが、Honoを使ってbasic認証付きのAPIを実装する方法をご紹介します。

Honoとは何か

Honoは、国産の軽量Node.jsフレームワークとして開発され、Cloudflare WorkersやDeno、Bunなどさまざまなランタイムで動作可能な点が大きな特徴です。

TypeScriptで開発されており、公式リポジトリも活発に更新されています。

・軽量・高パフォーマンスである
・TypeScript製で型定義もしっかりしている
・Cloudflare WorkersやDeno、Bunにも対応しており、マルチランタイムで利用できる
・RPC機能を使って開発できる

ReactやReact Router、Next.jsなど、フロントエンドでTypeScriptを使っているプロジェクトにもスムーズに導入できるため、フロントエンドとバックエンドの言語を統一しやすいのがメリットです。

フロントエンドとバックエンドの言語を統一するメリットデメリット

「フロントエンドもバックエンドも同じ言語で開発できた方が絶対楽でしょ！」と安直に考えてしまう自分がいますが、もちろんデメリットもあると感じているので、メリット・デメリットをそれぞれ羅列してみます。

メリット

・型の共有ができる
ドメインモデルやAPIの型定義など、フロントエンド・バックエンドで型を共有し型安全な開発ができます。

・学習コストや開発環境構築コストが下がる
フレームワークは違えど言語は同じなので、基本的な文法などの学習コストは下げられます。また、開発環境構築も言語が違うと地味に面倒なので、シンプルにすることでコストが下がります。

・エンジニアの採用がしやすい
TypeScriptが扱えるエンジニアを採用すれば、フロントエンドもバックエンドも開発できるので採用コストも抑えられます。

デメリット

・パフォーマンスがプロダクトの要件に満たない場合がある
GoやJavaなどWebのバックエンドに広く採用されている技術と比べるとパフォーマンスが劣るため、要件によってはTypeScriptが適さない場合があります。

・型なんていらない！というエンジニアにとっては型システムが不要

これらを踏まえても、個人的にはフロントエンドとバックエンドで型の共有ができるメリットが大きいので、今後も積極的にEnd-To-End TypeScriptを採用していきたいと考えています。

HonoのRPC機能を使えば、従来のOpenAPIの定義がなくても快適に開発できるので本当におすすめです！

RPC機能については、Honoの作者であるyusukebeさんがZennに「見よ、これがHonoのRPCだ」という記事を書いているのでぜひご覧ください。

Honoを使ってbasic認証付きのAPIを実装してみる

それではHonoを使ったbasic認証付きのAPIの実装がいかにシンプルで簡単か、実際に実装しながら体験してみましょう。

まずはプロジェクトの作成から。

$ mkdir hono-basic-auth
$ cd hono-basic-auth 
$ pnpm create hono@latest

ランタイムは一旦Cloudflare Workersを選択しておきました。

ryotakatada@katadaryota ~/t/hono-basic-auth> pnpm create hono@latest .
.../194b9eb3faf-f09                      |   +1 +
.../194b9eb3faf-f09                      | Progress: resolved 1, reused 0, downloaded 1, added 1, done
create-hono version 0.15.2
✔ Using target directory … .
? Which template do you want to use? cloudflare-workers
? Do you want to install project dependencies? yes
? Which package manager do you want to use? pnpm
✔ Cloning the template
✔ Installing project dependencies
🎉 Copied project files

生成された./src/index.tsxは下記のようになっています。

import { Hono } from 'hono'

const app = new Hono()

app.get('/', (c) => {
  return c.text('Hello Hono!')
})

export default app

下記コマンドでアプリケーションを起動して、動作確認してみましょう。

$ pnpm dev
$ curl -v http://localhost:8787

正常なレスポンスが返却されていました！

* Host localhost:8787 was resolved.
* IPv6: ::1
* IPv4: 127.0.0.1
*   Trying [::1]:8787...
* Connected to localhost (::1) port 8787
> GET / HTTP/1.1
> Host: localhost:8787
> User-Agent: curl/8.7.1
> Accept: */*
>
* Request completely sent off
< HTTP/1.1 200 OK
< Content-Length: 11
< Content-Type: text/plain;charset=UTF-8
<
* Connection #0 to host localhost left intact
Hello Hono!

次は、本題のbasic認証を実装していきます。

src/index.tsxにhono/basic-authパッケージを追加し、ミドルウェアを実装しました。

import { Hono } from "hono";
import { basicAuth } from "hono/basic-auth";

const app = new Hono();

app.use(
    "*",
    basicAuth({
        username: "user",
        password: "secret",
    }),
);

app.get("/", (c) => {
    return c.text("Hello Hono!");
});

export default app;

簡単に解説すると、すべてのRouteに対してbasic認証をかけるようなミドルウェアを実装しています。

ユーザーネーム: user, パスワード: secretで認証をパスできます。

実際にリクエストを送信してみると、未認証の状態だと下記のようなレスポンスが返却されます。

ryotakatada@katadaryota ~/t/hono-basic-auth> curl -v http://localhost:8787
* Host localhost:8787 was resolved.
* IPv6: ::1
* IPv4: 127.0.0.1
*   Trying [::1]:8787...
* Connected to localhost (::1) port 8787
> GET / HTTP/1.1
> Host: localhost:8787
> User-Agent: curl/8.7.1
> Accept: */*
>
* Request completely sent off
< HTTP/1.1 401 Unauthorized
< Content-Length: 12
< Content-Type: text/plain;charset=UTF-8
< WWW-Authenticate: Basic realm="Secure Area"
<
* Connection #0 to host localhost left intact
Unauthorized

きちんと401（Unauthorized）レスポンスが返却されていますね！

usernameとpasswordを渡すようにしてあげると、下記のようなレスポンスになりました！

ryotakatada@katadaryota ~/t/hono-basic-auth [3]> curl -v -u user:secret http://localhost:8787
* Host localhost:8787 was resolved.
* IPv6: ::1
* IPv4: 127.0.0.1
*   Trying [::1]:8787...
* Connected to localhost (::1) port 8787
* Server auth using Basic with user 'user'
> GET / HTTP/1.1
> Host: localhost:8787
> Authorization: Basic dXNlcjpzZWNyZXQ=
> User-Agent: curl/8.7.1
> Accept: */*
>
* Request completely sent off
< HTTP/1.1 200 OK
< Content-Length: 11
< Content-Type: text/plain;charset=UTF-8
<
* Connection #0 to host localhost left intact
Hello Hono!

ほんの数行でbasic認証実装できちゃいましたね！

とても簡単ですが、Admin画面に認証機能をかけるくらいであればこの実装でも十分かもしれません。

おわりに

Honoを使えば、最小工数でTypeScript製のバックエンドを構築できます。 

フロントエンドとバックエンドをTypeScriptで統一することで、チームのスキルセットを合わせやすくなり、採用面や長期的な保守運用コストの削減にもつながります。 

さらにHonoはOSSとして活発に開発が行われており、とくに日本人コミッターが多いことから国内コミュニティでも継続的な情報交換が可能です。 

今後も機能追加が期待できるので、ぜひみなさんも一度試してみてはいかがでしょうか。

◇

株式会社GIGは、ナショナルクライアントからスタートアップまで、Webコンサルティング、UI/UXデザイン、システム開発など、DX支援をおこなうデジタルコンサルティング企業です。また、50,000人以上が登録するフリーランス・副業向けマッチングサービス『Workship』や、7,000人以上が登録するデザイナー特化エージェントサービス『クロスデザイナー』、リード獲得に必要な機能を備えたCMS『LeadGrid』、UXコンサルティングサービス『UX Design Lab』などを展開しています。

WebやDX支援のご相談はいつでもご連絡ください。

パフォーマンスや開発効率に優れたモダンスタックを使用したシステム開発も承っております。

Web制作/Webマーケティングに関するご相談・ご依頼はこちら
会社紹介資料のダウンロードはこちら

また、株式会社GIGでは一緒に働くメンバーも募集中です！技術が好きなエンジニアも多く、モダンな技術に関しても常に情報交換しながら切磋琢磨しています。挑戦したいことにはどんどん挑戦できる環境なので、LeadGridの開発に少しでもご興味を持っていただいた方は、ぜひカジュアル面談でお話しましょう。

採用応募はこちら（GIG採用サイト）
採用応募はこちら（Wantedly）

片田 凌太

1997年10月生まれ。自動車のコネクティッドサービス開発や日本最大のコーヒーサブスクリプションサービス開発などの経験を経て2023年10月に株式会社GIGに入社。現在は、Webサイト制作からコンテンツSEO、問い合わせ管理、LP制作などWebマーケティングに必要な機能をもったCMS『LeadGrid』の開発チームに所属。