TypeScript（タイプスクリプト）

HonoのRPCモードを使えばOpenAPIやコード生成なしでtRPC同等の型安全フルスタック開発が実現できます。hcクライアント、InferRequestType、複数ルート統合まで網羅した2026年版完全ガイド。

Hono + Inertia + React の最小環境を Bun + Vite + TypeScript で30分以内に立ち上げる完全手順。プロジェクト構成、Hono サーバ＋Inertia アダプタ、React + Vite クライアント、ホットリロード、初回ページ表示までを実コマンドでガイドします。

2026年、Next.js 16とVercelを使ったWebサイト構築は、Turbopackによる400%高速化、React Server Components、v0 AI生成により劇的に進化しました。月額$20から始められる本格的なWeb開発環境の全貌を解説します。

Vercel Labs が公開した scriptc は、通常のTypeScriptをNode・V8を含まないネイティブ実行ファイルにコンパイルするツール。静的コンパイルと dynamic モードの3階層、公称の起動時間とバイナリサイズ、Bun/Deno/Node SEA との違いを整理します。

**TanStack Router**（[公式](https://tanstack.com/router/latest) / [GitHub](https://github.com/TanStack/router)）は、React 中心の **型安全（fully type-safe）client-first ルーター + フルスタックフレームワーク**。ルートパス・パラメータ・検索パラメータ・ローダー・`<Link>` の props まで **TypeScript コンパイラで型検査** され、React Router を上回る開発体験を実現。**TanStack Start** は SSR 対応のフルスタック版で **2026年に v1 stable 到達**。 **主要機能**: **File-based routing** の自動生成、**Zod による search params 検証**、**構造的共有（structural sharing）**、**ルートローダー**（並列実行・キャッシュ・intent-based preload）、**automatic + manual `.lazy.tsx` code splitting**、専用 devtools、フォーム / エラー境界 first-class 対応。 **Tailwind CSS 統合**: 2026 年時点で **Tailwind CSS v4 + `@tailwindcss/vite` プラグイン + `@import 'tailwindcss'`** の組み合わせが標準。設定ファイル不要、`src/styles/app.css` に直接 `@import` で完了。**`npx @tanstack/cli create --router-only`** でセットアップウィザードから TypeScript + Tailwind + toolchain 一括構築が可能。 **Vite との組み合わせ**: `@tailwindcss/vite` プラグイン + `@tanstack/router-vite-plugin` で **file-based routes を自動生成**、HMR も動作。**Vite 5+ / React 18-19** で最新版が推奨。 **代表的スターター**: [d7omdev/vite-react-tanstackRouter-tailwind-starter](https://github.com/d7omdev/vite-react-tanstackRouter-tailwind-starter)、[mattiaz9/vite-react-tanstack-tailwind-shadcn-starter](https://github.com/mattiaz9/vite-react-tanstack-tailwind-shadcn-starter)（**shadcn/ui + TanStack Router + Query + Tailwind** のフル SaaS スターター）、[ZeroaNinea/React-Vite-i18next--tanstack-react-router-Tailwind-Example](https://github.com/ZeroaNinea/React-Vite-i18next--tanstack-react-router-Tailwind-Example)（**i18next 多言語 + Tailwind** 統合例）。 **React Router との差別化**: React Router は runtime に依存、TanStack は **compile time で型検査** + file-based routing + Zod 検索パラメータ + ルートローダー + 専用 devtools と、機能面で一段先。**Next.js の App Router との比較** では、TanStack Start は **より client-first・型安全性重視**、Next.js は **SSR / RSC 中心**。 **位置付け**: [Cloudflare Durable Objects](../columns/cloudflare-durable-objects-2026-07)・[Flue Framework](../columns/flue-framework-astro-team-agent-2026-07)・[Apple Container](../columns/apple-container-macos-linux-runtime-2026-06) と並ぶ「**2026 年の Web 開発モダンスタック**」を構成する主要ピース。

**Flue Framework**（[公式](https://flueframework.com/) / [1.0 Beta 発表ブログ](https://flueframework.com/blog/flue-1-0-beta/) / [Cloudflare 提携ブログ](https://blog.cloudflare.com/agents-platform-flue-sdk/)）は、**Astro チーム** が2026年6月17日週に **1.0 Beta として公開した TypeScript の AI エージェント・ハーネスフレームワーク**。**Write once, deploy anywhere, use any LLM** をコンセプトに、Slack・GitHub・Linear・Discord・Notion・Stripe・Shopify・Teams・Telegram・Twilio・WhatsApp など **25+ のチャネル連携** を最初から搭載しています。 **3層構成**: - **Framework layer**: **Flue**（プロジェクト構造・規約・統合・CLI） - **Harness layer**: **Pi**（agentic loop、tool 呼出、context 管理） - **Runtime layer**: **[Cloudflare Agents SDK](../columns/cloudflare-durable-objects-2026-07)**（compute・state・storage） **Cloudflare 統合の核心**: Flue を Cloudflare にデプロイすると **各エージェントが Durable Object になる**（[前作コラム参照](../columns/cloudflare-durable-objects-2026-07)）。`runFiber()` / `stash()` / `onFiberRecovered()` で **SQLite checkpoint** を取り、障害後の自動再開が可能。**`@cloudflare/codemode`**（Dynamic Workers で agent-generated TypeScript を安全実行、**10ms 未満起動・$0.002/load**）、**`@cloudflare/shell`**（SQLite バック virtual filesystem）、**`@cloudflare/dynamic-workflows`**（永続化 + retry + 外部承認対応の workflow）を組み合わせた実装。 **5つのコアプリミティブ**: 1. **Agents** — 自律的な context-aware エージェント 2. **Workflows** — 決定論的ステップ実行 3. **Sandboxes** — 安全なツール実行環境 4. **Channels** — Slack / GitHub / Linear / Discord / Notion / Stripe / Shopify 等 25+ 5. **Durable Streams** — event 転送（受信済み work は消えない） **その他機能**: **`@flue/react`**（`useFlueAgent` / `useFlueWorkflow` フックでフロントエンドから直結）、**`@flue/sdk`**（デプロイ済みエージェントへのクライアント）、**`flue add`**（shadcn 風の統合スキャフォールド）、**Subagents**（役割分担）、**Tools & Skills**（型付き API アクション + 再利用可能な expertise）、**[MCP](../columns/agmsg-cross-agent-messaging-cli-ai-2026-06) 統合**、**Observability**（OpenTelemetry / Braintrust / Sentry）。 **マルチデプロイ**: Cloudflare Workers / Node.js / AWS / Docker / Railway / Render / Vercel / Fly / GitLab CI / SST。**DB**: PostgreSQL / Supabase / MongoDB / MySQL / Redis。 **背景**: Astro（[astro.build](https://astro.build/) の Web フレームワーク）チームが **自社の GitHub リポジトリ内で AI ワークフローを自動化するために社内利用していたエンジン** を汎用フレームワーク化。Astro チームは **DX（Developer Experience）設計で定評** があり、CLI と統合の洗練度が持ち味。 **位置付け**: Cloudflare Agents SDK 上の **最初の主要な agent framework**、[Claude Code](../columns/claude-code-agent-view-parallel-orchestration-2026) や他の coding agent と同じ **harness-driven architecture**、そして [LangChain / LlamaIndex / AutoGen / CrewAI / Mastra](../columns/agmsg-cross-agent-messaging-cli-ai-2026-06) の系列にも属さない **フレームワーク層に特化した「軽さ + 統合の広さ」** で差別化。バグトリアージエージェントを **25 行以下で実装** できる例が公式デモ。