Category: Hono / Sonik

CloudflareHono / Sonik

Cloudflare Pages + React + Hono: 手軽に始めるサーバーレスフルスタック開発

Cloudflare Pages、React、Hono を組み合わせたサーバーレスフルスタック開発の手法。単一リポジトリで管理でき、git push一発でデプロイ。Cloudflareのエッジネットワークを活用した高速応答と、Vite、TypeScriptによる快適な開発体験。

Okamoto Hidetaka

Hono / SonikJavaScriptLINE

[ #LINEDC ] HonoでLINE Message API用の Webhook APIを作る

この記事では、HonoフレームワークでLINE Message APIのWebhook APIを作成する方法を解説しています。署名検証の実装方法や、メッセージ処理関数の分離、リクエストボディの取り扱いなどのポイントが紹介されています。LINEボットを構築する際の参考になる実践的な内容です。

Okamoto Hidetaka

Hono / SonikJavaScript

Honoxでhono/clientのパス指定を力技でダイナミックにする

HonoのRPCモードを使用すると、作成したREST APIをSDKライクにアプリケーション側で利用できるが、APIのホスト指定が固定される課題がある。この問題を解決するために、middlewareを使用してクライアントを動的にする試みが行われた。ただし、dummyのURLを指定するとエラーが出るため、ステージング環境やlocalhostなど実際の環境に合わせた設定が必要。クライアント側ではuseEffectを使用した処理は正常に動作するが、本番環境での利用には慎重さが必要。

Okamoto Hidetaka

Hono / SonikJavaScript

HonoでRPCモードを触ってみた

たまたま見かけたHonoのRPCモードについて、TypeScriptの型を使ってサーバーとクライアントの仕様を共有できることがわかりました。APIの定義やレスポンスの型情報を共有することで、クライアントアプリ側でも参照しやすくなる点がポイントです。RPCを活用する際は、メソッドチェーンでAPI Routeを作成する必要があります。RPCモードを使用すると、API側で定義した型情報をクライアント側でも利用できるため、便利な機能と言えるでしょう。

Okamoto Hidetaka

CloudflareHono / SonikJavaScriptSaaS / FaaS

Honoxで動的な値をmiddlewareで設定する場合はcontext.set/getを使う

Honoxでページを作成する際、サイト全体で利用したい動的な値を設定する方法について解説されています。middlewareとcontextを使用して解決策を示し、例としてAPIのアドレスを動的に設定するコードが示されています。環境変数を使用する方法と比較しつつ、ステージングやプレビューデプロイでも利用できる利点が紹介されています。さらに、取得した値にTypeScriptの型情報を追加する方法も提案されています。

Okamoto Hidetaka

Hono / SonikJavaScript

Hono Clientを利用して、APIからの情報をJSXで表示する

この記事では、Honoで作成したAPIをHono Clientを使用して呼び出す方法が紹介されています。APIの準備からクライアントアプリの作成までが詳しく解説されており、Honoを使用する魅力や効率的な開発手法について触れられています。APIを実装し、クライアントを通じて呼び出すことで、フロントエンドとAPIを1つのプロジェクトで管理できる便利な方法が示唆されています。

Okamoto Hidetaka

CloudflareHono / SonikJavaScript

HonoでCloudflare Pagesを作りつつ、wrangler.tomlを使ってVectorizeをよびだしてみた

2024年春のDeveloepr WeekでCloudflare Pagesがwrangler.tomlをサポート。Cloudflare Pagesプロジェクト作成時にwrangler.tomlが自動生成され、Vectorizeも利用可能。WorkerからVectorizeを利用する方法も紹介。Vectorizeの操作確認後デプロイし、エラーなし。PagesでVectorizeが使用できることを確認。Node.jsの互換性設定時にエラーあり。cryptoのエラー解決方法が課題。Wrangler.tomlの更新によりVectorizeが利用可能に。

Okamoto Hidetaka

Hono / SonikJavaScript

Honoの静的サイト生成機能（`toSSG`）を試してみる

最近Honoを使用してデモアプリを作成し、静的サイトビルド機能を試した結果を共有。Hono(v4)を使用し、nodejsテンプレートを利用してアプリをセットアップ。SSG対応のためにJSXでWebページを生成する方法やビルド用の処理を追加する手順を解説。ビルド時のログ記録方法や実際にビルドする際の注意点も紹介。静的ファイルを生成し、実践投入するための準備が整った。

Okamoto Hidetaka

Hono / SonikJavaScript

Honoxで、サーバーサイドとクライアントサイドのfetchを試してみた

HonoでWebサイトを作る「honox」の実装方法を紹介。クライアント・サーバーサイドでのデータ取得やAPI呼び出しを説明。外部APIを用意し、クライアントでfetchやサーバーでfetch、レスポンス表示する手順を示す。Reactライクな使い勝手とHono/Cloudflare Workersっぽい特徴がある。honoxは個人的に興味深く、SSGの場合はAstroを、サーバー側処理が多い場合はhonoxを推奨。

Okamoto Hidetaka

Hono / SonikJavaScript

Honoでサブディレクトリごとにリソースを分割したAPIを作る

Honoを使用してAPIを作り込む際に、ファイルの分割をサブディレクトリ・パス単位で行うことが多いです。ルートのAPIを作成し、app.routeを使用してサブディレクトリ内の追加したいAPIを登録することで、パスの指定やリソースの分割がシンプルになります。例として、/supabase/contentというパスを指定したAPIを追加する方法が説明されています。

Okamoto Hidetaka
Home
Search
Bookmark