![key visual](/img/key_visual_bg.jpg)
![box](/img/boxNext.png)
![box](/img/boxVue.png)
![box](/img/boxReact.png)
![box](/img/boxOpen.png)
![box](/img/boxPrisma.png)
![box](/img/boxNuxt.png)
![box](/img/boxAspida.png)
![box](/img/boxExpress.png)
![box](/img/boxFastify.png)
![box](/img/boxMySQL.png)
セットアップ手順
GUI で環境構築を簡単に
Step 1
フロントエンドフレームワークを選択
![](img/next.png)
![](img/nuxt.png)
![](img/sapperIcon.png)
Step 2
バックエンドフレームワークを選択
![](img/fastify.png)
![](img/express.png)
Step 3
ORM を選択
![](img/prisma.png)
![](img/typeorm.png)
Step 4
データベースを選択
![](img/mysql.png)
![](img/postgres.png)
Step 5
CI を選択
![](img/jest.png)
![](img/githubactions.png)
Step 6
デプロイ先を選択
![](img/vercel.png)
![](img/netlify.png)
型駆動開発
API 型定義 server/api/users/index.ts
export type Methods = {get: {resBody: {id: numbername: 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 を用いてプロジェクト全体を静的型検査できます
![](img/communication.jpg)
API 型定義によってコントローラーと HTTP リクエストの型が強制されるので、HTTP 通信のテストは必要ありません。
![](img/speed.png)
型安全なフルスタック開発環境の構築が簡単なので、短期間で安全に製品を完成させることができます。