認証もRPCもデプロイも、書くのは仕様だけ。フルスタックフレームワークWasp

はじめに

新しいWebアプリを作り始めるとき、最初の数日間を何に使っているか思い出してみてください。ReactとNode.jsのプロジェクトを別々にセットアップし、APIクライアントを書き、認証ライブラリを選定し、ORMを設定し、デプロイ環境を整える——肝心のアプリ本体に一行もたどり着かないまま、時間だけが溶けていく経験は誰にでもあるのではないでしょうか。

Waspは、この「配線作業」を仕様ファイル1枚に押し込めてしまうフルスタックフレームワークです。ルーティング、認証、クライアントとサーバーの通信、バックグラウンドジョブ、デプロイまでを宣言的に記述すると、残りのボイラープレートはWaspが生成してくれます。本記事では、Waspの特徴から実際のコードまでを順に見ていきます。

Waspとは

Wasp（Web Application Specification）は、React・Node.js・Prismaという定番スタックの上に「仕様言語」の層をかぶせたフルスタックフレームワークです。GitHubで18,000を超えるスターを集めており、2026年6月リリースのv0.24からは仕様ファイル自体もTypeScriptで書けるようになり、「100% TypeScript」なフレームワークへと進化しました。

よく「JavaScript界のRails」と紹介されますが、RailsのようにすべてをDSLで隠すわけではありません。アプリの構造だけをmain.wasp.tsに宣言し、実際のUIやビジネスロジックは普通のReactコンポーネントとNode.js関数として書く、という役割分担が特徴です。

主な特徴

宣言的な仕様ファイル - ルート、ページ、認証、ジョブなどをmain.wasp.tsに宣言するだけで、必要なコードをWaspが生成します
型安全なRPC - サーバー側の関数をクライアントから直接インポートして呼び出せ、引数も戻り値も完全に型付けされます
フルスタック認証が組み込み - メール、ユーザー名/パスワード、Google、GitHubなどの認証が数行の設定で有効になります
ロックインなし - 生成されるのは素のReact/Node.jsコードで、.wasp/ディレクトリで中身を確認でき、どこにでもデプロイできます
AIフレンドリーな設計 - アプリ構造が高レベルな仕様として1か所にまとまっているため、AIコーディングエージェントとの相性が良いことも公式に掲げられています

インストール

WaspのCLIはnpmでグローバルインストールします（macOS / Linux / WSLに対応、Node.jsとnpmが必要です）。

npm i -g @wasp.sh/wasp-cli@latest

インストールできたら、新しいプロジェクトを作成して起動します。

wasp new TodoApp -t minimal
cd TodoApp
wasp start

wasp startひとつでフロントエンドとバックエンドの両方が立ち上がり、http://localhost:3000でアプリが動きます。開発中に挙動がおかしくなったときはwasp cleanでリセットできます。

基本的な使い方

仕様ファイル（main.wasp.ts）

アプリの心臓部となるのがmain.wasp.tsです。v0.24以降はTypeScriptで記述でき、エディタの補完も効きます。

import { app, page, route } from "@wasp.sh/spec"
import { MainPage } from "./src/MainPage" with { type: "ref" }

export default app({
  name: "TodoApp",
  wasp: {
    version: "^0.24",
  },
  title: "TodoApp",
  spec: [
    route("RootRoute", "/", page(MainPage)),
  ],
})

with { type: "ref" }という見慣れないインポート構文は、「このファイルを実行するのではなく参照として扱う」というWaspの流儀です。ここで宣言したルートに対応するルーティング設定は、すべてWaspが裏側で生成します。

データモデル（schema.prisma）

データベースのモデルは、そのままPrismaのスキーマとして定義します。

model Task {
  id          Int     @id @default(autoincrement())
  description String
  isDone      Boolean @default(false)
}

Prismaをすでに使ったことがある方なら、新しく覚えることはほとんどありません。

QueryとAction：型安全なRPC

Waspのいちばんの気持ちよさは、クライアントとサーバーの通信にあります。サーバー側の関数をquery（読み取り）やaction（書き込み）として仕様に登録すると、クライアントから普通の関数のように呼び出せるのです。

まずサーバー側の実装です。

// src/queries.ts
import type { Task } from "wasp/entities"
import type { GetTasks } from "wasp/server/operations"

export const getTasks: GetTasks<void, Task[]> = async (args, context) => {
  return context.entities.Task.findMany({
    orderBy: { id: "asc" },
  })
}

これをmain.wasp.tsのspecに登録します。

query(getTasks, { entities: ["Task"] }),

するとReact側では、fetchもaxiosも書かずにこう呼び出せます。

// src/MainPage.tsx
import { getTasks, useQuery } from "wasp/client/operations"

export const MainPage = () => {
  const { data: tasks, isLoading, error } = useQuery(getTasks)

  if (isLoading) return <div>Loading...</div>
  if (error) return <div>Error: {error.message}</div>

  return (
    <ul>
      {tasks?.map((task) => (
        <li key={task.id}>
          {task.description} {task.isDone ? "✅" : ""}
        </li>
      ))}
    </ul>
  )
}

HTTPエンドポイントの定義、シリアライズ、キャッシュ管理はすべてWaspの仕事です。しかもentities: ["Task"]と宣言してあるおかげで、Taskを更新するActionが実行されると関連するQueryのキャッシュが自動で無効化され、画面が最新状態に更新されます。この「宣言に基づく自動キャッシュ管理」は、手作業でやると地味に大変な部分です。

実践的なユースケース

数行で有効になるフルスタック認証

SaaSを作るとき最初に立ちはだかるのが認証です。Waspではmain.wasp.tsに次を追加するだけで、サインアップ・ログイン・セッション管理が一式そろいます。

auth: {
  userEntity: "User",
  methods: {
    usernameAndPassword: {},
  },
  onAuthFailedRedirectTo: "/login",
},

Userモデルをschema.prismaに追加し、

model User {
  id    Int    @id @default(autoincrement())
  tasks Task[]
}

ログインページでは、用意されているコンポーネントをそのまま置けば完成です。

// src/LoginPage.tsx
import { LoginForm } from "wasp/client/auth"
import { Link } from "wasp/client/router"

export const LoginPage = () => (
  <div>
    <LoginForm />
    <br />
    <Link to="/signup">アカウントを作成する</Link>
  </div>
)