SVELTE-SVELTEkitを触れてみた。(Docker)

概要

最近webサイトを作ることになり、いつもはflaskのtemplatehtmlを使って簡単にウェブサイトを作成していたのですが、新しくいろんなものにも触れていこうと思ったので試しに触ってみました

実行環境

• VScode
• Almalinux9
• Docker version 29.1.2
• Node 24.11.1
• npm 11.6.2
• Vite 7.2.7

まず初めに

今回行う内容は、Svelteがフロントエンド、TypeSclipt,Sveltekitのバックエンドで行います、Cent系統のLinuxで行ったためほかのOSではコマンドが多少変わることをお気をつけてください

(例:Linuxではdocker compose up ですがwindowsのdocker desktopではdocker-compose up になったり)

セットアップ

Sveltekitのv2の最新を使うことになるため、Nodeのバージョンは18.13以上のバージョンが必須条件になります

今回はnvmを使用してセットアップします

このコマンドでNodeの24をダウンロードします

$nvm install 24

次に、このバージョンを使用するということを宣言します

$nvm use 24

次にデモをインストールします。

$npx sv create ディレクトリ

#例
$npx sv create ./

このコマンドを行うとどのように入れるか聞いてきます、お好みで大丈夫ですが、今回は小さめなものにしました。

npx sv create ./

┌  Welcome to the Svelte CLI! (v0.10.7)
│
◇  Which template would you like?
│  SvelteKit minimal
│
◇  Add type checking with TypeScript?
│  Yes, using TypeScript syntax
│
◇  What would you like to add to your project? (use arrow keys / space bar)
│  none
│
◆  Project created
│
◇  Which package manager do you want to install dependencies with?
│  npm
│
│  npx sv create --template minimal --types ts --install npm ./
│
│
◆  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!
└

内容として、SvelteKit minimalでTypeScriptで、特にライブラリなどを入れず、npmのパッケージマネージャを使用するとなっております。
詳しく説明します

Svelteインストール時の設定の詳細

これではSvelteKitプロジェクトセットアップの際に追加できるツールやライブラリの一覧です
スペースキーでチェックを入れてエンターで決定です。

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

上から、

• prettier: コードフォーマッター。コードのスタイル（インデント、改行など）を自動で統一し、読みやすくするツール。JavaScript/TypeScript/Svelteファイルに対応。
• eslint: JavaScript/TypeScriptのリンター。コードの潜在的なバグやスタイル違反を検知し、品質を向上させる。Prettierと組み合わせるのが一般的。
• vitest: テストフレームワーク。ユニットテストや統合テストを高速に実行可能。Jestに似ているが、ViteベースでSvelteKitに最適。
• playwright: エンドツーエンド（E2E）テストツール。ブラウザ上で実際のユーザー操作をシミュレートしてテスト。クロスブラウザ対応。
• tailwindcss: CSSフレームワーク。ユーティリティクラス（例: bg-blue-500）を使って迅速にスタイルを適用。SvelteKitで人気のCSSライブラリ。
• sveltekit-adapter: SvelteKitのアダプター。デプロイ環境（例: Node.js, Vercel, Netlifyなど）に合わせてビルド出力を調整。デフォルトは@sveltejs/adapter-auto。
• devtools-json: 開発ツール関連。JSON形式のデバッグ情報を提供するツール（おそらくブラウザ拡張やライブラリ）。詳細はプロジェクト次第。
• drizzle: ORM（Object-Relational Mapping）ライブラリ。データベース（例: SQLite, PostgreSQL）とTypeScriptを連携させ、クエリを型安全に扱う。
• lucia: 認証ライブラリ。ユーザー認証（ログイン/ログアウト）を簡単に実装。セッション管理やOAuth対応。
• mdsvex: MarkdownをSvelteコンポーネントに変換するツール。ブログやドキュメントサイトでMarkdownファイルをSvelteとして扱える。
• paraglide: 国際化（i18n）ライブラリ。多言語対応を追加。翻訳ファイルの管理と動的切り替えが可能。
• storybook: UIコンポーネントの開発・テストツール。コンポーネントを独立してプレビュー・テストできる。SvelteKitとの統合が可能。
• mcp: "Model Context Protocol" の略と思われます。AIモデルやコンテキスト管理関連のツール（SvelteKitの標準セットアップでは珍しいが、カスタム拡張やMCPサーバー統合用）。

となっております、今回は触れるだけだったので、入れませんでした、次にこの設定が出ますが、これはパッケージマネージャをどれにするかという設定です。

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

今回はnpmを使用します

この設定を行うとnpm run dev -- --opneと出るはずです、これはこのコマンドで実際にこれを動かすことができるということです、試しに起動してみましょう

たぶんコマンドを打ったらこのように表示されると思います、

$npm run dev -- --open

> ipf-sveltekite-docker@0.0.1 dev
> vite dev --open

17:15:03 [vite] (client) Forced re-optimization of dependencies
Port 5173 is in use, trying another one...

  VITE v7.2.7  ready in 871 ms

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

これで起動ができました。実際にそのIPに接続しましょう

この画面が出れば起動できてるということです、(minimal以外を選べばもっときれいなUIになります)

Docker composeを書いて対応させる

このままではdockerで起動ができないため、ファイルを書いていきます
現在のディレクトリです

二つのDockerfileとdocker-compose.ymlを書きます
こうなる予定です

Dockerfileとdockercompose.ymlを書く

Docker fileはこれを用意しました、
node24-bullseye-slimを使用します

FROM node:24-bullseye-slim

WORKDIR /app

COPY package.json package-lock.json ./
RUN npm ci --no-audit --no-fund --include=dev

COPY . .

EXPOSE 5173

CMD ["npm", "run", "dev", "--", "--host", "0.0.0.0"]

docker-compose.ymlはこちらです

services:
  sveltekit-app:
    build: .
    working_dir: /app
    ports:
      - "5173:5173"
    volumes:
      - .:/app
      - /app/node_modules
    environment:
      NODE_ENV: development
    command: ["npm", "run", "dev", "--", "--host", "0.0.0.0"]
    tty: true
    stdin_open: true

これで起動を行なえると思います。

この構成は本番では適していません、ご注意ください

実際にSvelteを書いてみる

Svelteにはコンポーネントの機能や、コードの量が減るなどのメリットがあるらしいです、
実際にコンポーネントを追加していきます。

コンポーネントの追加方法

コンポーネントの追加方法はsrc内のlibにcomponentsフォルダを追加し、svelteファイルを好きな名前で追加するだけです、試しにHello.svelteを追加してみました

内部のコードはご自由に、私はこうしました

<script lang="ts">
  let name: string = 'World';
</script>

<h2>Hello {name}!</h2>
<p>This is a simple Svelte component.</p>
<button on:click={() => name = name === 'World' ? 'SvelteKit' : 'World'}>
  Change Name
</button>

次にこのコンポーネントを適応していきます、src/lib/routesの中の+page.svelteがウェブを表示する部分なので書き換えていきます、まず作成したコンポーネントをインポートするコードを書きます

<script>
    import Hello from "$lib/components/Hello.svelte";
</script>

次に下に配置します

<Hello />

これでできます

+page.svelteの全体のコード

<script>
    import Hello from "$lib/components/Hello.svelte";
</script>

<h1>Welcome to SvelteKit</h1>
<p>Visit <a href="https://svelte.dev/docs/kit">svelte.dev/docs/kit</a> to read the documentation</p>

<Hello />

早速見てみましょう

しっかり先ほど書いたHello World!が出ました、

今後

TSなどについてまだ触れてないので、いずれもう少し深く触っていこうと思います。