Categories
AlgoliaSaaS / FaaSTypeScript
TypeScriptでAlgoliaの検索結果を扱う際に発生する型エラーの原因と、Type Guardを使った安全な実装方法について解説します。複数インデックス検索に対応した型定義の理解がカギです。
JavaScriptSaaS / FaaSStripeTypeScript
Stripe Appsの拡張UI開発において、fetchStripeSignatureを活用した署名検証の実装方法と、APIリクエストを安全に行うための共通化ヘルパー関数の設計について解説します。
remix
Remix開発において非推奨となった`json()`関数から標準Web APIの`Response.json()`への移行方法と、その背景にあるWeb標準重視の設計思想について解説します。
TypeScript
TypeScriptでGoogle Calendarに終日イベントを正しく追加するURLの実装方法を解説。終日イベントと時間指定イベントの違いに注目し、日付フォーマットや終了日の設定における重要なポイントを紹介します。
CloudflareLLMNext.js
Next.jsとVercel AI SDKを使って、Cloudflare Workers AI上で動作する生成AIチャットアプリを実装する方法を解説。プロジェクト設定からストリーミングレスポンス対応、チャットUIの構築までの手順を紹介。
CloudflareSaaS / FaaS
Cloudflare PagesとVercel OGを組み合わせて、エッジでリアルタイムにOGP画像を生成する方法を紹介。SNSシェア向けの魅力的なOGP画像を、ページごとに手動作成する手間を省きながら実装できます。TypeScriptとReactで実装された実用的な例を解説しています。
AWSHono / SonikLINE
今回はAWS CDK、LINE Messaging API、Honoを組み合わせて、効率的で拡張性の高いLINEボットを構築する方法を紹介。AWS LambdaにHonoフレームワークを導入し、LINE Webhookを処理してユーザーからのメッセージに自動返信する機能を実装します。
JavaScriptLINESaaS / FaaSTypeScript
この記事では、LINEのメッセージングAPIでチャットのローディングアニメーションを表示する方法をTypeScriptで実装しています。秒数を型で制限し、FetchでAPIを直接呼び出す方法を紹介。関数化した実装例も掲載されており、チャンネルアクセストークン、チャットID、秒数を指定するだけで簡単にローディングアニメーションを表示できます。
ClerkSaaS / FaaSStripe
この記事では、ClerkとStripeを連携させて無料トライアル付きのサブスクリプションシステムを実装する方法を解説しています。ユーザー新規登録時にStripeで顧客を作成し無料プランを付与、退会時に顧客情報を削除するなど、認証と課金を一元管理できます。Webhookの署名検証やユーザーメタデータの活用など、実装のポイントも紹介されています。
CloudflareHono / Sonik
Cloudflare Pages、React、Hono を組み合わせたサーバーレスフルスタック開発の手法。単一リポジトリで管理でき、git push一発でデプロイ。Cloudflareのエッジネットワークを活用した高速応答と、Vite、TypeScriptによる快適な開発体験。