おすすめライブラリ

SvelteKitでよく使われる便利なライブラリ

ライブラリとは？

日常での例え：料理の「素」

全部自分で作る

カレーを最初から作る
→ スパイス調合から...大変

ライブラリを使う

カレールーを使う
→ 誰でも美味しくできる

なぜライブラリを使う？

車輪の再発明を避ける（すでに誰かが作ったものを活用）
バグが少ない（多くの人がテスト済み）
開発時間を短縮できる
セキュリティが考慮されている（特に認証系）

フォーム処理

📝

Superforms

フォーム処理の決定版

バリデーション、エラー処理、ローディング状態など、フォームに必要な機能がすべて揃っています。

バリデーション Zod対応 TypeScript

Superforms の使い方

Zodでバリデーション

typescript

// インストール
npm install sveltekit-superforms zod

// src/routes/contact/+page.server.ts
import { z } from 'zod';
import { superValidate, fail } from 'sveltekit-superforms';
import { zod } from 'sveltekit-superforms/adapters';

// バリデーションスキーマ
const schema = z.object({
  name: z.string().min(1, '名前は必須です'),
  email: z.string().email('正しいメールアドレスを入力してください'),
  message: z.string().min(10, '10文字以上入力してください')
});

export const load = async () => {
  const form = await superValidate(zod(schema));
  return { form };
};

export const actions = {
  default: async ({ request }) => {
    const form = await superValidate(request, zod(schema));

    if (!form.valid) {
      return fail(400, { form });
    }

    // 送信処理...
    return { form };
  }
};

プレビュー

// Zodで型安全なバリデーション
// エラーメッセージも日本語で設定可能

Superforms のフォーム側

自動エラー表示

svelte

<!-- src/routes/contact/+page.svelte -->
<script>
  import { superForm } from 'sveltekit-superforms';

  let { data } = $props();

  const { form, errors, enhance, submitting } = superForm(data.form);
</script>

<form method="POST" use:enhance>
  <label>
    名前
    <input name="name" bind:value={$form.name} />
    {#if $errors.name}
      <span class="error">{$errors.name}</span>
    {/if}
  </label>

  <label>
    メール
    <input name="email" type="email" bind:value={$form.email} />
    {#if $errors.email}
      <span class="error">{$errors.email}</span>
    {/if}
  </label>

  <label>
    メッセージ
    <textarea name="message" bind:value={$form.message}></textarea>
    {#if $errors.message}
      <span class="error">{$errors.message}</span>
    {/if}
  </label>

  <button disabled={$submitting}>
    {$submitting ? '送信中...' : '送信'}
  </button>
</form>

プレビュー

認証（ログイン）

🔐

Lucia

シンプルで柔軟な認証ライブラリ

セッション管理、OAuth（Google/GitHubログイン）、パスワード認証など。軽量で自由度が高い。

セッション管理 OAuth対応軽量

🛡️

Auth.js (NextAuth)

多機能な認証ソリューション

多くのOAuthプロバイダーに対応。Next.jsで有名だがSvelteKitでも使用可能。

50+プロバイダー JWT/Session

Lucia の基本

セッション管理

typescript

// インストール
npm install lucia

// src/lib/server/auth.ts
import { Lucia } from 'lucia';
import { dev } from '$app/environment';

const adapter = /* データベースアダプター */;

export const lucia = new Lucia(adapter, {
  sessionCookie: {
    attributes: {
      secure: !dev
    }
  }
});

// src/hooks.server.ts
import { lucia } from '$lib/server/auth';

export const handle = async ({ event, resolve }) => {
  const sessionId = event.cookies.get(lucia.sessionCookieName);

  if (!sessionId) {
    event.locals.user = null;
    event.locals.session = null;
    return resolve(event);
  }

  const { session, user } = await lucia.validateSession(sessionId);

  if (session?.fresh) {
    const cookie = lucia.createSessionCookie(session.id);
    event.cookies.set(cookie.name, cookie.value, cookie.attributes);
  }

  event.locals.user = user;
  event.locals.session = session;

  return resolve(event);
};

プレビュー

// Luciaはセキュリティを考慮した
// セッション管理を提供

データベース（ORM）

ORMとは？

Object-Relational Mapping：データベースをJavaScriptのオブジェクトのように操作できるツール。
SQLを書かなくても、db.user.findMany() のような直感的なコードでデータを取得できます。

💧

Drizzle ORM

軽量・高速

TypeScript完全対応。SQLに近い書き方で学習コストが低い。

軽量高速

🔷

Prisma

人気No.1

スキーマファーストで直感的。豊富なドキュメントとコミュニティ。

人気ドキュメント充実

Drizzle ORM

型安全なデータベース操作

typescript

// インストール
npm install drizzle-orm better-sqlite3
npm install -D drizzle-kit @types/better-sqlite3

// src/lib/server/db/schema.ts
import { sqliteTable, text, integer } from 'drizzle-orm/sqlite-core';

export const users = sqliteTable('users', {
  id: integer('id').primaryKey({ autoIncrement: true }),
  name: text('name').notNull(),
  email: text('email').notNull().unique(),
  createdAt: integer('created_at', { mode: 'timestamp' })
    .notNull()
    .default(sql`CURRENT_TIMESTAMP`)
});

// src/lib/server/db/index.ts
import { drizzle } from 'drizzle-orm/better-sqlite3';
import Database from 'better-sqlite3';

const sqlite = new Database('sqlite.db');
export const db = drizzle(sqlite);

// 使い方
import { db } from '$lib/server/db';
import { users } from '$lib/server/db/schema';
import { eq } from 'drizzle-orm';

// 全ユーザー取得
const allUsers = db.select().from(users).all();

// 条件で検索
const user = db.select().from(users).where(eq(users.id, 1)).get();

// 新規作成
db.insert(users).values({ name: '田中', email: 'tanaka@example.com' }).run();

プレビュー

db.select()
db.insert()
db.update()
db.delete()

Prisma

スキーマファーストORM

typescript

// インストール
npm install prisma @prisma/client
npx prisma init

// prisma/schema.prisma
generator client {
  provider = "prisma-client-js"
}

datasource db {
  provider = "sqlite"
  url      = "file:./dev.db"
}

model User {
  id        Int      @id @default(autoincrement())
  name      String
  email     String   @unique
  posts     Post[]
  createdAt DateTime @default(now())
}

model Post {
  id        Int      @id @default(autoincrement())
  title     String
  content   String?
  author    User     @relation(fields: [authorId], references: [id])
  authorId  Int
}

// マイグレーション実行
npx prisma migrate dev

// 使い方
import { PrismaClient } from '@prisma/client';
const prisma = new PrismaClient();

// 全ユーザー取得
const users = await prisma.user.findMany();

// 関連データも一緒に取得
const usersWithPosts = await prisma.user.findMany({
  include: { posts: true }
});

// 新規作成
await prisma.user.create({
  data: { name: '田中', email: 'tanaka@example.com' }
});

プレビュー

prisma.user.findMany()
prisma.user.create()
prisma.user.update()
prisma.user.delete()

UIコンポーネント

🎨

shadcn-svelte

美しいUIコンポーネント

Radix UIベース。コピペでカスタマイズ可能なコンポーネント集。

npx shadcn-svelte@latest init

🧩

Bits UI

ヘッドレスUIコンポーネント

スタイルなしのアクセシブルなコンポーネント。自由にデザイン可能。

npm install bits-ui

🍞

svelte-sonner

トースト通知

美しいトースト通知。成功・エラー・警告などの表示に。

npm install svelte-sonner

📊

Layerchart

グラフ・チャート

Svelte向けのチャートライブラリ。棒グラフ、折れ線など。

npm install layerchart

svelte-sonner の使い方

トースト通知

svelte

// インストール
npm install svelte-sonner

// src/routes/+layout.svelte
<script>
  import { Toaster } from 'svelte-sonner';
  let { children } = $props();
</script>

<Toaster richColors position="top-right" />
{@render children()}

// 使う側
<script>
  import { toast } from 'svelte-sonner';

  function handleSubmit() {
    // 処理...

    // 成功
    toast.success('保存しました！');

    // エラー
    toast.error('エラーが発生しました');

    // 情報
    toast.info('新しいメッセージがあります');

    // ローディング付き
    toast.promise(saveData(), {
      loading: '保存中...',
      success: '保存完了！',
      error: '保存に失敗しました'
    });
  }
</script>

<button onclick={handleSubmit}>保存</button>

プレビュー

✓保存しました！

✕エラーが発生しました

ユーティリティ

Zod

型安全なバリデーション

npm install zod

date-fns

日付操作ライブラリ

npm install date-fns

clsx

条件付きクラス名

npm install clsx

clsx の使い方

条件でクラスを切り替え

svelte

<script>
  import clsx from 'clsx';

  let { variant = 'primary', disabled = false } = $props();

  // 条件に応じてクラスを組み合わせ
  const buttonClass = clsx(
    'px-4 py-2 rounded-lg font-medium',  // 常に適用
    {
      'bg-blue-600 text-white': variant === 'primary',
      'bg-gray-200 text-gray-800': variant === 'secondary',
      'bg-red-600 text-white': variant === 'danger',
      'opacity-50 cursor-not-allowed': disabled
    }
  );
</script>

<button class={buttonClass} {disabled}>
  ボタン
</button>

プレビュー

おすすめライブラリ

ライブラリとは？

フォーム処理

Superforms

Superforms の使い方

Superforms のフォーム側

認証（ログイン）

Lucia

Auth.js (NextAuth)

Lucia の基本

データベース（ORM）

Drizzle ORM

Prisma

Drizzle ORM

Prisma

UIコンポーネント

shadcn-svelte

Bits UI

svelte-sonner

Layerchart

svelte-sonner の使い方

ユーティリティ

Zod

date-fns

clsx

clsx の使い方

おすすめの組み合わせ