Ask NugeyHonoとは？
# Cloudflare# Hono
目次
Hono🔥を知る
- Honoとは、
- JavaScriptでWebアプリを作るためのフレームワーク
- リポジトリ
- jsでバックエンドの開発するときに便利
- 似たフレームワークには・・・
- API開発などで使用できる
- Web標準API（Web Standard API）のみを使用している
- Hohoの実行環境（jsランタイム）
- Cloudflareに勤めている和田裕介さん（Twitter）が開発
- Cloudflareに勤める前から開発している（2021年12月15日〜）
- 「ただし、HonoはCloudflareのプロダクトではありません。僕が入社したことで、HonoもCloudflareの公式フレームワークに思えるかもしれませんが、そうではないのです。Honoはあくまでも僕を中心としたコントリビューターによるオープンソースのプロダクトです。」（引用：「Honoはあくまでオープンソースプロダクト」開発者でコントリビューターの私が会社員になった理由」）
- 「ボケて」の開発者でもある
- 2ヶ月で開発されたとのこと（ソース：「和田裕介（ボケて）×土屋泰洋：前編「ゆーすけべーの作り方」」）
- Hono開発者(和田さん)によるスライド
Honoの具体的なコード（Hono未使用コードと比較）
1. クエリパラメータを扱う
Hono使用:
// Honoをインポート
import { Hono } from 'hono'
// Honoアプリケーションを初期化
const app = new Hono()
// '/greet'エンドポイントにGETリクエストが来た場合の処理
app.get('/greet', (c) => {
// クエリパラメータ'name'を取得、なければ'World'をデフォルト値とする
const name = c.req.query('name') || 'World'
// レスポンスとしてテキストを返す
return c.text(`Hello, ${name}!`)
})
// アプリケーションを起動
app.fire()
図解:
[クライアント]
|
| (GET /greet?name=John)
v
[Honoアプリケーション]
|
| (クエリパラメータ解析)
v
[レスポンス生成]
|
| ("Hello, John!")
v
[クライアント (レスポンス受信)]
Hono未使用（Node.jsのみ）:
// HTTPモジュールをインポート
const http = require('http');
// URLモジュールをインポート
const url = require('url');
// HTTPサーバーを作成
const server = http.createServer((req, res) => {
// URLからクエリパラメータを解析
const queryObject = url.parse(req.url,true).query;
// 'name'クエリパラメータを取得、なければ'World'をデフォルト値とする
const name = queryObject.name || 'World';
// レスポンスヘッダを設定
res.writeHead(200, {'Content-Type': 'text/plain'});
// レスポンスボディを送信
res.end(`Hello, ${name}!`);
});
// サーバーをポート3000で起動
server.listen(3000);
図解:
[クライアント]
|
| (GET /greet?name=John)
v
[Node.js サーバー]
|
| (URL解析)
| (クエリパラメータ解析)
v
[レスポンス生成]
|
| ("Hello, John!")
v
[クライアント (レスポンス受信)]
2. JSONレスポンスを返すAPIエンドポイント
Hono使用:
// Honoをインポート
import { Hono } from 'hono'
// Honoアプリケーションを初期化
const app = new Hono()
// '/data'エンドポイントにGETリクエストが来た場合の処理
app.get('/data', (c) => {
// レスポンスとして返すデータ
const data = { message: 'Hello, World!', numbers: [1, 2, 3] }
// レスポンスとしてJSONを返す
return c.json(data)
})
// アプリケーションを起動
app.fire()
図解:
[クライアント]
|
| (GET /data)
v
[Honoアプリケーション]
|
| (JSONレスポンス生成)
v
[レスポンス送信]
|
| { "message": "Hello, World!", "numbers": [1, 2, 3] }
v
[クライアント (レスポンス受信)]
Hono未使用（Node.jsのみ）:
// HTTPモジュールをインポート
const http = require('http');
// HTTPサーバーを作成
const server = http
.createServer((req, res) => {
// レスポンスとして返すデータ
const data = { message: 'Hello, World!', numbers: [1, 2, 3] };
// レスポンスヘッダを設定
res.writeHead(200, {'Content-Type': 'application/json'});
// レスポンスボディとしてJSONを送信
res.end(JSON.stringify(data));
});
// サーバーをポート3000で起動
server.listen(3000);
図解:
[クライアント]
|
| (GET /data)
v
[Node.js サーバー]
|
| (JSONレスポンス生成)
v
[レスポンス送信]
|
| { "message": "Hello, World!", "numbers": [1, 2, 3] }
v
[クライアント (レスポンス受信)]
3. ミドルウェアを活用する
Hono使用:
// Honoと基本認証ミドルウェアをインポート
import { Hono } from 'hono'
import { basicAuth } from 'hono/basic-auth'
// Honoアプリケーションを初期化
const app = new Hono()
// '/protected/*'のパスに基本認証のミドルウェアを適用
app.use('/protected/*', basicAuth({ username: 'user', password: 'pass' }))
// '/protected/secret'エンドポイントにGETリクエストが来た場合の処理
app.get('/protected/secret', (c) => c.text('Secret Information'))
// アプリケーションを起動
app.fire()
図解:
[クライアント]
|
| (GET /protected/secret)
v
[Honoアプリケーション]
|
| (認証ミドルウェア)
| (認証成功)
v
[レスポンス生成]
|
| ("Secret Information")
v
[クライアント (レスポンス受信)]
Hono未使用（Node.jsのみ）:
// HTTPと基本認証を解析するモジュールをインポート
const http = require('http');
const auth = require('basic-auth');
// HTTPサーバーを作成
const server = http.createServer((req, res) => {
// リクエストから認証情報を取得
const credentials = auth(req);
// 認証情報のチェック
if (!credentials || credentials.name !== 'user' || credentials.pass !== 'pass') {
// 認証失敗
res.writeHead(401, { 'WWW-Authenticate': 'Basic realm="example"' });
res.end('Access denied');
} else {
// 認証成功
res.writeHead(200, {'Content-Type': 'text/plain'});
res.end('Secret Information');
}
});
// サーバーをポート3000で起動
server.listen(3000);
図解:
[クライアント]
|
| (GET /protected/secret)
v
[Node.js サーバー]
|
| (認証情報解析)
| (認証チェック)
| (認証成功)
v
[レスポンス生成]
|
| ("Secret Information")
v
[クライアント (レスポンス受信)]