Category: JavaScript

Hono / SonikJavaScript

HonoXでWebサイトを作る

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

Okamoto Hidetaka

JavaScriptNext.jsReact

RemixでVercel AI SDKを使う時はzodを添える

この記事では、RemixアプリケーションでVercel AI SDKを使用する際に発生する「z8.string(…).base64 is not a function」エラーの原因と解決策を解説しています。エラーの原因はzodライブラリの依存関係が明示的にインストールされていないことでした。zodをインストールすることで問題が解決し、Anthropicの言語モデルを使ったストリーミングレスポンスの実装例も紹介されています。

Okamoto Hidetaka

JavaScriptLINESaaS / FaaSTypeScript

[ #LINEDC ] チャットのローディングアニメーションをTypeScriptで実装する

この記事では、LINEのメッセージングAPIでチャットのローディングアニメーションを表示する方法をTypeScriptで実装しています。秒数を型で制限し、FetchでAPIを直接呼び出す方法を紹介。関数化した実装例も掲載されており、チャンネルアクセストークン、チャットID、秒数を指定するだけで簡単にローディングアニメーションを表示できます。

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

JavaScriptNext.jsReact

ClerkをNextjsのApp Routerで使う時、middlewareの扱いに注意しよう

ドキュメントをよく読んで、ClerkをNext.jsのApp Routerで使う際の注意点をまとめました。ClerkMiddlewareをプロジェクトルートに配置し、Middlewareのmatcherも設定する必要があります。プロジェクトルートに配置してもうまく動かない場合は、ファイルをプロジェクトルートに移動させると問題が解決される可能性があります。参考記事に詳細が記載されています。

Okamoto Hidetaka

JavaScriptReact

WordPress API から取得したHTMLコンテンツから目次を生成するReactコンポーネントを作ってみた

この記事は、React Advent Calendar 2024の24日目に公開されたもので、Remixを使用したReactアプリでWordPressなどのAPIから取得したコンテンツを目次を自動生成するReactコンポーネントを実装した内容です。再利用性、保守性、パフォーマンス、型安全性、アクセシビリティを重視し、コンポーネントの構造を適切に設計しています。ただし、HTMLの解析方法やパフォーマンス最適化、アクセシビリティ向上、エラーハンドリングに改善の余地があります。そして、React/Remixを使ったレイアウトの自由度を生かしてカスタマイズを行い、今後も改善を進めていく意向を述べています。

Okamoto Hidetaka

Hono / SonikJavaScript

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

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

Okamoto Hidetaka
Home
Search
Bookmark