Web 開発の世界は日々進化し続けています。React、Vue、Angular といったフレームワークが主流となっている中で、Svelte という新しいアプローチが注目を集めています。

「コンパイル時にフレームワークを消し去る」という革新的なコンセプトを持つ Svelte は、従来のフレームワークとは一線を画す存在です。この記事では、Svelte の魅力を実際に体験していただくため、最短 5 分で Hello World アプリケーションを作成する方法をご紹介します。

初心者の方でも安心して取り組めるよう、段階的に進めていきましょう。Svelte の世界への第一歩を一緒に踏み出してみませんか？

Svelte とは

Svelte は、2019 年に Rich Harris によって開発された次世代のフロントエンドフレームワークです。従来のフレームワークとは根本的なアプローチが異なり、その特徴は以下の通りです。

コンパイル時フレームワーク

React や Vue が実行時にフレームワークのコードを読み込むのに対し、Svelte はビルド時にフレームワークのコードを最適化された JavaScript に変換します。これにより、バンドルサイズが大幅に削減され、パフォーマンスが向上します。

シンプルな構文

Svelte の構文は非常に直感的で、HTML、CSS、JavaScript を自然な形で組み合わせることができます。特別な学習コストが少なく、Web 開発の基本知識があればすぐに始められます。

リアクティブな状態管理

Svelte の状態管理は驚くほどシンプルです。変数に値を代入するだけで、自動的に UI が更新されます。複雑なフックやライフサイクルメソッドを覚える必要がありません。

他のフレームワークとの比較

特徴	Svelte	React	Vue
バンドルサイズ	非常に小さい	大きい	中程度
学習コスト	低い	高い	中程度
パフォーマンス	優秀	良好	良好
構文の直感性	高い	中程度	高い

開発環境の準備

Svelte で開発を始めるために、必要な環境を整えていきましょう。Node.js がインストールされていることが前提となります。

Node.js の確認

まず、Node.js がインストールされているか確認します。ターミナルで以下のコマンドを実行してください。

bashCopy codenode --version
npm --version

正常にバージョンが表示されれば、Node.js の環境は整っています。もしエラーが表示される場合は、Node.js 公式サイトからインストールしてください。

よくあるエラーと解決法

Node.js がインストールされていない場合、以下のようなエラーが表示されます。

bashCopy code# エラー例
zsh: command not found: node
zsh: command not found: npm

この場合の解決法：

bashCopy code# macOSの場合（Homebrewを使用）
brew install node

# または公式インストーラーを使用
# https://nodejs.org/ からダウンロード

推奨エディタ

Svelte 開発には、以下のエディタがおすすめです：

• VS Code: 無料で高機能、Svelte 拡張機能が充実
• WebStorm: 有料だが、Svelte のサポートが優秀
• Vim/Neovim: 軽量で高速、設定次第で強力

VS Code を使用する場合は、以下の拡張機能をインストールすることをおすすめします：

• Svelte for VS Code
• Svelte IntelliSense
• Prettier - Code formatter

プロジェクトの作成

環境が整ったら、Svelte プロジェクトを作成しましょう。SvelteKit を使用することで、最新の機能を活用できます。

SvelteKit プロジェクトの作成

ターミナルで以下のコマンドを実行します。

bashCopy codenpm create svelte@latest my-svelte-app

このコマンドを実行すると、対話形式でプロジェクトの設定を行います。

プロジェクト設定の選択

以下のような質問が表示されるので、初心者の方は以下の選択をおすすめします：

bashCopy code# プロジェクト名の入力
✔ What should we call your project? … my-svelte-app

# SvelteKitの選択
✔ Which Svelte app template? › Skeleton project

# TypeScriptの選択（型安全性のため推奨）
✔ Add type checking with TypeScript? › Yes, using TypeScript syntax

# ESLintの追加
✔ Add ESLint for code linting? › Yes

# Prettierの追加
✔ Add Prettier for code formatting? › Yes

# Playwrightの追加（テスト用）
✔ Add Playwright for browser testing? › No

# Vitestの追加（単体テスト用）
✔ Add Vitest for unit testing? › No

よくあるエラーと解決法

プロジェクト作成時に以下のエラーが発生することがあります。

bashCopy code# エラー例1: 権限エラー
npm ERR! EACCES: permission denied

# 解決法
sudo npm create svelte@latest my-svelte-app

bashCopy code# エラー例2: ネットワークエラー
npm ERR! network timeout

# 解決法
npm config set registry https://registry.npmjs.org/
npm create svelte@latest my-svelte-app

プロジェクトディレクトリへの移動

プロジェクトが作成されたら、ディレクトリに移動します。

bashCopy codecd my-svelte-app

依存関係のインストール

プロジェクトの依存関係をインストールします。

bashCopy codenpm install

このコマンドにより、必要なパッケージがすべてインストールされます。

Hello World の実装

プロジェクトの準備が整ったら、Hello World アプリケーションを実装していきましょう。Svelte の基本的な構文を理解しながら進めます。

メインページの編集

まず、src​/​routes​/​+page.svelteファイルを編集します。このファイルがアプリケーションのメインページとなります。

svelteCopy code<script>
  // リアクティブな変数を定義
  let message = "Hello World!";
  let count = 0;

  // 関数を定義
  function incrementCount() {
    count += 1;
  }
</script>

<main>
  <h1>{message}</h1>

  <div class="counter">
    <p>カウント: {count}</p>
    <button on:click={incrementCount}>
      カウントアップ
    </button>
  </div>

  <p class="welcome">
    Svelteの世界へようこそ！
  </p>
</main>

<style>
  main {
    text-align: center;
    padding: 2rem;
    max-width: 600px;
    margin: 0 auto;
  }

  h1 {
    color: #ff3e00;
    font-size: 2.5rem;
    margin-bottom: 2rem;
  }

  .counter {
    margin: 2rem 0;
  }

  button {
    background-color: #ff3e00;
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1rem;
  }

  button:hover {
    background-color: #d63300;
  }

  .welcome {
    color: #666;
    font-style: italic;
  }
</style>

コードの解説

上記のコードについて詳しく説明します。

スクリプト部分：

• let message = "Hello World!"; - リアクティブな変数を定義
• let count = 0; - カウンター用の変数
• function incrementCount() - ボタンクリック時に実行される関数

テンプレート部分：

• {message} - 変数の値を表示（リアクティブ）
• on:click={incrementCount} - クリックイベントの処理
• {count} - カウンターの値を表示

スタイル部分：

• コンポーネントスコープの CSS
• 他のコンポーネントに影響しない

より高度な例

基本的な Hello World に慣れたら、以下のような機能を追加してみましょう。

svelteCopy code<script>
  let message = "Hello World!";
  let count = 0;
  let inputValue = "";

  function incrementCount() {
    count += 1;
  }

  function updateMessage() {
    message = inputValue || "Hello World!";
  }
</script>

<main>
  <h1>{message}</h1>

  <div class="input-section">
    <input
      type="text"
      bind:value={inputValue}
      placeholder="メッセージを入力"
    />
    <button on:click={updateMessage}>
      メッセージ更新
    </button>
  </div>

  <div class="counter">
    <p>カウント: {count}</p>
    <button on:click={incrementCount}>
      カウントアップ
    </button>
  </div>
</main>

よくあるエラーと解決法

bashCopy code# エラー例1: 構文エラー
ParseError: Unexpected token

# 解決法: セミコロンの確認
let message = "Hello World!"; // セミコロンを忘れずに

bashCopy code# エラー例2: 変数未定義
ReferenceError: message is not defined

# 解決法: 変数の宣言を確認
let message = "Hello World!"; // letで宣言する

動作確認

実装が完了したら、アプリケーションを起動して動作を確認しましょう。

開発サーバーの起動

ターミナルで以下のコマンドを実行します。

bashCopy codenpm run dev

正常に起動すると、以下のようなメッセージが表示されます。

bashCopy code  VITE v4.x.x  ready in xxx ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose

ブラウザでの確認

表示された URL（通常はhttp:​/​​/​localhost:5173​/​）をブラウザで開いてください。

期待される表示：

• "Hello World!"というメッセージ
• カウントアップボタン
• ボタンをクリックするとカウントが増加

よくあるエラーと解決法

bashCopy code# エラー例1: ポートが使用中
Error: listen EADDRINUSE: address already in use :::5173

# 解決法
# 別のターミナルで実行中のプロセスを停止するか、
# 別のポートを使用
npm run dev -- --port 3000

bashCopy code# エラー例2: 依存関係エラー
Cannot find module 'svelte'

# 解決法
npm install
# または
rm -rf node_modules package-lock.json
npm install

ホットリロードの確認

Svelte の開発サーバーはホットリロード機能を備えています。コードを変更すると、自動的にブラウザが更新されます。

試しに、src​/​routes​/​+page.svelteのmessage変数を変更してみてください。

svelteCopy codelet message = "Hello Svelte World!";

ファイルを保存すると、ブラウザが自動的に更新され、新しいメッセージが表示されます。

開発者ツールでの確認

ブラウザの開発者ツール（F12）を開いて、コンソールタブを確認してください。エラーが表示されていないことを確認します。

また、Elements タブで HTML の構造を確認し、Svelte が正しくコンパイルされていることを確認できます。

まとめ

お疲れさまでした！これで Svelte の Hello World アプリケーションが完成しました。

今回学んだこと

1. Svelte の基本概念: コンパイル時フレームワークの仕組み
2. 開発環境の構築: Node.js と SvelteKit のセットアップ
3. 基本的な構文: リアクティブな変数とイベント処理
4. コンポーネントの構造: script、template、style の 3 つのセクション
5. 開発サーバーの活用: ホットリロードによる効率的な開発

Svelte の魅力を再確認

今回の実装を通じて、Svelte の以下の魅力を実感できたのではないでしょうか：

• シンプルな構文: 特別な学習コストが少ない
• 直感的な状態管理: 変数の変更が自動的に UI に反映
• 高速な開発: ホットリロードによる即座のフィードバック
• 軽量なバンドル: コンパイル時の最適化

次のステップ

Hello World が完成したら、以下のような機能を追加してみることをおすすめします：

• 条件分岐: {#if}ブロックを使用した表示制御
• ループ処理: {#each}ブロックを使用したリスト表示
• フォーム処理: 入力フォームとバリデーション
• API 連携: 外部 API との通信
• ルーティング: 複数ページの作成

学習のコツ

Svelte の学習において、以下の点を意識すると効果的です：

1. 小さく始める: 複雑な機能は段階的に追加
2. 実際に手を動かす: コードを書いて、動かして、理解する
3. エラーを恐れない: エラーは学習の機会
4. コミュニティを活用: Svelte の公式ドキュメントやフォーラムを活用

Svelte の世界は、まだまだ深く、そして楽しい発見がたくさんあります。この Hello World を起点に、あなただけの素晴らしいアプリケーションを作り上げてください。

プログラミングの醍醐味は、アイデアを形にすることです。Svelte という素晴らしいツールを使って、あなたの創造性を存分に発揮してください。きっと、想像以上の成果が得られることでしょう。

関連リンク

• Svelte 公式サイト - 公式ドキュメントとチュートリアル
• SvelteKit 公式ドキュメント - フルスタックフレームワークの詳細
• Svelte REPL - ブラウザで Svelte を試せるオンラインエディタ
• Svelte Discord - コミュニティとの交流
• Svelte GitHub - ソースコードとイシュー
• Svelte Summit - 年次カンファレンス
• Svelte Society - 学習リソースとツール
• Svelte Radio - Svelte 関連のポッドキャスト