Vite を使った Svelte プロジェクトのセットアップ

by

1. はじめに

フロントエンド開発で注目されている「Svelte」。そのSvelteを使ったプロジェクトの開発効率をさらに高めてくれるツールが「Vite（ヴィート）」です。

この記事では、Viteを使ったSvelteプロジェクトのセットアップ手順を詳しく解説します。また、「なぜViteを使うのか？」その利点についても初心者にもわかりやすく説明します。Viteの利便性を体感しながら、モダンな開発環境を一緒に構築していきましょう！

2. なぜViteを使うのか？

Viteは、次世代のフロントエンドビルドツールです。その名前はフランス語で「速い」を意味し、その名の通り、高速な開発体験を提供します。

Viteを選ぶ利点

  1. 高速な開発サーバー
    • ViteはネイティブESモジュール（ESM）を活用し、必要な部分だけをロードします。これにより、サーバーの起動が爆速です。
  2. ホットモジュールリプレースメント（HMR）が超高速
    • コードを保存した瞬間に変更が反映されるため、開発中のストレスが軽減されます。
  3. 軽量で効率的なバンドル
    • ビルド時にはRollupを使用して効率的なバンドルを実現。コード分割やツリ―シェーキングも自動対応。
  4. 設定が簡単
    • 設定ファイルがシンプルで、Svelteを含む多くのフレームワークをすぐに使えるテンプレートが用意されています。
  5. エコシステムとの互換性
    • SvelteやReact、Vue.jsなど、多くのフレームワークと簡単に統合できます。

Viteを使えば、「速さ」「シンプルさ」「柔軟性」を兼ね備えた開発環境を手に入れることができます！

3. Viteを使ったSvelteプロジェクトのセットアップ手順

それでは、Viteを使ってSvelteプロジェクトをセットアップしていきましょう。以下の手順に従うだけで、数分で環境が整います。

ステップ1: Node.jsをインストールする

まずは、Node.jsがインストールされていることを確認しましょう。

  1. ターミナルで次のコマンドを入力： node -vコマンドでバージョンが表示されればOKです。Node.jsが未インストールの場合は、公式サイトからインストールしてください。
node -v

ステップ2: ViteのSvelteテンプレートを作成

1．ターミナルを開き、プロジェクトを作成したいフォルダへ移動します。

2．以下のコマンドを入力して、ViteのSvelteテンプレートを作成します：

npm create vite@latest my-svelte-app -- --template svelte
  • my-svelte-app はプロジェクト名です。好きな名前に変更可能です。

3．プロジェクトフォルダに移動：

cd my-svelte-app

ステップ3: 必要な依存パッケージをインストール

1．以下のコマンドを実行して依存関係をインストールします：

npm install

2．インストールが完了したら、開発サーバーを起動します：

npm run dev
  1. ローカル開発サーバーが起動し、通常は http://1localhost:5173 が表示されます。このURLをブラウザで開くと、Svelteのデフォルト画面が確認できます！

4. プロジェクトのファイル構成

Viteで作成したSvelteプロジェクトのファイル構成は以下のようになっています：

plaintextCopy codemy-svelte-app/
├── node_modules/       # npmパッケージ
├── public/             # 公開用ファイル（画像やfaviconなど）
├── src/                # ソースコード
│   ├── App.svelte      # メインのSvelteコンポーネント
│   ├── main.js         # エントリーポイント
├── package.json        # npmスクリプトや依存関係
├── vite.config.js      # Viteの設定ファイル

5. Viteのカスタマイズ

カスタム設定例: 開発ポートの変更

デフォルトでは開発サーバーはポート5173で動作しますが、これを変更したい場合は、vite.config.jsに以下を追加します：

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

export default defineConfig({
  plugins: [svelte()],
  server: {
    port: 3000, // 開発サーバーのポートを変更
  },
});

Tailwind CSSの導入

モダンなスタイリングを手軽に行いたい場合は、Tailwind CSSを追加するのがおすすめです。以下の手順で設定できます：

1．Tailwind CSSをインストール：

npm install -D tailwindcss postcss autoprefixer npx tailwindcss init

2．tailwind.config.cjs を編集し、Svelteのファイルをスキャン対象に追加します：

content: ['./src/**/*.{html,js,svelte,ts}'],

3．src/app.css に以下を追加：

@tailwind base; @tailwind components; @tailwind utilities;

4．main.jsにCSSをインポート：

import './app.css';

これでTailwind CSSが使えるようになります！

6. まとめ

Viteを使ったSvelteプロジェクトのセットアップは驚くほど簡単で、高速な開発体験を提供してくれます。特に、HMR（ホットモジュールリプレースメント）やシンプルな設定は、モダンな開発環境を求める開発者に最適です。

次のステップとして、以下を試してみましょう：

  1. Svelteのコンポーネントを使ったUI開発
  2. Tailwind CSSやDaisyUIを使ったスタイリング
  3. APIとの連携やデータフェッチング

ViteとSvelteで、快適な開発ライフをスタートさせてください！

  1. ↩︎

Leave a Comment