Category: JavaScript

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

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

公開日: 2025/03/31

最終更新日: 2025/03/31

Hono / Sonik JavaScript LINE

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

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

公開日: 2025/03/19

最終更新日: 2025/03/19

Hono / Sonik JavaScript

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

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

公開日: 2025/03/10

最終更新日: 2025/03/10

Hono / Sonik JavaScript

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

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

公開日: 2025/03/07

最終更新日: 2025/03/07

Cloudflare Hono / Sonik JavaScript SaaS / FaaS

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

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

公開日: 2025/03/06

最終更新日: 2025/03/06

JavaScript Next.js React

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

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

公開日: 2025/02/24

最終更新日: 2025/02/24

JavaScript React

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

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

公開日: 2024/12/24

最終更新日: 2024/12/24

Hono / Sonik JavaScript

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

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

公開日: 2024/12/24

最終更新日: 2024/12/24

JavaScript React remix

GravatarとRemixでプロフィール画像や自己紹介文を集約管理する

この記事では、Gravatarを使用してプロフィール情報や画像を効率的に管理する方法が紹介されています。Gravatarに登録したデータをREST APIで取得したり、Remixアプリで利用する方法が解説されています。APIを活用した情報取得やプロフィール構築の手順が詳細に説明されており、新しい挑戦に向けた展望も示されています。Gravatarを活用することで情報管理や更新作業が容易になり、他のサイトへの切り替えも検討されています。

公開日: 2024/12/11

最終更新日: 2024/12/11

JavaScript Next.js React

Next.js のApp RouterでREST APIを作る時は、型定義にPromiseをお忘れなく

この記事では、Next.jsのApp Routerを使用してREST APIを作成する際のTypeScript型定義に関するTipsが紹介されています。パスパラメータを受け取るAPIを想定し、v15以降でのビルドエラー回避方法やコードの変更点が説明されています。Page RouterやRemixに慣れている人も戸惑うかもしれないが、理解すれば問題ない内容です。

公開日: 2024/12/06

最終更新日: 2024/12/06