📘

Svelte + Vite で始める最初のプロジェクト作成

に公開
JavaScript
Svelte
Vite
フロントエンドフレームワーク
tech

はじめに

この記事では、Svelte と Vite を使った最小構成のプロジェクトを作成する手順 を学べます。
Svelte は軽量で高速なフロントエンドフレームワークで、React や Vue と似たコンポーネント指向の開発が可能です。
Vite は Svelte プロジェクトを効率よくビルド・開発するためのモダンなツールで、開発サーバーの起動やファイル更新の反映を高速に行えます。

1. プロジェクト作成コマンドを実行

npm create vite@latest

2. 必要なパッケージをインストールして良いか聞かれる

Need to install the following packages: create-vite@8.0.1
Ok to proceed? (y)

→ y と入力して続行

3. プロジェクトの基本設定を選ぶ

  • Project name → my-app（任意の名前）
  • Select a framework → Svelte
  • Select a variant → JavaScript（TypeScript は初心者向けには不要）
  • Use rolldown-vite (Experimental)? → No（安定版でOK）
  • Install with npm and start now? → Yes（依存関係を自動でインストールして開発サーバーも起動）

4. 依存関係のインストール

  • npm が自動で必要なパッケージを入れます
  • 成功すると added XX packages のように表示されます

5. 開発サーバーの起動

  • 自動で vite 開発サーバーが起動
  • ブラウザで次の URL を開くと Svelte が動作：
    [http://localhost:5173/]

6. サーバー再起動などの自動監視

ファイルを編集すると自動でサーバーが再起動され、変更が反映されます

このあとターミナルに入力できる代表的なコマンド

  • サーバー停止 → Ctrl + C
  • 開発サーバーの起動 → npm run dev

まとめ

この記事では、Svelte + Vite で最小構成のプロジェクトを作成し、開発サーバーを起動する手順を学びました。
次のステップでは、src/App.svelteを編集して自分の好きなテキストやボタンを表示してみましょう。
最後まで読んでいただき、ありがとうございました！ 🎉

Discussion