React Native
React Native + Expo + Metro + ネイティブ実装の完全解説
React Nativeの裏側で何が起きているかを Metro・JSI・Codegen・Expoの仕組みから、Expo SDKでカバーできない領域のネイティブ実装まで一気通貫で解説します。
Back to Home
Blog
Technical blog posts about web development, AI integration, and modern frontend technologies.
Topics
Timeline
AWS
Amazon Route 53で取得したドメインをCloudFrontで使う方法
Amazon Route 53で取得したドメインをCloudFrontのカスタムドメインとして設定する手順を解説します。ACM証明書の発行、Route 53のA/AAAAエイリアスレコード作成、メインドメインとサブドメインを別ディストリビューションに割り当てる構成まで扱います。
AI
AIコーディングエージェント前提でのスマホアプリ開発：ネイティブ vs クロスプラットフォーム
Claude Code・GitHub Copilot・Cursorなどのエージェントを主力に使う前提で、ネイティブ（Swift/Kotlin）・Flutter・React Nativeを比較。ハイブリッド実装の現実とAIとの相性を検証する。
Three.js
STELLAR EPOCH: APHELION — 無料で遊べるブラウザ宇宙クリッカーゲーム
無料でブラウザ上でプレイできる宇宙拡張型ゲーム「STELLAR EPOCH: APHELION」。インストール不要、モバイル端末でもPCでもプレイ可能。ダイナミックなイベントとリアルなエンディングが楽しめます。
OpenAI
OpenAI API：Responses API と Structured Outputs の仕様と実装ガイド
OpenAI Responses APIと構造化出力に関する2025年版ガイド。サーバーサイドの状態管理、組み込みのMCPツール、モデル出力の100%スキーマ準拠。
WebLLM
ブラウザでLLMが動く時代——WebLLMを完全理解する
WebLLMガイド：WebGPU、WebAssembly、Web Workersを使用してブラウザ上でLLMを実行する方法。アーキテクチャ、ベンチマーク、サポートされるモデル、実装について解説します。
draw.io
GitHub Copilot×drawio MCPでSAMテンプレートからAWS構成図を自動生成してみた
draw.io MCPサーバーとVS CodeのDraw.io統合拡張機能を使用して、SAMテンプレートからAWSアーキテクチャ図を生成するための実践的なガイド。
Spec-Driven Development
仕様駆動開発(Spec-Driven Development: SDD)環境の比較: SpecKit vs Kiro
Comparing two SDD approaches: VSCode + GitHub Copilot + SpecKit vs Kiro IDE. Covers setup, workflows, generated documents, and use-case recommendations.
GitHub Actions
GitHub ActionsからAWSへOIDC認証でデプロイする方法
GitHub ActionsとAWS間のOIDC認証を設定します。IAM IDプロバイダー、信頼ポリシー、S3、ECS、SAM向けのセキュアなCI/CDパイプラインについて解説します。
React
URL共有できる動画チェーンプレイヤーをVite + Reactで作った（状態同期 / i18n / AWSデプロイ）
Video Chain Player：動画セグメントをつなげてURLで共有。Vite + React 18を使用し、URL状態同期、i18n、OIDCによるAWSデプロイまで解説します。
GitHub Copilot
VS CodeにおけるGitHub Copilotカスタマイズ
VS Code での GitHub Copilot のカスタマイズ: カスタム指示、プロンプト ファイル、カスタム エージェント、エージェント スキル、および MCP サーバーとの統合を実践的なコード例とともに解説します。
AI
VSCodeとBlenderをMCPで連携させてAI 3Dモデリング環境を構築する
MCP経由でVSCodeとBlenderを使用してAI 3Dモデリングをセットアップします。uvをインストールし、MCPサーバーを設定し、Blenderアドオンを追加し、自然言語を使用してBlenderを制御します。
Next.js
Own Info App をリリースしました — Next.js(SSG)×S3×CloudFrontでつくる最小構成アプリ
S3とCloudFront上で動作する、多言語対応のNext.js 15 SSGアプリ。ネットワーク/デバイス情報の表示、コピー/共有機能、CloudFront URL書き換え機能、GitHub Actions CI/CDパイプラインを備えています。
Next.js
Next.js × Zustand でステート管理をリファクタリングする
Next.js 15 状態管理のリファクタリングと Zustand: スライス パターン、境界付きストア、セッション永続化、TTL キャッシュ、および再試行メカニズム。
Next.js
Next.js App Router + 静的エクスポートで実現する多言語対応アーキテクチャ
Next.js 15 多言語静的エクスポートアーキテクチャ。i18n、SSG、クライアントサイド言語検出を使用して、最適なUX を実現します。