見よ、これがHonoのRPCだ
僕が開発しているWebフレームワークHonoは、同じJavaScriptのフレームワーク、Expressと比べられることが多いです。どちらもやれることはほぼ同じですが、HonoのアドバンテージはファーストクラスでTypeScriptをサポートしていることです。特に「RPC」機能は他のフレームワークにはなかった「TypeScriptの型でサーバーとクライアントの仕様を共有する」ことを可能にしています。今回はそのHonoのRPCについて紹介します。 どんなものか まず、どんなものかを箇条書きで共有します。 Web APIの仕様、特にインプット・アウトプットをサーバーとクライアント間で共有するためのもの OpenAPIやgRPCを使ってやりたかったことを叶えるかもしれない サーバーとクライアントをどちらもTypeScriptで書くことが大前提である 同種のものにtRPCがあるが、Honoの場合、
Cloudflare WorkersのJS RPCを理解する
前置き 4月の第1週に行われたCloudflare Developer Week 2024でAIやデータベース関係のアップデートの影に隠れ、WorkersをつくってるKenton氏のブログが2つ投下されました。 そして「JS RPC」という機能が追加されました。 これが一見地味なんですが、非常に楽しい未来を想像できるので、書いてみます。というか以前chimameさんが書いた記事でだいぶ理解できるのですが、もう少し噛み砕いて書いてみます。 Bindings Cloudflareにはいくつもプロダクトがあります。ストレージのR2、データベースD1、KVストアのKVなどです。そしてそれらに繋ぐ方法が「Bindings」という方法です。このBindingsで繋げられるものはたくさんあります。 AI Analytics Engine Browser Rendering D1 Environment
Cloudflare PagesでURL短縮サービスをつくる！
Cloudflare PagesでURL短縮サービスを作ってみましょう！これを作ることであなたは以下を体験することができるしょう。 HonoでWebページをつくること Cloudflare KVをアプリケーションの中で使うこと アプリケーションをCloudflare Pagesへデプロイすること アプリケーションの特徴 今回作ってもらうアプリケーションはこのような特徴があります。 Viteを使って開発 UI付き JSXを使ってHTMLを書ける メインのコードは100行以下！ Zodを使ったバリデーション バリデーションエラーも表示 簡易なCSRF対策 デモ 完成品を使っている様子です。 完成品 完成済みのコードは以下にあります。 アカウント 今回、アプリケーションを作ってCloudflare PagesへデプロイするにはCloudflareのアカウントが必要です。無料の範囲で遊べるので、も
Honoハンズオン2024年3月沖縄
編集中 ここにコードを置くと思います。 このイベントが今週末で、その中で「Honoハンズオン」をやるので超絶ネタバレですが、そこで話す内容を書きます。 方針 ハンズオンと言いつつ「みんなで一斉にやりましょう」ってやると合わせるのに時間がかかるので、僕がどんどん進めます。なので、ついてきたい人だけついてきてください。そうじゃない人は僕がコード書くのを見てください。むしろその方がよくわかっていいと思います。 Honoとは？ ウェブサイトを見てください。 あと正直、僕はブログ書くのとか好きなんですが、いわゆるちゃんとした「ドキュメント」を書くのが正直苦手でそれは英語に限らずなんですが、なので、よくしている方いたら貢献してください。コントリビューションウェルカム！ create-hono さてこれからやっていくわけですが、Honoのプロジェクトをつくるときにはcreate-honoというCLIを使
HonoでAPI付き雑React SPA最小
laisoさんが書いてたのほぼなんだけど Honoは文字列でもStreamでもなんでも返せるからサーバーサイドもReactで書けるし、tsconfig.jsonで適切に設定すればJSXなんでもいけるし、Viteのdev-serverがあるから、サーバーもクライントも同時に開発、ビルドできて、もちろんAPIを生やすのが得意で、雑React SPA環境（API付き！）作るのに向いてるよ。 作り方解説します。めんどい人はここにプロジェクト作ってるからclone、ダウンロードしてください。 まず、create-honoして、cloudflare-pagesのテンプレートを選ぶ。bunをパッケージマネージャーに使ってる。
HonoXについて
2月9日、予告していた通りHono v4をリリースしました。 そのHono v4のリリースと同時に、Honoを使ったメタフレームワーク「HonoX」を公開しました。 今回はHonoXのいくつかの特徴について書いてみたいと思います。これは使い方というより作者目線の思想みたいなものです。 メタフレームワーク HonoXとは一言で言うと「HonoとViteを組み合わせたメタフレームワーク」です。HonoX自体が機能を提供しないのが肝です。 もう少しだけ具体的に言います。HonoXで扱うのは「Honoのインスタンス」そのものです。つまりあなたがHonoXでアプリを作るということは「Honoのアプリを作る」ことになります。その証拠にエントリーポイントになるapp/server.ts内で出てくるappはHonoのインスタンスなので、hono/devにあるヘルパー関数showRoutes()がそのまま使
Honoのv4が2月9日にリリースされます
X dayは2月9日です！ ということで、Honoの現在のバージョンはv3系なのですが、v4を2月9日にリリースする予定です。偶然にもYAPC::Hiroshima 2024の前夜祭の日ですね。 当初はdeprecatedな機能を廃止したいという「ポジティブではない」理由でメジャーバージョンアップをしたかったのですが、大きな機能が入ることになりました。ずばりこの3つです。 Static Site Generation Client Components File-based Routing お分かりの通り、よりフルスタックなフレームワークに進化します。今回は2月9日に先駆けてこの3つの機能を軽くオーバービューしてみましょう。 RC版 v4のRC版が出てます。現在は4.0.0-rc.3が最新なので以下のコマンドでインストールできます。 npm create honoで作ったプロジェクト内で実
HonoのNode.jsアダプタが2.7倍速くなりました
昨日、HonoのNode.jsアダプタのv1.3.0をリリースしました。これまでのものより2.7倍速くなるパフォーマンス向上が含まれています。 このリリースは「2.7倍」という数値以上にHonoにとって大きなものになりますので、それについて解説します。 Request/Responseの翻訳 HonoはWebスタンダードAPIのみを利用したWebフレームワークで、WebスタンダードAPIのみで構成されたものがWebアプリになるうるランタイムのみを対象にしていました。具体的には、Cloudflare Workers、Deno、Bun、Fastly Computeなどです。 Honoを使わない例を出すと、以下のコードはWebスタンダードのみを利用してる非常に素朴なものですが、これだけでCloudflareでもBunでも立派にWebアプリになります。
Honoの新しいCloudflare Pagesスターターについて
先日リリースしたv3.9.0でHonoの「Cloudflare Pages」のスターターテンプレートが新しくなりました。 これがなかなか面白いので詳しく紹介します。 使ってみる 使ってみてください。create honoコマンドを使います。C3（Create Cloudflare CLI）コマンドでもHonoを選べますが今のところそれだとWorkersのテンプレートになるのでcreate honoで。npmの場合は以下です。 選択肢がでてくるのでcloudflare-pagesを選びます。 そしたら、ディレクトリに入って、npm installしてnpm run devすれば開発サーバーが立ち上がり、npm run deployすればデプロイできます。 Viteベース で、以前からCloudflare Pages、もしくはWorkersも含み、Honoでアプリ開発をしていた人はこのスタータ
Hono + htmx + Cloudflareは新しいスタック
この記事は以前7月に自分で書いた「Hono + htmx + Cloudflare is a new stack」という記事を一部修正し、訳したものです。 Hono + htmx + Cloudflareは新しいスタック 以前、バックエンドエンジニアだった身からすれば、Reactは複雑だと感じることがあります。さらに（私はフレームワーク開発者なのですが）フレームワーク開発者にとってはハイドレーションの仕組みを作ることは厄介です。しかし、しばしばReactを使うことになります。 Reactの優位な点の一つは「JSX」です。最初見た時、JSXは奇妙に思えました。「なんでJavaScriptの中にHTMLのタグが入っているんだ！」。しかし、一度慣れると、JSXは柔軟で、書きやすいことに気づきました。 今日はこれから、JSXをサーバーサイドのテンプレートとして使う技術スタックを紹介します。これはつ
My first Cloudflare Workers AI
ワークショップ 来週というか今週の金曜日、名古屋でCloudflare Workers + Honoのワークショップをやるのですが、先日Birthday Weekで発表された「Workers AI (AIアプリがGPUで動く！)」が楽しいので、それを使ったアプリを作ろうということになりました。 先日もServerlessDays Tokyo 2023というイベントでCloudflare Workers + Honoのワークショップをやったのですが（4時間！）、その時にドタバタしちゃったんで、今回はもうやることを全部ここに書こうと思います。とはいえ「Cloudflare Workersとは」とか「Honoの特徴は？」とか書き出すとキリがないので、参考文献を参考にしてください。 準備してもらうこと まず、Cloudflareのアカウントを作って、Dashboardに入れることを確認してください
BunとHono
JavaScriptのランタイム、Bunのv1.0がリリースされましたね 🎉 さて、僕がメインとなって開発しているHonoはBunと関係があるので、その話をします。 hono Express or KOA Bunのリリース時に使われた動画がかっこいいです。まるでApple。 この中で作者のJarredから肉まんのパスを受けるのがBunのDeveloper AdvocateでZodの作者のColinです。彼は「Web APIを作るためのフレームワーク」として以下のように言いました。 hono Express or KOA おおー。Express、Koaより前に来てていい感じですね。上記で貼ったリリースノートには順番が変わってますが、しっかりと名前が出てます。 Bun is tested against test suites of the most popular Node.js pack
最適化はCDNがやればいい
題名に「CDN」と書きましたが、いわゆる「エッジ」のことです。オリジンありきなのであえてCDNと呼びました。とはいえ、オリジン自身がエッジにある可能性もあります。 メタフレームワークを作る Sonikというメタフレームワークを作っています。まだDevステージなんでどんなことができるか可能性を探っている最中です。 このフレームワークの特徴はとにかくエッジファーストです。 SSRしたバンドルの大きさを極力小さくする。 Islandsアーキテクチャを採用する。 DenoのFreshを参考にする。 CloudflareのBindingsを扱いやすくする。 Honoの上に乗せる。 とりあえずStreamingはサポートしない。 で、こういうのを作っていると、フレームワークは最小限にして、Core Web Vitalsのスコアを上げるために身を削る最後の部分はCDNに任せてしまった方がいいってことです
Cloudflare Workersプロキシパターン
CloudflareのDeveloper WeekではAI基盤のConstellationや、HTTP以外のTCP接続が可能になるconnect()、PlanetScaleやSupabaseなどのデータベース統合など魅力的な製品の紹介やアップデートがありました。これらを活用することでよりフルスタックなアプリケーションをエッジ上で構築する事が可能になります。 また、Cloudflareに限らず、FastlyでもCompute@Edge上でNext.jsが動いたり、先日KVストアが導入されたDeno Deployではエッジ上でリッチなアプリケーションをつくるこができます。 一方、CDNのエッジで実行されることの醍醐味のひとつに「オリジンを活かす」ことがあります。オリジンに対しての「リバースプロキシ」です。「フルスタック」に目が行きがちですが、エッジコンピュートはリバースプロキシに新しい風を吹き
Honoのv3.2が出ました
Honoのv3.2が出ました。 今回のアップデートについて、リリースノートとほぼ同じ内容ですが、書きます。 Honoのステータス ちなみに現在のHonoのステータス。GitHubスターは4.4Kとなっています。 新しい機能 今回はマイナーアップデートとなります。破壊的変更は含まれないものの、大きな機能がいくつか追加されました。 2つの新しいルーター: LinearRouter and PatternRouter プリセットという概念と実装: hono/tiny, hono/quick app.mount() Node adapter serverの初のメジャーバージョン「v1.0.0」がリリース AWS Lambda function URLsのサポート Cookie Middlewareの追加 hono/nextjsからhono/vercelへのリネーム ではひとつずつ見ていきましょう。
Cloudflare PagesにBasic認証かけるやつ
Cloudflare PagesにBasic認証かけるやつ、Honoの次のマイナーアップデート「v3.1.0」で簡単にできる予定。 import { Hono } from 'hono' import { basicAuth } from 'hono/basic-auth' import { EventContext, handle } from 'hono/cloudflare-pages' type Bindings = { eventContext: EventContext } const app = new Hono<{ Bindings: Bindings }>() app.all( '*', basicAuth({ username: 'foo', password: 'bar', }), async (c) => { return c.env.eventContext.ne
Honoのv3が出ました
僕がCreatorのHonoの新しいメジャーバージョンである「v3.0.0」が出ました。 このリリースノートに全て書いたのですが、補足を含めてこちらにも残しておきます。 Honoのステータス v3の説明の前に現在のHonoのステータスです。 GitHubスターは3.5Kです。 Cloudflare WorkersのSDK、Deno、Bun、それぞれのプロジェクトにHonoの文字が入ってます。 プロダクションやライブラリでも使われています。 cdnjsのAPIサーバー Polyfill.io repeat.dev Drivly substats Ultra（DenoのReact SSRフレームワーク） Cloudflare 公式のブログ記事 などなど いい感じです。 v3のスローガン v3へのバージョンアップにあたってのスローガンはズバリこれでした。 Do Everything, Run A
Cloudflare Pagesの開発でVite使う
Cloudflare Pagesの開発にはwrangler pages devが使えるんだけど、引数にコマンドライン渡せるの知らなかった。引数に渡したコマンドが開いたポートをリバースプロキシしてくれる。つまり、viteコマンドを渡せばViteのdevサーバーをバックエンドにしたWranglerが立ち上がり、裏側ではHMRが効く。これ何が嬉しいって、/functionsでAPIを作った場合にこれまでWranglerとVite2つ立ち上げていたのが1つで済むし、クライアントもAPIサーバーもホットリロード効くのでDXが良い。そして、これを利用すると例えば非常に少ないファイルでReactのSPAが作れる。 まずWranglerにコマンドライン渡せるやつはこんな感じ。 以下のスクショだと、Viteのdevサーバーが5175で立ったのを検出してWranglerがプロキシしている。 ではこれを利用して
はじめてのCloudflare D1アプリ
D1はローカルで動く 5月にClouflare D1が発表されました。ヤバいらしいです。 まだベータすら出てません。PrivateなEarly Accessがありますが、僕はもらってません。でも早く触ってみたい！じゃないっすか。で、よく見てみると、Cloudflare Workersのローカル実行環境のMiniflareにはD1をエミュレートするブランチがもうすでにあるのです。 また、Cloudfalre Workersの公式CLIであるWranglerはそのMiniflareをローカル向けに内包しています。そしてWranglerにもD1に対応させたブランチがあります。ちょっと前まで動かなかったけど、最近動くようになりました。 ってことは、D1はベータすら出てないけど、ローカルでは動くということで、はじめてのD1アプリを作ってみました。 Internal 作る前にMiniflareとWra
CloudflareでもFastlyでもVercelでもDenoでもBunでもService Workerでも動く
HonoというWebフレームワークを作っています。 当初はCloudflare Workers向けに作っていたのですが、同じCDNであるFastlyのエッジランタイム、Compute@Edgeでも動くことが分かりました。また、Next.jsのEdge MiddlewareもしくはEdge API RoutesとしてVercelの環境でも動きます。そして、少々手を加えるとDenoでも動きました。もちろんDeno Deployにもデプロイできます。さらに、先程レポジトリが一般公開されたYet AnotherなJavaScriptランタイムのBunでも手を加えず動きました。 この「CloudflareでもFastlyでもVercelでもDenoでもBunでも動いた件」が、なかなか面白かったのでそれについて書きます。 Web標準のAPI これらの環境で同じように動くのは、JavaScriptでかつ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
