SvelteKitの構築と、SkeletonUI実装とテーマについて

# はじめに

`SvelteKit`での開発をはじめ、
どのUIコンポーネントライブラリを使おうか悩んだところ、
`Skeleton`を発見。

面白そうだし使ってみることに。

せっかくなので、SvelteKitの導入から書いていきます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2985550/c1e5fe30-c97e-dc3c-5be6-7901e5eca46e.png)


# 環境

* node.js v18.12.1
* npm 

# 導入方法

1. `SvelteKit`構築

    ```bash
    $ npm create svelte@latest
    Need to install the following packages:
      create-svelte@2.0.0-next.198
    Ok to proceed? (y) y
    
    create-svelte version 2.0.0-next.198
    
    Welcome to SvelteKit!
    
    This is release candidate software; expect bugs and missing features.
    
    Problems? Open an issue on https://github.com/sveltejs/kit/issues if none exists already.
    
    ✔ Where should we create your project?
      (leave blank to use current directory) … 
    ✔ Which Svelte app template? › SvelteKit demo app
    ✔ Add type checking with TypeScript? › Yes, using TypeScript syntax
    ✔ Add ESLint for code linting? … No / Yes ›  No
    ✔ Add Prettier for code formatting? … No / Yes ›  No
    ✔ Add Playwright for browser testing? … No / Yes ›  No
    ✔ Add Vitest for unit testing? … No / Yes ›  No
    
    $ npm install
    ```

1. localhost:8080で開くように調整する

    ```javascript
    // vite.config.js

    import { sveltekit } from '@sveltejs/kit/vite';
    
    /** @type {import('vite').UserConfig} */
    const config = {
    	darkMode: 'class',
    	plugins: [sveltekit()],
    	server: {          // 追加
    		host: true,    // 追加
    		port: 8080     // 追加
    	}                  // 追加
    };
    
    export default config;
    ```

    `8080`以外のポートを開けたい場合は`port`の部分を調整する。

1. Skeletonをインストールする

    ```bash
    $ npm i @skeletonlabs/skeleton --save-dev
    ```

1. `svelte-add`を使い、`Tailwind`を使えるようにする
    
    ```bash
    $ npx svelte-add@latest tailwindcss
    $ npm install
    ```

1. `Tailwind`の設定を調整する

    ```javascript
    // tailwind.config.cjs
    
    const config = {
      darkMode: 'class',    // 追加
      content: [
        require('path').join(                            // 追加
            require.resolve('@skeletonlabs/skeleton'),   // 追加
            '../**/*.{html,js,svelte,ts}'                // 追加
        )                                                // 追加
      ],
      theme: {
        extend: {},
      },
      plugins: [
        require('@skeletonlabs/skeleton/tailwind/theme.cjs')  // 追加
      ]
    };
    
    module.exports = config;
    ```

1. app.postcssの修正
    
    以下記述を削除
    ~~@tailwind base;~~
    ~~@tailwind components;~~
    ~~@tailwind utilities;~~
    
    ```markdown
    html, body { @apply h-full overflow-hidden; }
    ```

    これでSvelteKitとSkeletonの設定は完了!

1. サーバー起動

    ```bash
    $ npm run dev
    ```

    [localhost:8080](http://localhost:8080)開くことを確認。
    早速テーマを変更してみる。

# テーマ

## before

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2985550/2d394ede-77d2-9013-1b5d-dcb483f2b193.png)

## After(Skeletonテーマ使用)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2985550/4ad006f1-466d-b606-5b3e-e76925dea498.png)

ん、、？ちょっと変わった、、？

わかりやすくするために公式が用意しているデモ画面を実装してみる。

```vue
// +layout.svelte

<script lang="ts">
  // テーマを使うときにコメントイン
  // import '@skeletonlabs/skeleton/themes/theme-skeleton.css';
  // import '@skeletonlabs/skeleton/styles/all.css';
  // import '../app.postcss';
  import { AppShell, AppBar } from '@skeletonlabs/skeleton';
</script>

<AppShell>
  <svelte:fragment slot="header">
    <AppBar>
      <svelte:fragment slot="lead">
        <h1>Skeleton</h1>
      </svelte:fragment>
      <svelte:fragment slot="trail">
        <a class="btn btn-sm" href="https://github.com/" target="_blank" rel="noreferrer">GitHub</a>
      </svelte:fragment>
    </AppBar>
  </svelte:fragment>
  <svelte:fragment slot="sidebarLeft">
    <AppShell slotSidebarLeft="bg-surface-500/5 w-56 p-4">
      <nav class="list-nav">
        <ul>
          <li><a href="/">Home</a></li>
          <li><a href="/about">About</a></li>
        </ul>
      </nav>
    </AppShell>
  </svelte:fragment>
  <slot />
  </AppShell>


// +page.svelte

<script lang="ts">
	import { GradientHeading } from '@skeletonlabs/skeleton';
</script>

<GradientHeading tag="h1" direction="bg-gradient-to-r" from="from-primary-500" to="to-accent-500">
	Homepage
</GradientHeading>

<div class="container mx-auto p-8 space-y-8">
	<h1>Hello Skeleton</h1>
	<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
	<hr />
	<section class="card card-body">
		<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
	</section>
	<hr />
	<section class="flex space-x-2">
		<a class="btn btn-filled-primary" href="https://kit.svelte.dev/" target="_blank" rel="noreferrer">SvelteKit</a>
		<a class="btn btn-filled-accent" href="https://tailwindcss.com/" target="_blank" rel="noreferrer">Tailwind</a>
		<a class="btn btn-filled-tertiary" href="https://github.com/" target="_blank" rel="noreferrer">GitHub</a>
	</section>
</div>
```

よし、これで比べてみるぞ。

### テーマ無し

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2985550/7ab57af2-478e-2acb-610b-3d09be21547c.png)

### Skeletonテーマ使用

`+layout.svelte`のテーマを使うときにコメントインの部分をコメントイン

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2985550/ba8610eb-256e-7cd8-6cab-89b69d6568ea.png)

**かなり変わった!!**

# 各テーマを比べてみる

## skeleton

```typescript
import '@skeletonlabs/skeleton/themes/theme-skeleton.css';
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2985550/e54e595a-0b8f-c40c-fe4d-48dcc5d2c403.png)

## rocket

```typescript
import '@skeletonlabs/skeleton/themes/theme-rocket.css';
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2985550/bfad49b9-f1e2-d63f-aa50-dbd06190e9f3.png)

## vintage

```typescript
import '@skeletonlabs/skeleton/themes/theme-vintage.css';
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2985550/263868b2-9836-ca5b-ae97-f8773e3bcc58.png)

## modern

```typescript
import '@skeletonlabs/skeleton/themes/theme-modern.css';
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2985550/e3842d35-6aad-17a8-8da7-286920c35754.png)

## sahara

```typescript
import '@skeletonlabs/skeleton/themes/theme-sahara.css';
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2985550/5b889fcd-e00a-536d-d0c7-c7714774830f.png)

## seafoam

```typescript
import '@skeletonlabs/skeleton/themes/theme-seafoam.css';
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2985550/329e590c-0e8d-95da-2b39-d6e888073882.png)

## hamlindigo

```typescript
import '@skeletonlabs/skeleton/themes/theme-hamlindigo.css';
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2985550/36224f25-6500-8647-35bf-e91142960b3a.png)

## gold-nouveau

```typescript
import '@skeletonlabs/skeleton/themes/theme-gold-nouveau.css';
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2985550/0150fdd0-8445-958f-940f-d293b60c7fb9.png)

## crimson

```typescript
import '@skeletonlabs/skeleton/themes/theme-crimson.css';
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2985550/1ab06387-04dd-65ad-9537-38c8e793b34a.png)

#### なんと自分でも作れるのです。

https://www.skeleton.dev/guides/themes/generator

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2985550/cd6f4676-699f-9a90-6510-3f2d0e8ee7cc.png)


気になった方はぜひ試してみてください