SvelteKit環境構築メモ

# bunを使用して最新バージョンでプロジェクト作成
$ bun create svelte@latest svelte-app

# 真っ新な環境が欲しいのでSkeletonで
  Welcome to SvelteKit!
│
◆  Which Svelte app template?
│  ○ SvelteKit demo app
│  ● Skeleton project (Barebones scaffolding for your new SvelteKit app)
│  ○ Library project

# TypeScriptは使う
  Add type checking with TypeScript?
│  ● Yes, using TypeScript syntax
│  ○ Yes, using JavaScript with JSDoc comments
│  ○ No

# 一旦何も入れない
# Svelte5だけ使いたいのでON
 Select additional options (use arrow keys/space bar)
│  ◻ Add ESLint for code linting
│  ◻ Add Prettier for code formatting
│  ◻ Add Playwright for browser testing
│  ◻ Add Vitest for unit testing
│  ◼ Try the Svelte 5 preview (unstable!)

$ cd svelte-app
# インストール
$ bun install
# 起動
$ bun run dev

"scripts": {
  "dev": "vite dev --open"
}

# インストール
$ bun add --dev --exact @biomejs/biome
# 設定ファイル作成
$ bunx biome init

  "overrides": [
    {
      "include": ["*.svelte"],
      "linter": {
        "rules": {
          "style": {
            "useConst": "off"
          }
        }
      }
    }
  ]

{
  "editor.defaultFormatter": "biomejs.biome",
  "editor.formatOnSave": true,
    "editor.codeActionsOnSave": {
    "quickfix.biome": "explicit",
    "source.organizeImports.biome": "explicit"
  }
}

# インストール
$ bun add -D tailwindcss postcss autoprefixer
# 設定ファイル作成
$ bun tailwindcss init -p

// 追加
content: ['./src/**/*.{html,js,svelte,ts}'],

@tailwind base;
@tailwind components;
@tailwind utilities;

<script lang="ts">
import '../app.css'
</script>

<h1 class="text-3xl font-bold underline">
  Hello world!
</h1>

# インストール
$ bunx  shadcn-svelte@latest init

◆  Which style would you like to use?
│  Default

◆  Which base color would you like to use?
│  ● Slate
│  ○ Gray
│  ○ Zinc
│  ○ Neutral
│  ○ Stone

◆  Where is your global CSS file? (this file will be overwritten)
│  src/app.css

◆  Where is your Tailwind config located? (this file will be overwritten)
│  tailwind.config.js

◆  Configure the import alias for components:
│  $lib/components

◆  Configure the import alias for utils:
│  $lib/utils

$ bunx shadcn-svelte@latest add button
 Ready to install components and dependencies?
│  ● Yes / ○ No

<script lang="ts">
import { Button } from '$lib/components/ui/button'
</script>

<Button>Click me</Button>

# インストール
$ bun add svelte-material-icons

<script lang="ts">
import Check from 'svelte-material-icons/Check.svelte'
</script>

<Check size="24" />

# インストール
$ bun add -D sveltekit-superforms zod

import { z } from 'zod'

export const loginSchema = z.object({
  email: z.string().email(),
  password: z.string(),
})

export type LoginSchema = typeof loginSchema

import { loginSchema } from '$lib/schemas/login'
import { superValidate } from 'sveltekit-superforms'
import { zod } from 'sveltekit-superforms/adapters'
import type { PageServerLoad } from './$types'

export const load: PageServerLoad = async () => {
  const form = await superValidate(zod(loginSchema))

  return { form }
}

<script lang="ts">
import Button from '$lib/components/ui/button/button.svelte'
import { Input } from '$lib/components/ui/input'
import { superForm } from 'sveltekit-superforms'
import type { PageData } from './$types'

let {
  data,
}: {
  data: PageData
} = $props()

const { form } = superForm(data.form)
</script>


<form method="POST">
  <Input type="email" name="email" placeholder="email" class="max-w-xs mb-4" bind:value={$form.email} />
  <Input type="password" name="password" placeholder="password" class="max-w-xs mb-4" bind:value={$form.password} />
  <Button type="submit">Submit</Button>
</form>

export const actions: Actions = {
  default: async (event) => {
    const form = await superValidate(event, zod(loginSchema))
    if (!form.valid) {
      return fail(400, { form })
    }

    // ログイン処理

    return message(form, 'ログインしました')
  },
}

const { form, message } = superForm(data.form)

{#if $message}
  <div>{$message}</div>
{/if}

// 8文字以上を追加
password: z.string().min(8),

const { form, errors, message } = superForm(data.form)

{#if $errors.password}
  <div>{ $errors.password }</div>
{/if}

# インストール
$ bun add -D sveltekit-flash-message
# トーストのコンポーネントも合わせて入れておく
$ bunx shadcn-svelte@latest add sonner

namespace App {
  interface PageData {
    flash?: { type: 'success' | 'error'; message: string }
  }
}

export { load } from 'sveltekit-flash-message/server'

<script lang="ts">
import { page } from '$app/stores'
import { Toaster } from '$lib/components/ui/sonner'
import { toast } from 'svelte-sonner'
import { getFlash } from 'sveltekit-flash-message'

const flash = getFlash(page)
$effect(() => {
  if (!$flash) return
  switch ($flash.type) {
    case 'success':
      toast.success($flash.message)
      break
    case 'error':
      toast.error($flash.message)
      break
    default:
      break
  }
})
</script>

<Toaster position="top-right" />

import { redirect } from 'sveltekit-flash-message/server'

// 成功後、メッセージを表示してホームへリダイレクト
return redirect('/', { message: 'ログインしました', type: 'success' }, event)

import { fail } from '@sveltejs/kit'
import { setFlash } from 'sveltekit-flash-message/server'

  // 失敗後、メッセージを送信
  if (response.status !== 200) {
      setFlash({ message: 'ログインに失敗しました', type: 'error' }, event)
      return fail(400, { form })
    }
  }