SvelteKit 入門：pnpm と Vite で最新 Svelte5 環境構築ガイド

2026年7月5日

もっとスキルを活かしたいエンジニアへ

スポンサードリンク

働き方から選べる

無料で使えて良質な案件の情報収集ができるサービス

エンジニアの世界では、「いつでも動ける状態を作っておけ」とよく言われます。
技術やポートフォリオがあっても、自分に合う案件情報を日常的に見れていないと、いざ動こうと思った時に比較や判断が難しくなってしまいます。
普段から案件情報が集まる環境を作っておくと、良い案件が出た時にすぐ動きやすくなりますよ。
筆者自身も、メガベンチャー勤務時代に年収1,500万円を超えた経験があります。振り返ると、技術だけでなく「どんな案件や働き方があるか」を日頃から見ていたことが、キャリアの選択肢を広げるきっかけになりました。
このブログを読んでくれた方に感謝を込めて、実際に使っている情報収集サービスを紹介します。

フルリモート・週3日・高単価、どんな条件も妥協したくないなら

フリーランスボードに無料会員登録する

利用者10万人以上。業界最大規模45万件の案件。AIマッチ機能や無料の相場情報が人気。

年収800万円以上のキャリアアップ・ハイクラス正社員を視野に入れているなら

Beyond Careerに無料相談する

内定獲得率90%以上。紹介先企業とは役員クラスのコネクションがある安心と信頼できるエージェント。

Contents

1 SvelteKit プロジェクトのセットアップ（npm create svelte@latest ＋ pnpm 推奨）
- 1.1 Vite テンプレート作成手順
- 1.2 pnpm ワークスペースと依存関係の最適化
2 .svelte ファイルの構造とスクリプトブロックのルール
- 2.1 必須要素と任意要素
- 2.2 スクリプトブロックに適用される４つのルール
3 Props と型付け、リアクティブステートメント $ の活用
4 コンポーネント間通信：イベントディスパッチ・フォワードとスロット
- 4.1 createEventDispatcher と forwardEvents の実装例
  - 4.1.1 子コンポーネント（Button.svelte）
  - 4.1.2 ラップコンポーネント（IconButton.svelte）
- 4.2 スロットの種類と fallback コンテンツ
5 スタイリング・最適化・テスト、そして Svelte 5 の破壊的変更点
6 まとめ

スポンサードリンク

SvelteKit プロジェクトのセットアップ（npm create svelte@latest ＋ pnpm 推奨）

Svelte 5 で開発を始めるなら、公式が推奨するコマンド npm create svelte@latest で Vite ベースのテンプレートを生成し、依存管理は高速かつディスク使用量が小さい pnpm を使うのが最もシンプルです。
この手順を踏めば数分でローカルサーバーが立ち上がり、すぐにコンポーネント開発に移れます。

Vite テンプレート作成手順

以下は実際にターミナルで入力するコマンド例です。対話形式の質問に答えるだけでプロジェクト雛形が完成します。

# 1. プロジェクト用ディレクトリを作成して移動
mkdir my-svelte-app &amp;&amp; cd my-svelte-app

# 2. 最新テンプレートを生成（Skeleton project、TypeScript、ESLint などは対話で選択）
npm create svelte@latest .

# 3. pnpm がインストールされていなければグローバルに導入
npm i -g pnpm

# 4. パッケージをインストールし、開発サーバー起動
pnpm install
pnpm dev   # → http://localhost:5173 にアクセスできる

# 1. プロジェクト用ディレクトリを作成して移動

mkdir my-svelte-app && cd my-svelte-app

# 2. 最新テンプレートを生成（Skeleton project、TypeScript、ESLint などは対話で選択）

npm create svelte@latest .

# 3. pnpm がインストールされていなければグローバルに導入

npm i -g pnpm

# 4. パッケージをインストールし、開発サーバー起動

pnpm install

pnpm dev # → http://localhost:5173 にアクセスできる

公式ドキュメントは https://kit.svelte.dev/docs/introduction（Vite が内部で使用されていることが記載）をご参照ください。

pnpm ワークスペースと依存関係の最適化

モノレポ構成で複数の SvelteKit アプリや共有ライブラリを管理したい場合、pnpm-workspace.yaml にルートと子ディレクトリを列挙するだけで依存がフラットにまとめられます。

# pnpm-workspace.yaml（プロジェクトのルートに配置）
packages:
  - &quot;apps/*&quot;
  - &quot;libs/*&quot;

# pnpm-workspace.yaml（プロジェクトのルートに配置）

packages:

- "apps/*"

- "libs/*"

ロックファイルのフラット化
pnpm は同一バージョンのパッケージをハードリンクで共有するため、node_modules のサイズは数十 MB に抑えられます。CI のキャッシュ容量が削減でき、ビルド時間も短縮されます。
実務上のベネフィット
@sveltejs/kit や共通ユーティリティを単一インストールで管理。
各アプリの依存バージョンが揃うため、コードレビューやデプロイ時に「動作しない」リスクが低減します。

`.svelte` ファイルの構造とスクリプトブロックのルール

.svelte コンポーネントは \<script>・\<style>・マークアップ の三部構成で、スクリプト側には４つの基本ルールが適用されます。これらを守ることでコンパイル時に自動的にリアクティブ変数へ変換され、余計なランタイムコードが削減されます。

必須要素と任意要素

要素	用途・特徴
`<script>`（インスタンススコープ）	コンポーネント内部で実行。`export let` による Props 定義やローカル変数、インポート文を記述します。
`<script context="module">`（モジュールスコープ）	ビルド時に一度だけ評価され、SSR のデータ取得やユーティリティ関数の定義に利用。必須ではありませんが、サーバー側ロジックを分離したいときに便利です。
`<style>`	デフォルトでコンポーネントスコープ化（`.svelte-[hash]`）。`:global()` を使えばグローバル CSS も記述可能です。
マークアップ（HTML / Svelte 構文）	任意の HTML タグや `{}` バインディングを書くだけで OK。

スクリプトブロックに適用される４つのルール

import
トップレベルでのみ使用可能です。他のスコープ（例: context="module"）からもインポートできますが、実行タイミングはビルド時です。
export let
親コンポーネントから渡される Props を宣言。型注釈を付ければ TypeScript の型チェックが走ります。
$（リアクティブステートメント）
$: で始まる文は依存変数の変更を検知して自動再実行されます。計算プロパティや副作用ロジックに最適です。
module context
context="module" のスクリプトはコンポーネント全体で一度だけ評価され、SSR 時のデータフェッチやユーティリティ関数の定義に利用します。

詳細は公式ドキュメント（https://kit.svelte.dev/docs/components）をご確認ください。

Props と型付け、リアクティブステートメント `$` の活用

Svelte 5 では TypeScript が標準でサポートされているため、Props に型情報を付与すれば IDE 補完やコンパイル時チェックが自動的に有効になります。加えて $: を使ったリアクティブ宣言は依存追跡がビルトインなので、手書きの watch ロジックよりコード量が削減できます。

Props の定義方法とデフォルト値

&lt;script lang=&quot;ts&quot;&gt;
  // 必須 Prop（型だけ宣言しデフォルトは与えない）
  export let count: number;

  // 任意 Prop（デフォルト値を設定）
  export let label: string = '項目';
&lt;/script&gt;

&lt;p&gt;{label}: {count}&lt;/p&gt;

// 必須 Prop（型だけ宣言しデフォルトは与えない）

export let count: number;

// 任意 Prop（デフォルト値を設定）

export let label: string = '項目';

</script>

<p>{label}: {count}</p>

必須は型だけを書き、呼び出し側で必ず渡す必要があります。
任意は = 後に初期値を入れることで、未指定時のフォールバックが自動的に適用されます。

TypeScript による Props の型注釈ベストプラクティス

複数の Props がある場合は interface または type を作成すると管理が楽になります。オプションプロパティは ? とデフォルト値で安全に扱えます。

&lt;script lang=&quot;ts&quot;&gt;
  interface CardProps {
    title: string;
    amount?: number;      // 任意
    onClose: () =&gt; void;
  }

  export let { title, amount = 0, onClose }: CardProps;
&lt;/script&gt;

&lt;h2&gt;{title}&lt;/h2&gt;
{#if amount}
  &lt;p&gt;金額：{amount}円&lt;/p&gt;
{/if}
&lt;button on:click={onClose}&gt;閉じる&lt;/button&gt;

interface CardProps {

title: string;

amount?: number; // 任意

onClose: () => void;

}

export let { title, amount = 0, onClose }: CardProps;

</script>

<h2>{title}</h2>

{#if amount}

<p>金額：{amount}円</p>

{/if}

interface にまとめておくと、他コンポーネントへの再利用やドキュメント生成が容易です。
任意プロパティは型レベルで ? を付け、実装側ではデフォルト値を設定して「未定義」状態を排除します。

`$:` リアクティブ宣言と実務シナリオ

&lt;script lang=&quot;ts&quot;&gt;
  export let basePrice: number;
  export let taxRate = 0.1;

  // 計算プロパティ：税込み金額を自動再計算
  $: total = Math.round(basePrice * (1 + taxRate));
&lt;/script&gt;

&lt;p&gt;税込み金額: {total}円&lt;/p&gt;

export let basePrice: number;

export let taxRate = 0.1;

// 計算プロパティ：税込み金額を自動再計算

$: total = Math.round(basePrice * (1 + taxRate));

</script>

<p>税込み金額: {total}円</p>

basePrice や taxRate が変わるたびに total が即座に更新され、手動で再計算ロジックを書く必要がありません。

非同期データのリアクティブ取得（Svelte 5 の新機能）

&lt;script lang=&quot;ts&quot;&gt;
  let userId = 1;
  // `$:` に `await` を組み込めるので、データ取得を簡潔に記述できる
  $: user = await fetch(`/api/users/${userId}`).then(r =&gt; r.json());
&lt;/script&gt;

{#if user}
  &lt;p&gt;{user.name} さん、ようこそ！&lt;/p&gt;
{/if}

let userId = 1;

// `$:` に `await` を組み込めるので、データ取得を簡潔に記述できる

$: user = await fetch(`/api/users/${userId}`).then(r => r.json());

</script>

{#if user}

{/if}

await を含む $: は自動的に Promise の解決を待ち、結果が変わるたびに再評価されます。これにより「ロード中」や「エラーハンドリング」のロジックもシンプル化できます。

コンポーネント間通信：イベントディスパッチ・フォワードとスロット

子コンポーネントから親へデータを送る手段として createEventDispatcher、ラップコンポーネントで子の全イベントを転送する forwardEvents が標準装備されています。さらに デフォルトスロット と 名前付きスロット を組み合わせれば、汎用 UI コンテナが簡単に作れます。

`createEventDispatcher` と `forwardEvents` の実装例

子コンポーネント（Button.svelte）

&lt;script lang=&quot;ts&quot;&gt;
  import { createEventDispatcher } from 'svelte';
  const dispatch = createEventDispatcher&lt;{ click: MouseEvent }&gt;();

  function handleClick(event: MouseEvent) {
    dispatch('click', event);   // カスタムイベントを発火
  }
&lt;/script&gt;

&lt;button on:click={handleClick}&gt;クリック&lt;/button&gt;

import { createEventDispatcher } from 'svelte';

const dispatch = createEventDispatcher<{ click: MouseEvent }>();

function handleClick(event: MouseEvent) {

dispatch('click', event); // カスタムイベントを発火

}

</script>

ラップコンポーネント（IconButton.svelte）

&lt;script lang=&quot;ts&quot;&gt;
  import Button from './Button.svelte';
  export let icon = '&#x1f514;';

  // 子の全イベントを残余プロパティと共に転送
  import { forwardEvents } from 'svelte/internal';
  const $$restProps = {};
  forwardEvents(Button, $$restProps);
&lt;/script&gt;

&lt;Button {...$$restProps}&gt;
  &lt;span slot=&quot;default&quot;&gt;{icon}&lt;/span&gt;
&lt;/Button&gt;

import Button from './Button.svelte';

export let icon = '🔔';

// 子の全イベントを残余プロパティと共に転送

import { forwardEvents } from 'svelte/internal';

const $$restProps = {};

forwardEvents(Button, $$restProps);

</script>

</Button>

forwardEvents の第2引数に残余プロパティオブジェクトを渡すだけで、<IconButton on:click={...}> が子コンポーネントのクリックイベントを直接受け取れます。

スロットの種類と fallback コンテンツ

&lt;!-- Card.svelte --&gt;
&lt;div class=&quot;card&quot;&gt;
  &lt;header&gt;
    &lt;!-- 名前付きスロット（タイトル） --&gt;
    &lt;slot name=&quot;title&quot;&gt;【タイトル未設定】&lt;/slot&gt;
  &lt;/header&gt;

  &lt;section&gt;
    &lt;!-- デフォルトスロット（本文） --&gt;
    &lt;slot&gt;コンテンツがありません。&lt;/slot&gt;
  &lt;/section&gt;

  &lt;footer&gt;
    &lt;!-- 名前付きスロット（アクションボタン群） --&gt;
    &lt;slot name=&quot;actions&quot;&gt;&lt;/slot&gt;
  &lt;/footer&gt;
&lt;/div&gt;

&lt;style&gt;
  .card { border: 1px solid #ddd; padding: 1rem; }
&lt;/style&gt;

<slot name="title">【タイトル未設定】</slot>

</header>

<slot>コンテンツがありません。</slot>

</section>

</footer>

</div>

<style>

.card { border: 1px solid #ddd; padding: 1rem; }

</style>

利用側の記述例：

&lt;Card&gt;
  &lt;h2 slot=&quot;title&quot;&gt;商品情報&lt;/h2&gt;
  商品の詳細テキスト…
  &lt;button slot=&quot;actions&quot; on:click={addToCart}&gt;カートに入れる&lt;/button&gt;
&lt;/Card&gt;

<Card>

商品の詳細テキスト…

<button slot="actions" on:click={addToCart}>カートに入れる</button>

</Card>

デフォルトスロット は <slot> の中身が fallback コンテンツとして表示されます。
名前付きスロット は slot="name" 属性で差し替え可能なので、レイアウトの柔軟性が向上します。

スタイリング・最適化・テスト、そして Svelte 5 の破壊的変更点

Svelte 5 では CSS がデフォルトでコンポーネントスコープ化され、:global() によってグローバルスタイルを明示的に定義できます。TailwindCSS と組み合わせると JIT ビルドの高速化が得られ、Vitest + Testing Library が公式テストフレームワークとして推奨されています。また、コンパイラオプションや SSR の挙動が大幅に刷新されたため、開発者は新しい設定項目を把握しておく必要があります。

CSS スコープ・`:global` と TailwindCSS 併用例

&lt;script lang=&quot;ts&quot;&gt;
  export let primary = false;
&lt;/script&gt;

&lt;style&gt;
  /* コンポーネントスコープ */
  button {
    @apply px-4 py-2 rounded;   /* Tailwind のユーティリティを CSS 内で使用 */
    background-color: var(--bg);
  }

  :global(.dark) button {
    --bg: #333;
    color: #fff;
  }

  :global(body) {
    margin: 0;                  /* グローバルに適用したいスタイルは :global() */
  }
&lt;/style&gt;

&lt;button class={primary ? 'bg-blue-600 text-white' : 'bg-gray-200'}&gt;
  &lt;slot&gt;ボタン&lt;/slot&gt;
&lt;/button&gt;

export let primary = false;

</script>

<style>

/* コンポーネントスコープ */

button {

@apply px-4 py-2 rounded; /* Tailwind のユーティリティを CSS 内で使用 */

background-color: var(--bg);

}

:global(.dark) button {

--bg: #333;

color: #fff;

}

:global(body) {

margin: 0; /* グローバルに適用したいスタイルは :global() */

}

</style>

</button>

@apply により Tailwind のユーティリティクラスを CSS ファイル内で直接使用でき、スコープ化されたスタイルと組み合わせても JIT が正しく働きます。
:global(.dark) で外部テーマクラスと連携すれば、SSR 時に同一 CSS がサーバー側でも適用され、クライアントと見た目がずれません。

Vitest と @testing-library/svelte によるテスト環境構築

依存パッケージをインストール

bash pnpm add -D vitest @testing-library/svelte @sveltejs/vite-plugin-svelte

vite.config.ts にプラグインを明示的に追加（SvelteKit では自動ですがテスト実行時は必要）

ts import { defineConfig } from 'vite'; import { svelte } from '@sveltejs/vite-plugin-svelte';

export default defineConfig({ plugins: [svelte()], test: { environment: 'jsdom', globals: true, coverage: { provider: 'c8' } } });

テスト例（Button.test.ts）

ts import { render, fireEvent } from '@testing-library/svelte'; import Button from '../src/lib/Button.svelte';


test('クリック時にカスタムイベントが発火する', async () => {

     const handle = vi.fn();

     const { getByText } = render(Button, {

       props: { / ここに必要なら Props を渡す / },

       on: { click: handle }

     });


		
		
			
			

			
			 await fireEvent.click(getByText('クリック'));
 expect(handle).toHaveBeenCalledOnce();

			
				
					
				
					1
2
3
				
						 await fireEvent.click(getByText('クリック'));
 expect(handle).toHaveBeenCalledOnce();

});

render が仮想 DOM にコンポーネントをマウントし、fireEvent でユーザー操作をシミュレートします。
GitHub Actions 等の CI パイプラインに組み込めば、プルリクエストごとに自動テストが走ります。

Svelte 5 のコンパイラオプションと SSR の主な変更点

変更項目	具体的内容	実務上の影響
`compilerOptions.hydrate` → `ssr: true/false`	ビルド時に SSR 用かクライアント用かを明示的に分離。Hydration コードは SSR ビルドで自動除外される。	静的サイト (`adapter-static`) とサーバーレンダリング (`adapter-node`) の切り替えが設定ファイルだけで完結し、ビルドサイズが最適化されます。
`cssHash` カスタマイズの廃止	デフォルトハッシュ方式（`.svelte-xxxx`）に統一。独自ハッシュはプラグイン実装が必要に。	ビルドキャッシュ戦略がシンプル化し、CDN キャッシュの破棄やバージョニングが容易になります。
`$page` ストアの型定義強化	`load` 関数から返すデータは自動的に型推論され、`PageData` が正確に表現される。	手書きの型宣言が不要になるため、開発速度と安全性が向上します。
`preprocess` の設定形式変更	`svelte.config.js` の `preprocess` はオブジェクト形式（例: `{ typescript: true, postcss: true }`）へ統一。	Vite プラグインや他ツールとの競合が減り、設定ミスが起きにくくなります。
モジュールスコープの自動 import	`src/lib/*` 配下のファイルは `import $lib/...` で簡略化可能（`$lib` エイリアス）。	パス指定が短縮され、リファクタリング時の影響範囲が限定的です。

詳細は公式リリースノート（https://kit.svelte.dev/docs/migrating#svelte-5）をご確認ください。

ビルドサイズ最適化と開発ツール活用

コードスプリッティング
import() を使って遅延ロードコンポーネントを分割すれば、初回バンドルが小さくなります。例: const Modal = () => import('./Modal.svelte');
適切な Adapter の選定
静的サイトは @sveltejs/adapter-static（最小バンドル）
動的 SSR は @sveltejs/adapter-node、Vercel デプロイは @sveltejs/adapter-vercel
Tree‑shaking
Vite の ES モジュール解析と Svelte コンパイラのデッドコード除去により、未使用コンポーネントは自動的にバンドルから排除されます。
Svelte DevTools
Chrome/Firefox 拡張機能をインストールし、pnpm dev --open で起動したローカルサーバー上のコンポーネントツリーやリアクティブステートの再計算回数を可視化できます。デバッグ効率が大幅に向上します。

まとめ

環境構築は npm create svelte@latest と高速な pnpm を組み合わせるだけで完了し、公式 Vite テンプレートが即座に利用可能です。
.svelte ファイルは \<script>・\<style>・マークアップ の三部構成で、インポート・export let・リアクティブステートメント・モジュールコンテキストの４ルールを守ると自動的にリアクティブ化されます。
Props は TypeScript の型注釈とデフォルト値で安全に扱い、$: を用いた計算プロパティや非同期取得はコード量削減と可読性向上に貢献します。
カスタムイベントは createEventDispatcher、ラップ時の転送は forwardEvents、UI の再利用は デフォルト/名前付きスロット + fallback が基本です。
スコープ化 CSS と :global()、TailwindCSS 併用でスタイル衝突を防ぎつつ高速 UI を構築でき、テストは Vitest + @testing-library/svelte が推奨されます。
Svelte 5 ではコンパイラオプション（ssr/cssHash）や SSR の挙動が刷新されたため、公式リリースノートを常にチェックしながら設定を更新してください。

これらのポイントを押さえておけば、React や Vue の経験者でもスムーズに Svelte 5 に移行でき、プロジェクト全体の生産性とコード品質を向上させることが可能です。

スポンサードリンク

もっとスキルを活かしたいエンジニアへ

スポンサードリンク

働き方から選べる

無料で使えて良質な案件の情報収集ができるサービス

フルリモート・週3日・高単価、どんな条件も妥協したくないなら

フリーランスボードに無料会員登録する

利用者10万人以上。業界最大規模45万件の案件。AIマッチ機能や無料の相場情報が人気。

年収800万円以上のキャリアアップ・ハイクラス正社員を視野に入れているなら

Beyond Careerに無料相談する

内定獲得率90%以上。紹介先企業とは役員クラスのコネクションがある安心と信頼できるエージェント。

-Svelte

comment コメントをキャンセル

: Svelte

Svelte と SvelteKit の違いと選び方 – 2026 年版ベンチマーク比較

Svelte は UI コンポーネントをコンパイル時に最適化する軽量フレームワーク、SvelteKit は SSR/SSG・ルーティングなどフルスタック機能を追加したアプリケーションフレームワークです。

: Svelte

2024年版 Svelte 5 と Runes の全貌 - 入門と実践ガイド

本記事では2024年にリリースされた Svelte 5 と Runes システムの概要、TypeScript を用いたコンポーネント開発手順、SvelteKit の実践的なアプリ作成からデプロイ方法までを網羅しています。

: Svelte

Svelte 5 移行ガイド: 開発効率とパフォーマンス向上

Svelte 5への移行は、動作速度38%改善とメモリ軽量化により開発効率が向上。RunesやUniversal Reactivityの導入によるリアクティビティシステムの進化を解説。

: Svelte

Svelte 5.x vs React 19.x: 2026年パフォーマンス比較と選定基準

Svelte 5.xとReact 19.xのパフォーマンス差異を数値で比較。レンダリング速度、バンドルサイズ、メモリ使用量、SSR対応状況などを解説し、フレームワーク選定に役立つ情報を提供します。

: Svelte

2026年最新 SvelteKit 入門ガイド｜プロジェクト初期化からフルスタック構成まで

SvelteKitは2026年の技術トレンドで注目されるフレームワーク。npx create-svelte@latestによるプロジェクト初期化からSupabase連携、ファイルベースルーティング、Next.js/Nuxt.jsとの比較までを網羅した入門ガイドです。

Axum Framework マイクロサービス設計ガイド

Axumでのセキュア認証設計の3段階アプローチ | Rustフレームワークガイド

SvelteKit 入門：pnpm と Vite で最新 Svelte5 環境構築ガイド

SvelteKit プロジェクトのセットアップ（npm create svelte@latest ＋ pnpm 推奨）

Vite テンプレート作成手順

pnpm ワークスペースと依存関係の最適化

.svelte ファイルの構造とスクリプトブロックのルール

必須要素と任意要素

スクリプトブロックに適用される４つのルール

Props と型付け、リアクティブステートメント $ の活用

Props の定義方法とデフォルト値

TypeScript による Props の型注釈ベストプラクティス

$: リアクティブ宣言と実務シナリオ

非同期データのリアクティブ取得（Svelte 5 の新機能）

コンポーネント間通信：イベントディスパッチ・フォワードとスロット

createEventDispatcher と forwardEvents の実装例

子コンポーネント（Button.svelte）

ラップコンポーネント（IconButton.svelte）

スロットの種類と fallback コンテンツ

スタイリング・最適化・テスト、そして Svelte 5 の破壊的変更点

CSS スコープ・:global と TailwindCSS 併用例

Vitest と @testing-library/svelte によるテスト環境構築

Svelte 5 のコンパイラオプションと SSR の主な変更点

ビルドサイズ最適化と開発ツール活用

まとめ

SvelteKit プロジェクトのセットアップ（npm create svelte@latest ＋ pnpm 推奨）

`.svelte` ファイルの構造とスクリプトブロックのルール

Props と型付け、リアクティブステートメント `$` の活用

`$:` リアクティブ宣言と実務シナリオ

非同期データのリアクティブ取得（Svelte 5 の新機能）

`createEventDispatcher` と `forwardEvents` の実装例

スタイリング・最適化・テスト、そして Svelte 5 の破壊的変更点

CSS スコープ・`:global` と TailwindCSS 併用例

Svelte 5 のコンパイラオプションと SSR の主な変更点