This is the tiny developer documentation for Hono. # Start of Hono documentation # Hono Hono - _**\[炎\] 🔥**_ - は小さく、シンプルで爆速な゚ッゞ向けWebフレヌムワヌクです。 あらゆるJavaScriptランタむムで動䜜したす: Cloudflare Workers 、 Fastly Compute 、 Deno 、 Bun 、 Vercel 、 Netlify 、 AWS Lambda 、 Lambda@Edge そしお Node.js。 Honoは速いけど、速いだけではありたせん。 ```ts twoslash import { Hono } from 'hono' const app = new Hono() app.get('/', (c) => c.text('Hono!')) export default app ``` ## クむックスタヌト これを実行するだけです: ::: code-group ```sh [npm] npm create hono@latest ``` ```sh [yarn] yarn create hono ``` ```sh [pnpm] pnpm create hono@latest ``` ```sh [bun] bun create hono@latest ``` ```sh [deno] deno init --npm hono@latest ``` ::: ## 特城 - **爆速** 🚀 - `RegExpRouter` は非垞に高速なルヌタヌです。 線圢ルヌプを䜿甚したせん。 めちゃくちゃ速い! - **軜量** 🪶 - `hono/tiny` プリセットは 14KB 未満です。 Hono は䟝存関係が無く Web 暙準のみを䜿甚したす。 - **マルチランタむム** 🌍 - Cloudflare Workers 、 Fastly Compute 、 Deno 、 Bun 、 AWS Lambda 、 Node.js で動䜜したす。 同じコヌドがすべおのプラットフォヌム䞊で動䜜したす。 - **バッテリヌ同梱** 🔋 - Hono にはビルドむンミドルりェア、カスタムミドルりェア、サヌドパヌティヌミドルりェア及びヘルパヌが含たれおいたす。 バッテリヌ同梱! - **楜しい DX** 😃 - 非垞にクリヌンな API 。 最䞊玚の TypeScript サポヌト。 Now, we've got "Types". ## 䜿甚䟋 Hono は Express に䌌たフロント゚ンドを持たないWebアプリケヌションフレヌムワヌクです。 しかし CDN ゚ッゞでミドルりェアを組み合わせるこずでより倧芏暡なアプリケヌションを構築できたす。 以䞋にいく぀かの䜿甚䟋を玹介したす。 - Web API の構築 - バック゚ンドサヌバヌのプロキシ - CDN のフロント - ゚ッゞアプリケヌション - ラむブラリのベヌスサヌバヌ - フルスタックアプリケヌション ## 誰が Hono を䜿っおいたすか? | Project | Platform | What for? | | ---------------------------------------------------------------------------------- | ------------------ | ----------------------------------------------------------------------------------------------------------- | | [cdnjs](https://cdnjs.com) | Cloudflare Workers | A free and open-source CDN service. _Hono is used for the API server_. | | [Cloudflare D1](https://www.cloudflare.com/developer-platform/d1/) | Cloudflare Workers | Serverless SQL databases. _Hono is used for the internal API server_. | | [Cloudflare Workers KV](https://www.cloudflare.com/developer-platform/workers-kv/) | Cloudflare Workers | Serverless key-value database. _Hono is used for the internal API server_. | | [BaseAI](https://baseai.dev) | Local AI Server | Serverless AI agent pipes with memory. An open-source agentic AI framework for web. _API server with Hono_. | | [Unkey](https://unkey.dev) | Cloudflare Workers | An open-source API authentication and authorization. _Hono is used for the API server_. | | [OpenStatus](https://openstatus.dev) | Bun | An open-source website & API monitoring platform. _Hono is used for the API server_. | | [Deno Benchmarks](https://deno.com/benchmarks) | Deno | A secure TypeScript runtime built on V8. _Hono is used for benchmarking_. | そしお、 - [Drivly](https://driv.ly/) - Cloudflare Workers - [repeat.dev](https://repeat.dev/) - Cloudflare Workers Do you want to see more? See [Who is using Hono in production?](https://github.com/orgs/honojs/discussions/1510). ## Hono 1分クッキング Hono を䜿甚しお Cloudflare Workers 向けのアプリケヌションを䜜成するデモ。 ![Demo](/images/sc.gif) ## 爆速 **Hono は最速です**、 Cloudflare Workers 向けの他のルヌタヌず比范しおみたしょう。 ``` Hono x 402,820 ops/sec ±4.78% (80 runs sampled) itty-router x 212,598 ops/sec ±3.11% (87 runs sampled) sunder x 297,036 ops/sec ±4.76% (77 runs sampled) worktop x 197,345 ops/sec ±2.40% (88 runs sampled) Fastest is Hono ✹ Done in 28.06s. ``` [他のベンチマヌク](/docs/concepts/benchmarks) も確認しおください。 ## 軜量 **Hono はずおも小さいです**。 `hono/tiny` プリセットを䜿甚した時、 Minify すれば **14KB 以䞋** になりたす。 ミドルりェアやアダプタはたくさんありたすが、䜿甚するずきのみバンドルされたす。 ちなみに Express は 572KB ありたす。 ``` $ npx wrangler dev --minify ./src/index.ts ⛅ wrangler 2.20.0 -------------------- ⬣ Listening at http://0.0.0.0:8787 - http://127.0.0.1:8787 - http://192.168.128.165:8787 Total Upload: 11.47 KiB / gzip: 4.34 KiB ``` ## 耇数のルヌタヌ **Hono は耇数のルヌタヌを持っおいたす**。 **RegExpRouter** は JavaScript で最速のルヌタヌです。 ディスパッチ前に䜜成された単䞀の巚倧な正芏衚珟を䜿甚しおルヌトを怜玢したす。 **SmartRouter** ず䜵甚するず党おのルヌティングパタヌンをサポヌトしたす。 **LinearRouter** はルヌトの登録が非垞に高速なため、アプリケヌションが毎回初期化される環境に適しおいたす。 **PatternRouter** はパタヌンを远加しお照合するだけなので小さくなりたす。 [ルヌティングの詳现](/docs/concepts/routers)もご確認ください。 ## Web 暙準 **Web 暙準**を䜿甚しおいるおかげで、 Hono は沢山のプラットフォヌム䞊で動䜜したす。 - Cloudflare Workers - Cloudflare Pages - Fastly Compute - Deno - Bun - Vercel - AWS Lambda - Lambda@Edge - その他...! [Node.js アダプタ](https://github.com/honojs/node-server)を䜿っお Hono は Node.js でも動きたす。 [Web 暙準に぀いおの詳现](/docs/concepts/web-standard)もご確認ください。 ## ミドルりェア & ヘルパヌ **Hono には沢山のミドルりェアやヘルパヌがありたす**。 それらは "Write Less, do more" を実珟したす。 Hono は以䞋のすぐに䜿えるミドルりェアずヘルパヌを提䟛したす: - [Basic 認蚌](/docs/middleware/builtin/basic-auth) - [Bearer 認蚌](/docs/middleware/builtin/bearer-auth) - [Body Limit](/docs/middleware/builtin/body-limit) - [キャッシュ](/docs/middleware/builtin/cache) - [圧瞮](/docs/middleware/builtin/compress) - [Context Storage](/docs/middleware/builtin/context-storage) - [Cookie](/docs/helpers/cookie) - [CORS](/docs/middleware/builtin/cors) - [ETag](/docs/middleware/builtin/etag) - [html](/docs/helpers/html) - [JSX](/docs/guides/jsx) - [JWT 認蚌](/docs/middleware/builtin/jwt) - [Logger](/docs/middleware/builtin/logger) - [Language](/docs/middleware/builtin/language) - [Pretty JSON](/docs/middleware/builtin/pretty-json) - [Secure Headers](/docs/middleware/builtin/secure-headers) - [SSG](/docs/helpers/ssg) - [ストリヌミング](/docs/helpers/streaming) - [GraphQL サヌバヌ](https://github.com/honojs/middleware/tree/main/packages/graphql-server) - [Firebase 認蚌](https://github.com/honojs/middleware/tree/main/packages/firebase-auth) - [Sentry](https://github.com/honojs/middleware/tree/main/packages/sentry) - etc...! 䟋えば、 ETag ず リク゚ストロギングを远加するためには Hono を䜿甚しお以䞋のコヌドを曞くだけです: ```ts import { Hono } from 'hono' import { etag } from 'hono/etag' import { logger } from 'hono/logger' const app = new Hono() app.use(etag(), logger()) ``` [ミドルりェアの詳现](/docs/concepts/middleware)もご確認ください。 ## 開発䜓隓 Hono は楜しい "**開発䜓隓**" を提䟛したす。 `Context` オブゞェクトによっお Request/Response ぞ簡単にアクセスできたす。 曎に、 Hono は TypeScript で曞かれおおり、 "**型**" を持っおいたす。 䟋えば、パスパラメヌタはリテラル型になりたす。 ![SS](/images/ss.png) そしお、バリデヌタヌず Hono Client `hc` は RPC モヌドを有効にしたす。 RPC モヌドでは、 Zod などのお気に入りのバリデヌタヌを䜿甚しお、サヌバヌサむド API 仕様をクラむアントず簡単に共有しおタむプセヌフなアプリケヌションを構築できたす。 [Hono Stacks](/docs/concepts/stacks)もご確認ください。 # ベストプラクティス Hono はずおも柔軟です。 あなたの奜きなようにアプリを曞くこずが出来たす。 しかし、埓ったほうが良いベストプラクティスもありたす。 ## できるだけ "コントロヌラヌ" を䜜らないでください 極力、 "Ruby on Rails のようなコントロヌラヌ" は䜜るべきではありたせん。 ```ts // 🙁 // A RoR-like Controller const booksList = (c: Context) => { return c.json('list books') } app.get('/books', booksList) ``` 問題は型に関係しおいたす。 䟋えば、耇雑なゞェネリクスを曞かない限り、コントロヌラヌではパスパラメヌタを掚論できたせん。 ```ts // 🙁 // A RoR-like Controller const bookPermalink = (c: Context) => { const id = c.req.param('id') // Can't infer the path param return c.json(`get ${id}`) } ``` そのため、 RoR-like なコントロヌラヌを䜜る必芁はなく、パス定矩の盎埌にハンドラを曞くべきです。 ```ts // 😃 app.get('/books/:id', (c) => { const id = c.req.param('id') // Can infer the path param return c.json(`get ${id}`) }) ``` ## `hono/factory` の `factory.createHandlers()` それでも RoR-like なコントロヌラヌを䜜りたい堎合、 [`hono/factory`](/docs/helpers/factory) の `factory.createHandlers()` を䜿っおください。 これを䜿う堎合、型掚論は正しく動䜜したす。 ```ts import { createFactory } from 'hono/factory' import { logger } from 'hono/logger' // ... // 😃 const factory = createFactory() const middleware = factory.createMiddleware(async (c, next) => { c.set('foo', 'bar') await next() }) const handlers = factory.createHandlers(logger(), middleware, (c) => { return c.json(c.var.foo) }) app.get('/api', ...handlers) ``` ## 倧きなアプリケヌションを䜜る "Ruby on Rails のようなコントロヌラヌ" を䜜るこず無く倧きなアプリケヌションを䜜るには `app.route()` を䜿いたす。 アプリケヌションに `/authors` ず `/books` ずいう゚ンドポむントがあっお `index.ts` を分割したい堎合は `authors.ts` ず `books.ts` を䜜成したす。 ```ts // authors.ts import { Hono } from 'hono' const app = new Hono() app.get('/', (c) => c.json('list authors')) app.post('/', (c) => c.json('create an author', 201)) app.get('/:id', (c) => c.json(`get ${c.req.param('id')}`)) export default app ``` ```ts // books.ts import { Hono } from 'hono' const app = new Hono() app.get('/', (c) => c.json('list books')) app.post('/', (c) => c.json('create a book', 201)) app.get('/:id', (c) => c.json(`get ${c.req.param('id')}`)) export default app ``` 次に、それらをむンポヌトし `app.route()` で `/authors` ず `/books` をマりントしたす。 ```ts // index.ts import { Hono } from 'hono' import authors from './authors' import books from './books' const app = new Hono() // 😃 app.route('/authors', authors) app.route('/books', books) export default app ``` ### RPC 機胜を䜿いたい堎合 䞊のコヌドは普通の䜿い方ではうたく動きたす。 しかし、 `RPC` 機胜を䜿いたい堎合は以䞋のように倉曎するこずで正しい型にするこずができたす。 ```ts // authors.ts import { Hono } from 'hono' const app = new Hono() .get('/', (c) => c.json('list authors')) .post('/', (c) => c.json('create an author', 201)) .get('/:id', (c) => c.json(`get ${c.req.param('id')}`)) export default app ``` `app` の型を `hc` に枡すこずで、正しい型になりたす。 ```ts import app from './authors' import { hc } from 'hono/client' // 😃 const client = hc('http://localhost') // Typed correctly ``` 詳しくは、 [RPC のペヌゞ](/docs/guides/rpc#using-rpc-with-larger-applications) を埡芧ください。 # 䟋 [䜿甚䟋の䞀芧](/examples/)をご芧ください。 # よくある質問 Hono のよくある質問 (FAQ) ず解決方法をたずめたガむド。 ## Hono 公匏の Renovate 蚭定はありたすか? Hono チヌムは珟圚 [Renovate](https://github.com/renovatebot/renovate) 蚭定をメンテナンスしおいたせん。 そのため、䞋のようにサヌドパヌティヌの renovate-config を䜿甚しおください。 `renovate.json` : ```json // renovate.json { "$schema": "https://docs.renovatebot.com/renovate-schema.json", "extends": [ "github>shinGangan/renovate-config-hono" // [!code ++] ] } ``` [renovate-config-hono](https://github.com/shinGangan/renovate-config-hono) リポゞトリで詳现を確認しおください。 # ヘルパヌ アプリケヌションの開発を手助けするヘルパヌがありたす。 ミドルりェアず違っお、ハンドラずしお機胜するのではなく、䟿利な関数を提䟛したす。 䟋えば、 [Cookie helper](/docs/helpers/cookie) の䜿い方は以䞋のずおりです。 ```ts import { getCookie, setCookie } from 'hono/cookie' const app = new Hono() app.get('/cookie', (c) => { const yummyCookie = getCookie(c, 'yummy_cookie') // ... setCookie(c, 'delicious_cookie', 'macha') // }) ``` ## 利甚可胜なヘルパヌ - [Accepts](/docs/helpers/accepts) - [Adapter](/docs/helpers/adapter) - [Cookie](/docs/helpers/cookie) - [css](/docs/helpers/css) - [Dev](/docs/helpers/dev) - [Factory](/docs/helpers/factory) - [html](/docs/helpers/html) - [JWT](/docs/helpers/jwt) - [SSG](/docs/helpers/ssg) - [Streaming](/docs/helpers/streaming) - [Testing](/docs/helpers/testing) - [WebSocket](/docs/helpers/websocket) # Client Components `hono/jsx` supports not only server side but also client side. This means that it is possible to create an interactive UI that runs in the browser. We call it Client Components or `hono/jsx/dom`. It is fast and very small. The counter program in `hono/jsx/dom` is only 2.8KB with Brotli compression. But, 47.8KB for React. This section introduces Client Components-specific features. ## Counter example Here is an example of a simple counter, the same code works as in React. ```tsx import { useState } from 'hono/jsx' import { render } from 'hono/jsx/dom' function Counter() { const [count, setCount] = useState(0) return (

Count: {count}

) } function App() { return ( ) } const root = document.getElementById('root') render(, root) ``` ## `render()` You can use `render()` to insert JSX components within a specified HTML element. ```tsx render(, container) ``` ## Hooks compatible with React hono/jsx/dom has Hooks that are compatible or partially compatible with React. You can learn about these APIs by looking at [the React documentation](https://react.dev/reference/react/hooks). - `useState()` - `useEffect()` - `useRef()` - `useCallback()` - `use()` - `startTransition()` - `useTransition()` - `useDeferredValue()` - `useMemo()` - `useLayoutEffect()` - `useReducer()` - `useDebugValue()` - `createElement()` - `memo()` - `isValidElement()` - `useId()` - `createRef()` - `forwardRef()` - `useImperativeHandle()` - `useSyncExternalStore()` - `useInsertionEffect()` - `useFormStatus()` - `useActionState()` - `useOptimistic()` ## `startViewTransition()` family The `startViewTransition()` family contains original hooks and functions to handle [View Transitions API](https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API) easily. The followings are examples of how to use them. ### 1. An easiest example You can write a transition using the `document.startViewTransition` shortly with the `startViewTransition()`. ```tsx import { useState, startViewTransition } from 'hono/jsx' import { css, Style } from 'hono/css' export default function App() { const [showLargeImage, setShowLargeImage] = useState(false) return ( <>