SvelteKit で静的サイトを構築する

SvelteKitを使って静的サイトを作成する方法を紹介します。
想定読者は、htmlベタ書きから脱却したい人、EJSからトレンド技術にサクッと移行したい人になります。

目次[ click ]

導入手順
① SvelteKitのインストール
② Sassの導入
③ Componentsの作成
④ Layoutの作成
⑤ ビルド（SSG対応）
応用編

導入手順

上から順に実施。

SvelteKitのインストール
Sassの導入
Componentsの作成
Layoutの作成
ビルド（SSG対応）

① SvelteKitのインストール

# プロジェクト作成
npm create svelte@latest ＜プロジェクト名＞

# Which Svelte app template?
Skelton project

# ～以下省略～ ※お好みで選択

# 動作確認
cd ＜プロジェクト名＞
npm i
npm run dev -- --open

SvelteKitセットアップ（筆者手順）

# プロジェクト作成
npm create svelte@latest macoblog-app

# Which Svelte app template?
Skelton project

# Add type checking with TypeScript?
Yes, using TypeScript syntax

# Select additional options (use arrow keys/space bar)
Add ESLint for code linting

# 動作確認
cd macoblog-app
npm i
npm run dev -- --open

以下、ディレクトリ構成

macoblog-app/
├── .svelte-kit/
├── node_modules/
├── src/
│   ├── lib/
│   │   └── index.ts
│   ├── routes/
│   │   └── +page.svelte
│   ├── app.d.ts
│   └── app.html
├── static/
│   └── favicon.png
├── .gitignore
├── .npmrc
├── package.json
├── package-lock.json
├── README.md
├── svelte.config.js
├── tsconfig.json
└── vite.config.ts

② Sassの導入

Sassの導入手順

Sassをインストールするだけ。
※必須作業ではないので、Sassを使用しない場合はスルーしてもOK

# Sassをインストール
npm i sass

<style>にlang="scss"を指定して使う。
別途scssファイルを用意して<script>内で読み込むことも可能。

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

+   <style lang="scss">
+       p {
+           color: red;
+
+           a {
+               color: blue;
+           }
+       }
+   </style>

③ Componentsの作成

Componentsの作成手順

src/lib/componentsにHelloworld.svelteを作成する。

    .
    └── src/
        └── lib/
+           ├── components/
+           │   └── Helloworld.svelte
            └── index.ts

以下をコピペする。

<!-- src/lib/components/HelloWorld.svelte -->
<p>Hello world!</p>

+page.svelteを調整する。

    <!-- src/routes/+page.svelte -->
+   <script>
+       import Helloworld from '$lib/components/Helloworld.svelte';
+   </script>
+       
    <h1>Welcome to SvelteKit</h1>
    <p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>
+   <Helloworld />

動作確認。

④ Layoutの作成

Layoutの作成手順

src/routesに+layout.svelteを作成する。

    .
    └── src/
        ├── lib
        └── routes/
+           ├── +layout.svelte
            └── +page.svelte

以下をコピペする、以上。
※最小構成なので適当に

<!-- src/routes/+layout.svelte -->
<div class="layout">
    <slot />
</div>

Layoutを導入することで、共通コンポーネントの読み込みが楽になる。
ヘッダー・フッターとか、以下例。

<!-- src/routes/+layout.svelte -->
<script>
    import Header from '$lib/components/Header.svelte';
    import Footer from '$lib/components/Footer.svelte';
</script>

<div class="layout">
    <Header />
    <slot />
    <Footer />
</div>

こんな感じ、分かりにくいけど。
※ヘッダーとフッターの部分は+layout.svelteから呼び出されている

⑤ ビルド（SSG対応）

ビルド（SSG対応）手順

@sveltejs/adapter-staticをインストールする。

npm i @sveltejs/adapter-static

svelte.config.jsを以下のように修正する。

-   import adapter from '@sveltejs/adapter-auto';
+   // import adapter from '@sveltejs/adapter-auto';
+   import adapter from "@sveltejs/adapter-static";
    import { vitePreprocess } from "@sveltejs/vite-plugin-svelte";

    /** @type {import('@sveltejs/kit').Config} */
    const config = {
        // Consult https://kit.svelte.dev/docs/integrations#preprocessors
        // for more information about preprocessors
        preprocess: vitePreprocess(),

        kit: {
            // adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
            // If your environment is not supported, or you settled on a specific environment, switch out the adapter.
            // See https://kit.svelte.dev/docs/adapters for more information about adapters.
-           adapter: adapter()
+           adapter: adapter({
+               // default options are shown. On some platforms
+               // these options are set automatically — see below
+               pages: "build",
+               assets: "build",
+               fallback: undefined,
+               precompress: false,
+               strict: true,
+           })
        },
    };

    export default config;

src/routesにlayout.server.tsを作成する。

    .
    └── src/
        ├── lib
        └── routes/
+           ├── layout.server.ts
            └── +page.svelte

以下をコピペする。

// src/routes/layout.server.ts
export const prerender = true;
export const trailingSlash = "always";

ビルドを実行する。

npm run build

プロジェクトルートに「build」が生成されていればOK。
※ホスティングする時はbuildの中のファイルをアップする

.
+   ├── build/
+   │   ├── _app/
+   │   ├── favicon.png
+   │   └── index.html
    ├── src
    ├── static/
    │   └── favicon.png
    ...

下記を実行してプレビュー確認も可能。

npm run preview

※PHPが使えるなら、buildに移動して下記でも確認可。

php -S localhost:8080

以上。

うぇぶとまと

初めてSvelte使ったけど良きです。
サクッと静的サイトを作りたい時はこれでいいんじゃないかなと、実務ではEJSで事足りるけど「使い慣れてるから」という理由だけで古代技術にすがるのはどうかなと。

応用編

Svelteは情報が少ないの弱点です。
ということで、使った知識はここに追記してまとめておきます。

VSCodeのPrettierの自動フォーマッティングを有効にする

settings.jsonに以下の記述を追加する。

    {
        ...
+       "[svelte]": {
+         "editor.formatOnSave": true,
+         "editor.defaultFormatter": "svelte.svelte-vscode"
+       },
    }

以下、コピー用。

{
  "[svelte]": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "svelte.svelte-vscode"
  },
}

リセットCSSを適用する

normalize.cssをインストールする。

npm i normalize.css

+layout.svelte等で読み込む。

<!-- src/routes/+layout.svelte -->
<script>
    import "normalize.css";
</script>

以上。

ページごとにmetaを変更する手順

metaの変更はSvelteKit標準機能で対応可。
例えばトップページの場合、下記を追記する。

+   <svelte:head>
+       <title>トップページ</title>
+       <meta name="description" content="トップページの説明文です" />
+   </svelte:head>
+
    <h1>Welcome to SvelteKit</h1>
    <p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>

Swiper（カルーセル）を実装する

swiperをインストール。

npm install swiper

画像を設置する。

    .
    └── static/
        ├── favicon.png
+       ├── sample1.jpg
+       ├── sample2.jpg
+       └── sample3.jpg

コードを記述する。

<!-- src/routes/+page.svelte -->
<script>
    import { register } from "swiper/element/bundle";
    register();
</script>

<header>ヘッダー</header>

<swiper-container>
    <swiper-slide><img src="sample1.jpg" alt="" /></swiper-slide>
    <swiper-slide><img src="sample2.jpg" alt="" /></swiper-slide>
    <swiper-slide><img src="sample3.jpg" alt="" /></swiper-slide>
    ...
</swiper-container>

以上。

参考サイト：https://swiperjs.com/element

グローバルにスタイルを適用する

+layout.svelteに下記のように記述することで、サイト全体にスタイルを適用できます。

<style>
    :global(p) {
        margin: 0;
    }
</style>

グローバルにスタイルを適用する（ファイル読み込み）

src/stylesにglobal.cssを作成する。

    .
    └── src/
        ├── lib/
+       └── styles/
+           └── global.css

※グローバルに適用したいスタイルを記述する（以下例）

p, ul {
    margin: 0;
    padding: 0;
}
ul {
    list-style: none;
}

+layout.svelteでインポートする。

<!-- src/routes/+layout.svelte -->
<script>
    import "../styles/global.css";
</script>

グローバルに変数を適用する（scss）

src/stylesに_variables.cssを作成する。

    .
    └── src/
        ├── lib/
+       └── styles/
+           └── _variables.scss

※グローバルに適用したい変数を記述する（以下例）

// src/styles/_variables.scss
$primary-color: red;

vite.config.jsを調整する。

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

    export default defineConfig({
        plugins: [sveltekit()],
+       css: {
+           preprocessorOptions: {
+               scss: {
+                   additionalData: `@import 'src/styles/variables.scss';`,
+               },
+           },
+       },
    });

これで、下記の様にグローバルに変数を使用することができます。

<style lang="scss">
    .test {
        color: $primary-color;
    }
</style>

※参考記事はこちら