メインコンテンツまでスキップ
key visualboxboxboxboxboxboxboxboxboxbox

フルスタック開発環境を

コマンド一発で

必要なのは TypeScript だけ

セットアップ手順

GUI で環境構築を簡単に

Step 1

フロントエンドフレームワークを選択

Step 2

バックエンドフレームワークを選択

Step 3

ORM を選択

Step 4

データベースを選択

Step 5

CI を選択

Step 6

デプロイ先を選択

型駆動開発

API 型定義 server/api/users/index.ts

export type Methods = {
get: {
resBody: {
id: number;
name: string;
};
};
};

バックエンドでエラーを修正 server/api/users/controller.ts

import { defineController } from './$relay';
export default defineController(() => ({
get: () => ({
status: 200,
body: { id: 0, name: 'mario' },
}),
}));

ページから API リクエスト pages/index.tsx

import useAspidaSWR from '@aspida/swr';
import { apiClient } from '~/utils/apiClient';
const Home = () => {
const { data: user } = useAspidaSWR(apiClient.users);
return <div>{user.name}</div>;
};
export default Home;

TypeScript を用いてプロジェクト全体を静的型検査できます

API 型定義によってコントローラーと HTTP リクエストの型が強制されるので、HTTP 通信のテストは必要ありません。

型安全なフルスタック開発環境の構築が簡単なので、短期間で安全に製品を完成させることができます。

TypeScript 製で最速のフレームワーク