はてなブックマーク

ここで言う「Web標準のバックエンドアプリ」とはCloudflare Workers、Deno、BunなどのWeb標準をサポートするランタイム上で動くWebアプリです。もしくは、Node.jsでもWeb標準のAPIをサポートしているので、これから紹介するアプリとテストコード自体はNode.js上も動きます。 これらのテストを書く、実行するのは実にシンプルで、拍子抜けしてしまうほどです。ですが、現在、20,000行あるHonoのテストコードは、これらのやり方と全く同じ方法を取っています。注目すべき点は、実際のサーバーを立ち上げることがなく、抽象化されたリクエストとレスポンスのやり取りを試験するだけで、品質が保たれる点です。Honoのテストでは、ランタイムによっては一部実サーバーを立ち上げますが、コアの20,000行ではサーバーを立ち上げていません。この抽象化はPythonのWSGI、Ruby

生成AIをよりよくする手法の一つにRAG = Retrieval-Augmented Generationがあります。これは単純な仕組みから作ることができて、効果的で面白いです。そして、Cloudflare Workersを中心としたCloudflareスタックで実現できます。やってみると、Cloudflareを使ったアプリケーション作成に必要なエッセンスをいくつも体験できることが分かりました。そこ今回は、シンプルなRAGアプリを作りつつ、Cloudflareスタックを学んでみましょう。 リポジトリ 今回扱うコードや関連する例は以下のリポジトリでみれます。 CloudflareスタックでRAGを作るとは？ RAGの実装方法を説明します。いくつかありますが、簡単な方法にします。 LLMと会話をするにはsystem、userというロールで以下のようなパラメータを渡します。 app.get('/

2024年6月22日(土)に第一回の「Hono Conference」を東京で行いました。Honoに焦点当てたトークのみで構成されるイベントとしては初の試みです。ですので、"Our first step"という副題をつけました。100人が参加し、イベントは大成功に終わりました。 この記事ではHono Conferenceについてレポートしたいと思います。 会場 会場はdocomo R&D OPEN LAB ODAIBAさんにお借りました。開放感がありとても素敵な会場でした。ありがとうございます！ 参加者 以下のページで参加者を募りました。 定員90人のところ、140人の希望者がいました。人気のほどが伺えます。当日は、発表者も合わせて100人が参加しました。 Honoを以前に使ったことがあるか？という質問にほぼ全ての人が手を挙げていたのが印象的でした。 トーク イベントは午後1時から4時30

僕が開発しているWebフレームワークHonoは、同じJavaScriptのフレームワーク、Expressと比べられることが多いです。どちらもやれることはほぼ同じですが、HonoのアドバンテージはファーストクラスでTypeScriptをサポートしていることです。特に「RPC」機能は他のフレームワークにはなかった「TypeScriptの型でサーバーとクライアントの仕様を共有する」ことを可能にしています。今回はそのHonoのRPCについて紹介します。 どんなものか まず、どんなものかを箇条書きで共有します。 Web APIの仕様、特にインプット・アウトプットをサーバーとクライアント間で共有するためのもの OpenAPIやgRPCを使ってやりたかったことを叶えるかもしれない サーバーとクライアントをどちらもTypeScriptで書くことが大前提である 同種のものにtRPCがあるが、Honoの場合、

前置き 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のDeveloper Week 2024の記事の中にPicsartというサービスの事例記事がありました。 よくよく読んでみると「Cloudflareを導入したらパフォーマンス上がった」という簡単なセリフでは済まされない努力と工夫が書かれていました。非常に面白いので、自分なりに噛み砕いた要約を書いてみます。コードはあまり出てきませんがテクニカルな内容になっています。 Picsartとは そもそもPicsartとは？ということなんですが、iOSとAndroidのモバイルデバイスとWebに対応した、世界的なオンラインの写真編集サービスです。 Wikipediaによると180カ国で10億ダウンロードを超えているとのことです。 問題 Picsartには固有の問題がありました。 各アプリの起動時にクライアントデバイスは1.5MBの設定ファイルをダウンロードする クライア

Cloudflare PagesでURL短縮サービスを作ってみましょう！これを作ることであなたは以下を体験することができるしょう。 HonoでWebページをつくること Cloudflare KVをアプリケーションの中で使うこと アプリケーションをCloudflare Pagesへデプロイすること アプリケーションの特徴 今回作ってもらうアプリケーションはこのような特徴があります。 Viteを使って開発 UI付き JSXを使ってHTMLを書ける メインのコードは100行以下！ Zodを使ったバリデーション バリデーションエラーも表示 簡易なCSRF対策 デモ 完成品を使っている様子です。 完成品 完成済みのコードは以下にあります。 アカウント 今回、アプリケーションを作ってCloudflare PagesへデプロイするにはCloudflareのアカウントが必要です。無料の範囲で遊べるので、も

編集中 ここにコードを置くと思います。 このイベントが今週末で、その中で「Honoハンズオン」をやるので超絶ネタバレですが、そこで話す内容を書きます。 方針 ハンズオンと言いつつ「みんなで一斉にやりましょう」ってやると合わせるのに時間がかかるので、僕がどんどん進めます。なので、ついてきたい人だけついてきてください。そうじゃない人は僕がコード書くのを見てください。むしろその方がよくわかっていいと思います。 Honoとは？ ウェブサイトを見てください。 あと正直、僕はブログ書くのとか好きなんですが、いわゆるちゃんとした「ドキュメント」を書くのが正直苦手でそれは英語に限らずなんですが、なので、よくしている方いたら貢献してください。コントリビューションウェルカム！ create-hono さてこれからやっていくわけですが、Honoのプロジェクトをつくるときにはcreate-honoというCLIを使

laisoさんが書いてたのほぼなんだけど Honoは文字列でもStreamでもなんでも返せるからサーバーサイドもReactで書けるし、tsconfig.jsonで適切に設定すればJSXなんでもいけるし、Viteのdev-serverがあるから、サーバーもクライントも同時に開発、ビルドできて、もちろんAPIを生やすのが得意で、雑React SPA環境（API付き！）作るのに向いてるよ。 作り方解説します。めんどい人はここにプロジェクト作ってるからclone、ダウンロードしてください。 まず、create-honoして、cloudflare-pagesのテンプレートを選ぶ。bunをパッケージマネージャーに使ってる。

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()がそのまま使

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で作ったプロジェクト内で実

いわゆるファイルベースルーティングをするJavaScript/TypeScriptのWebのフレームワークを作ってみましょう。 ファイルベースルーティングの例 ここで言うファイルベースルーティングとはファイルを置いたパスに応じてWebのルーティングも決定する、というものです。例はこんな感じです。 $ tree ./app/routes ./app/routes ├── about.tsx // http://localhost:3000/about ├── index.tsx // http://localhost:3000/ └── posts └── [id].tsx // http://localhost:3000/posts/123

昨日、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アプリになります。

先日リリースした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でアプリ開発をしていた人はこのスタータ

この記事は以前7月に自分で書いた「Hono + htmx + Cloudflare is a new stack」という記事を一部修正し、訳したものです。 Hono + htmx + Cloudflareは新しいスタック 以前、バックエンドエンジニアだった身からすれば、Reactは複雑だと感じることがあります。さらに（私はフレームワーク開発者なのですが）フレームワーク開発者にとってはハイドレーションの仕組みを作ることは厄介です。しかし、しばしばReactを使うことになります。 Reactの優位な点の一つは「JSX」です。最初見た時、JSXは奇妙に思えました。「なんでJavaScriptの中にHTMLのタグが入っているんだ！」。しかし、一度慣れると、JSXは柔軟で、書きやすいことに気づきました。 今日はこれから、JSXをサーバーサイドのテンプレートとして使う技術スタックを紹介します。これはつ

ワークショップ 来週というか今週の金曜日、名古屋でCloudflare Workers + Honoのワークショップをやるのですが、先日Birthday Weekで発表された「Workers AI (AIアプリがGPUで動く！)」が楽しいので、それを使ったアプリを作ろうということになりました。 先日もServerlessDays Tokyo 2023というイベントでCloudflare Workers + Honoのワークショップをやったのですが（4時間！）、その時にドタバタしちゃったんで、今回はもうやることを全部ここに書こうと思います。とはいえ「Cloudflare Workersとは」とか「Honoの特徴は？」とか書き出すとキリがないので、参考文献を参考にしてください。 準備してもらうこと まず、Cloudflareのアカウントを作って、Dashboardに入れることを確認してください

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と呼びました。とはいえ、オリジン自身がエッジにある可能性もあります。 メタフレームワークを作る Sonikというメタフレームワークを作っています。まだDevステージなんでどんなことができるか可能性を探っている最中です。 このフレームワークの特徴はとにかくエッジファーストです。 SSRしたバンドルの大きさを極力小さくする。 Islandsアーキテクチャを採用する。 DenoのFreshを参考にする。 CloudflareのBindingsを扱いやすくする。 Honoの上に乗せる。 とりあえずStreamingはサポートしない。 で、こういうのを作っていると、フレームワークは最小限にして、Core Web Vitalsのスコアを上げるために身を削る最後の部分はCDNに任せてしまった方がいいってことです

CloudflareのDeveloper WeekではAI基盤のConstellationや、HTTP以外のTCP接続が可能になるconnect()、PlanetScaleやSupabaseなどのデータベース統合など魅力的な製品の紹介やアップデートがありました。これらを活用することでよりフルスタックなアプリケーションをエッジ上で構築する事が可能になります。 また、Cloudflareに限らず、FastlyでもCompute@Edge上でNext.jsが動いたり、先日KVストアが導入されたDeno Deployではエッジ上でリッチなアプリケーションをつくるこができます。 一方、CDNのエッジで実行されることの醍醐味のひとつに「オリジンを活かす」ことがあります。オリジンに対しての「リバースプロキシ」です。「フルスタック」に目が行きがちですが、エッジコンピュートはリバースプロキシに新しい風を吹き

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へのリネーム ではひとつずつ見ていきましょう。

RemixをNext.jsのEdge API Routesで動かしてみたら、動きました。何が嬉しいのかわかりませんが、可能性の追求です。 Edge API Routes Next.jsのEdge API RoutesというのはVercelのEdge Runtimeで動くことを前提したAPIを生やす機能です。つまりWeb Standardベースのエッジで動くAPIが/api/*以下で動きます。 一方RemixはWeb Standardをベースにした環境でも動くことが売りで、Cloudflare Workers/PagesだけではなくVercelでも動きます。 ということはなんとなくVercelの上で動いているNext.jsのEdge Runtime Routes上でRemixを動かせそうな気がします。 Request/Response これ系の、つまりWeb Standardを使ったエッジで

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

僕が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の開発にはwrangler pages devが使えるんだけど、引数にコマンドライン渡せるの知らなかった。引数に渡したコマンドが開いたポートをリバースプロキシしてくれる。つまり、viteコマンドを渡せばViteのdevサーバーをバックエンドにしたWranglerが立ち上がり、裏側ではHMRが効く。これ何が嬉しいって、/functionsでAPIを作った場合にこれまでWranglerとVite2つ立ち上げていたのが1つで済むし、クライアントもAPIサーバーもホットリロード効くのでDXが良い。そして、これを利用すると例えば非常に少ないファイルでReactのSPAが作れる。 まずWranglerにコマンドライン渡せるやつはこんな感じ。 以下のスクショだと、Viteのdevサーバーが5175で立ったのを検出してWranglerがプロキシしている。 ではこれを利用して

D1はローカルで動く 5月にClouflare D1が発表されました。ヤバいらしいです。 まだベータすら出てません。PrivateなEarly Accessがありますが、僕はもらってません。でも早く触ってみたい！じゃないっすか。で、よく見てみると、Cloudflare Workersのローカル実行環境のMiniflareにはD1をエミュレートするブランチがもうすでにあるのです。 また、Cloudfalre Workersの公式CLIであるWranglerはそのMiniflareをローカル向けに内包しています。そしてWranglerにもD1に対応させたブランチがあります。ちょっと前まで動かなかったけど、最近動くようになりました。 ってことは、D1はベータすら出てないけど、ローカルでは動くということで、はじめてのD1アプリを作ってみました。 Internal 作る前にMiniflareとWra

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でかつ

React18のストリーミング機能とCloudflare WorkersやDenoのStreams APIが気になっていたので、それらを組み合わせて遊んでみた。というかこの2つの組み合わせこそがReactのやりたいことだと思います。ところで、Reactよく分かってないので、ツッコミどころあるかもしれませんが、優しくしてください。 やりたいこと SSRしたHTMLをStreamで返却し、コンテンツの準備ができたらSuspenseの内側だけを差し替える。これを全部、HTTP Streamingでやるのがミソ。結果当然ながら、パフォーマンスが上がったりいいことが起こる。 Suspense ReactのSuspenseとはたぶん、Suspenseの外側を先に描画して、Suspenseの内側で投げたPromiseが完了するまでにfallbackを表示するってことだと思います。外部APIのレスポンスを

Edge Runtime が出た Vercelからいつの間にかEdge Runtimeなるものが出てたので、遊んでみた。 Web標準のAPIを使ったエッジ環境で動くアプリケーションの開発やテストを助けるツールキット。Edge環境はNode.jsじゃないし、evalが使えなかったりするので、それをシミュレートできる。 The Edge Runtime is a toolkit for developing, testing, and defining the runtime Web APIs for Edge infrastructure. 第一行目に「Vercel」とか「Next.js」の文字がないのがよい。とはいえ、一番の想定はVercelのEdge Functionsでしょう。 Edge Functionsってのは今のところ2つあるみたい。どちらもVercelもしくはNext.jsの機