脱React宣言！初心者のためのSvelte×daisyUI入門

はじめに

みなさんこんにちは、プロダクト開発部の勝田です。普段業務ではOPTiM Bizでの管理サイトの問い合わせ対応等担当しています。

本記事は、OPTiM TECH BLOG Advent Calendar 2025 Day 24 の記事です！

本記事では、個人的に使用しているSvelteとdaisyUIの組み合わせによってモダンなフロントエンド開発を効率化する方法について解説します。特に開発体験の向上やコードの簡潔性に焦点を当て、実際のセットアップ手順まで詳しく説明します。

はじめに
Svelteとは
daisyUIとは
Svelte x daisyUIを始めよう！
感想
おわりに

Svelteとは

Svelte(スヴェルト)はJavaScriptのフレームワークでWebアプリ開発にて使用されます。特徴としてSvelteは独自コンパイラを使用して、Webにおいて最小限のHTML, CSS, JavaScriptを用いるのでバンドルサイズが小さく、仮想DOMを使用しないのでReactやVueと比較して軽量に動作します。

また他フレームワークと比べて頭一つ抜けているのは、書きやすく、読みやすいことです。例えば、同じTodoリストコンポーネントを作成する場合、以下のように、空白・タブ・改行を除いた文字数で比較したとき、コード量削減が可能です。

React → Svelte: 133文字(-15.5%)
Vue → Svelte: 92文字(-11.3%)

特にUI(HTML)の部分でコード量の差が大きいのでUIに特化したフレームワークといえます。

Svelte: 723文字	React(JSX): 856文字	Vue: 815文字

Svelteの特徴として、独自コンパイラによる最適化とReactで必要な状態管理ライブラリが不要な点から、開発体験が高いフロントエンド開発を行うことができます。

特にSvelteは以下のような利点があります。

コンパイラによる軽量な状態管理: 複雑な依存配列やフックのルールが不要
バンドルサイズの最適化: 使用されない機能は自動的に除外
学習コストの低さ: HTMLに近い書き方で直感的

そのため、小規模から中規模のプロジェクトや、パフォーマンスを重視するWebアプリケーションに適していると言えます。

とはいえReactと比較した時コミュニティプラットフォームの成熟差では勝てません。公式ドキュメントの多くはコミュニティによって日本語に翻訳されていますが、最新の情報や詳細な解説は英語が主となる場面もまだ多いのが現状です。そのため、この記事を通してSvelteの魅力を伝え、日本での認知度向上に貢献できれば幸いです。

svelte.dev

svelte.jp

daisyUIとは

daisyUI(デイジーユーアイ)はCSSフレームワークであるTailwind CSSのプラグインです。 Tailwind CSSについて補足するとTailwind CSSは500以上あるutility classを使用して独自にデザインをし、コンポーネントを構築します。具体的な方法としてスタイルしたい要素に対して、クラス名を複数組み合わせてデザインしていきます。そのためTailwind CSSのデメリットとして学習コストがかかることと可読性が下がることが挙げられます。

ですがdaisyUIを使えば、Tailwind CSSより少ないコードで同じUIを作成することができます。 daisyUIは65コンポーネント&35テーマを用意しており、簡単にUIを作成でき、デザインに集中することができます。

例えばTailwind CSSを使ってボタンを作成しようとした場合、このようにクラス名が長くなってしまっています。

<button class="px-4 py-2 font-bold text-white bg-blue-500 rounded hover:bg-blue-700">
  ボタン
</button>

ですがdaisyUIを使用するとこのように非常にすっきりとしていて簡単に作成することができます。

<button class="btn btn-primary">
  ボタン
</button>

daisyui.com

Svelte x daisyUIを始めよう！

いかがでしょうか、興味を持っていただけたでしょうか？ Svelte x daisyUIの技術を学ぶことでUI/UXの開発体験が高い、モダンなフロントエンドの開発を行えます。興味を持っていただけたら実際に触って、選択肢に入れていただけたらと思います。初心者以外の方は公式ドキュメントを見た方が早いと思いますが、ここではハードルを下げたいので、Svelte/SvelteKitでdaisyUIが使えるようにする流れを説明します。

備考: Tailwind CSS(daisyUI)以外の選択肢として、Svelte Material UIやMelt UI、Flowbiteを使用するのも良さそうです。

svelte.dev

daisyui.com

始める前に確認

Node.js 20以上がインストールされている（node -vで確認）
npmが使える（npm -vで確認）
ターミナル/コマンドプロンプトが開ける
テキストエディタ（VS Codeなど）が使える

Svelte セットアップ

# 任意のディレクトリに移動し、コマンドを実行

npx sv create

# yを入力

Need to install the following packages:
sv@0.10.5
Ok to proceed? (y) y

# Enterを入力
# 特定のディレクトリで作成した場合はパスを変更してください。

┌  Welcome to the Svelte CLI! (v0.10.5)
│
◆  Where would you like your project to be created?
│    (hit Enter to use './')
└

# Enterを入力
# 今回はSvelteKitのセットアップになります。Svelteは基本的にSvelteKitと合わせて使います。

◆  Which template would you like?
│  ● SvelteKit minimal (barebones scaffolding for your new app)
│  ○ SvelteKit demo
│  ○ Svelte library
└

# Enterを入力
# TypeScriptのTypeチェックを追加します。JavaScriptで書きたい方は2つ目を選択してください。

◆  Add type checking with TypeScript?
│  ● Yes, using TypeScript syntax
│  ○ Yes, using JavaScript with JSDoc comments
│  ○ No
└

# Enterを入力
# ここではライブラリのインストールも一緒に行なってくれます。
# Tailwind CSSはdaisyUIをインストールする時にインストールするので無視してください。

◆  What would you like to add to your project? (use arrow keys / space bar)
│  ◻ prettier
│  ◻ eslint
│  ◻ vitest
│  ◻ playwright
│  ◻ tailwindcss (css framework - https://tailwindcss.com)
│  ◻ sveltekit-adapter
│  ◻ devtools-json
│  ◻ drizzle
│  ◻ lucia
│  ◻ mdsvex
│  ◻ paraglide
│  ◻ storybook
│  ◻ mcp
└

# npmを選択して`Enter`
# npmではないパッケージマネージャをお使いの方はそれぞれあったものを選択してください。

◆  Which package manager do you want to install dependencies with?
│  ○ None
│  ● npm
│  ○ yarn
│  ○ pnpm
│  ○ bun
│  ○ deno
└

# 下記のようになっていればSvelteKitのセットアップは完了です。🎉

◆  Successfully installed dependencies with npm
│
◇  What's next? ───────────────────────────────╮
│                                              │
│  📁 Project steps                            │
│                                              │
│    1: npm run dev -- --open                  │
│                                              │
│  To close the dev server, hit Ctrl-C         │
│                                              │
│  Stuck? Visit us at https://svelte.dev/chat  │
│                                              │
├──────────────────────────────────────────────╯
│
└  You're all set!

daisyUIのセットアップ

前提としてSvelteKitが入った状態を想定しています。

# ターミナルでコマンドを実行

npm install tailwindcss@latest @tailwindcss/vite@latest daisyui@latest

// vite.config.jsを編集

import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vite';
import tailwindcss from "@tailwindcss/vite";

export default defineConfig({
    plugins: [sveltekit(), tailwindcss()],
});

/* src/app.cssを編集(ない方は新規作成してください) */

@import "tailwindcss";
@plugin "daisyui";

<!-- src/routes/+layout.svelteファイルを作成し、CSSをインポートします -->

<script>
  import "../app.css";
</script>

<slot />

<!-- src/routes/+page.svelteを編集してボタンを表示します-->

<button class="btn">button</button>

# 開発サーバーを起動する

npm run dev

# Local: に表示されているurlにアクセスして、ボタンコンポーネントが表示されていれば
# Svelte x daisyUIのセットアップ完了です🎉

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

感想

お疲れ様でした。セットアップできましたか？

Svelte x daisyUIを使ってみての感想ですが、SvelteがReactとVueと比べ、UIフレームワークとして完成度が高く、 daisyUIがUIを作成するハードルを下げているのでUIを作るのに特化した技術スタックだと感じました。この技術スタックを使うと、Reactと比較して書くコード量が少ないので個人開発や簡単なサービスの開発がより簡単にできると思いました。

Svelteについては、HTML、CSS、JSがまとまっていて自分が理想とするフロントエンドの書き方に近く、とても書きやすいと感じます。またdaisyUIはTailwind CSSが持つクラス名が長くなる問題を解決しつつ、Tailwind CSSの知見をそのまま使えることが強みだと思います。私自身UI/UXを考えるのが好きということもあり、この技術スタックは私によく合っていると思いました。

おわりに

オプティムは、AIやIoTなどの最先端技術で、様々な業界の課題解決に挑戦しています。こうした取り組みに興味を持たれた方は、ぜひ下記の採用ページをご覧ください。 www.optim.co.jp

OPTiM TECH BLOG

OPTiMについて

エンジニア募集中