Category: Hono / Sonik

Hono / SonikJavaScript

HonoXでWebサイトを作る

HonoXを使えば、Tailwind CSSやクライアントコンポーネントなどの最新機能を備えた高速・軽量なWebサイトを簡単に構築できます。この記事では、HonoXプロジェクトのセットアップから開発サーバーの起動まで、一歩一歩解説しています。

Okamoto Hidetaka

AWSHono / SonikLINE

AWS CDK / LINE / Honoで作るMessage API

今回はAWS CDK、LINE Messaging API、Honoを組み合わせて、効率的で拡張性の高いLINEボットを構築する方法を紹介。AWS LambdaにHonoフレームワークを導入し、LINE Webhookを処理してユーザーからのメッセージに自動返信する機能を実装します。

Okamoto Hidetaka

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
Home
Search
Bookmark