Zenn
😊

初めてのSvelte：簡単に学べる基本機能と活用方法

2024/08/04に公開
JavaScript
frontend
Svelte
チュートリアル
tech

Svelte 基本機能と開発ガイド

Svelteは他のJavaScriptフレームワークとは異なり、コンパイル時にアプリケーションを効率的なJavaScriptに変換することで、ランタイムのオーバーヘッドを最小限に抑える特徴を持つフロントエンドフレームワークです。以下に、Svelteの基本機能について説明します。

基本機能

コンポーネントベースの開発

  • コンポーネント: Svelteでは、UIを小さな再利用可能な部品（コンポーネント）として構築します。各コンポーネントは独自のHTML、CSS、JavaScriptを持ちます。
  • シンタックス: Svelteコンポーネントは .svelte 拡張子のファイルで定義され、シンプルな構文で記述できます。

リアクティブプログラミング

  • リアクティビティ: Svelteは変数の変更を自動的に検出し、対応するUIを更新します。これにより、リアクティブなデータバインディングが簡単に実現されます。
  • リアクティブ宣言: $: を使用することで、リアクティブな計算を簡単に宣言できます。

ストア

  • ストア: アプリケーション全体で状態を管理するための仕組みとしてストアが提供されています。ストアを使うことで、コンポーネント間で状態を共有することができます。
  • 種類: Writable store、Readable store、Derived storeなどのストアタイプがあります。

イベントハンドリング

  • イベント: Svelteでは、DOMイベントを簡単にハンドルするための仕組みが提供されています。イベントリスナーを設定するのはシンプルです。

コンパイル

  • コンパイラ: Svelteはコンパイラを使用して、Svelteコンポーネントを効率的なバニラJavaScriptに変換します。これにより、ランタイムのオーバーヘッドが削減され、高速なパフォーマンスが実現されます。

アニメーションとトランジション

  • アニメーション: Svelteには、要素のアニメーションやトランジションを簡単に実装するための組み込みのメカニズムがあります。
  • トランジション: transition、animate、motion などのディレクティブを使用して、アニメーションを簡単に追加できます。

SSR (Server-Side Rendering)

  • Sapper/SvelteKit: SvelteのSSRをサポートするフレームワークとしてSapperやSvelteKitがあります。これにより、初期ロード時間の短縮やSEOの改善が図れます。

Svelte開発のステップバイステップガイド

ステップ 1: Node.js と npm のインストール

Node.jsとnpmをインストールするためのコマンドは以下の通りです。これらのコマンドは、公式サイトから直接インストールする方法と、バージョン管理ツールを使用する方法があります。

公式サイトから直接インストール

  1. Node.js公式サイトにアクセスし、最新のLTS（Long Term Support）バージョンをダウンロードします。
  2. ダウンロードしたインストーラーを実行し、インストールウィザードに従います。

wgetのインストール方法

macOS

Homebrewを使用してインストールできます。

  • Homebrewのインストール（まだインストールしていない場合）:

    /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

バージョン管理ツール（nvm）を使用してインストール

nvm（Node Version Manager）を使用すると、複数のNode.jsバージョンを簡単に切り替えることができます。

nvmのインストール（macOS/Linux）:

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash

または

wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash

インストールが完了したら、ターミナルを再起動し、以下のコマンドを実行してnvmが正しくインストールされたか確認します。

command -v nvm

nvmのインストール（Windows）:

Windowsの場合、nvm-windowsを使用します。以下のリンクからインストーラーをダウンロードし、実行します。

Node.jsのインストール:

nvmがインストールされたら、以下のコマンドでNode.jsをインストールします。

nvm install --lts
nvm use --lts

インストールの確認:

node -v
npm -v

ステップ 2: 新しいSvelteプロジェクトの作成

Svelteのプロジェクトテンプレートを使用して、新しいプロジェクトを作成します。以下のコマンドをターミナルで実行します。

npx degit sveltejs/template my-svelte-project
cd my-svelte-project
npm install

ステップ 3: 開発サーバーの起動

インストールが完了したら、開発サーバーを起動してプロジェクトをローカルで実行します。

npm run dev

ブラウザで http://localhost:8080 にアクセスして、Svelteアプリケーションを確認できます。

ステップ 4: プロジェクトの構造

プロジェクトのディレクトリ構造は以下のようになります。

my-svelte-project/
├── public/
│   ├── build/
│   └── index.html
├── src/
│   ├── App.svelte
│   ├── main.js
└── package.json
  • public/: 公開されるファイルを格納するディレクトリ。index.html があります。
  • src/: ソースコードを格納するディレクトリ。App.svelte と main.js があります。
  • package.json: プロジェクトの設定と依存関係を管理するファイル。

ステップ 5: コンポーネントの作成

新しいコンポーネントファイルの作成: srcフォルダに移動し、Hello.svelteという名前の新しいファイルを作成します。

cd src
touch Hello.svelte

Hello.svelteに以下のコードを記述:

<script>
  export let name = 'World';
</script>

<style>
  h1 {
    color: purple;
  }
</style>

<h1>Hello {name}!</h1>

ステップ 6: コンポーネントの使用

App.svelteを編集して、新しく作成したコンポーネントを使用する:

<script>
  import Hello from './Hello.svelte';
</script>

<Hello name="Svelte" />

ステップ 7: パッケージの追加

必要に応じて追加のパッケージをインストール: Svelteストアを使用する場合、以下のコマンドを実行します。

npm install svelte/store

ステップ 8: ビルドとデプロイ

  1. プロジェクトをビルド:

    npm run build

  2. ビルドされたファイルの確認: ビルドが完了すると、public/buildフォルダに生成されたファイルが表示されます。

  3. Webサーバーにデプロイ: ビルドされたファイルをWebサーバーにデプロイして公開します。デプロイ方法は、使用するホスティングサービスに依存します。例えば、NetlifyやVercelを使用してデプロイすることができます。

追加のヒント

ローカルでの開発サーバーの起動

開発中にローカルサーバーを起動して変更を確認するには、以下のコマンドを使用します。

npm run dev

エラーメッセージの確認

エラーメッセージが表示された場合、その内容を確認して修正します。特に、パスやモジュールのインポートに関するエラーが発生しやすいので、ファイルのパスが正しいかどうかを確認します。

Discussion