新しい開発者向けの Svelte

この短いガイドは、チュートリアル を見て Svelte アプリの作成を始めたいけれど、JavaScript ビルドツールの使用経験があまりない方を対象に、すぐに使い始められるように設計されています。

理解できないことや、説明が不足していることがあれば、遠慮なく Issue を提起 するか、このページの編集を提案 して、より多くの人々を支援してください。

このガイドに従って作業を進めている途中で行き詰まった場合は、チャットルーム で助けを求めるのが最適です。

まずはじめに

コマンドライン（ターミナルとも呼ばれます）を使用します。Windows では、スタートメニューから **コマンドプロンプト** を実行することでアクセスできます。Mac では、Cmd キーと Space キーを同時に押して **Spotlight** を表示し、Terminal.app と入力します。ほとんどの Linux システムでは、Ctrl-Alt-T でコマンドラインが表示されます。

コマンドラインは、ほとんどの人が日常的に使用している GUI（グラフィカルユーザーインターフェース）よりも強力かつ詳細にコンピューター（または別のコンピューター！ですが、それは別の機会のトピックです）を操作する方法です。

コマンドラインでは、ls（Windows では dir）を使用して現在のディレクトリの内容を一覧表示し、cd を使用して現在のディレクトリを変更することで、ファイルシステムを操作できます。たとえば、ホームディレクトリ内にプロジェクトの Development ディレクトリがある場合は、次のように入力します。

cd Development

そこに移動します。そこから、mkdir コマンドを使用して新しいプロジェクトディレクトリを作成できます。

mkdir svelte-projects
cd svelte-projects

コマンドラインの完全な紹介はこのガイドの範囲外ですが、他にもいくつかの便利なコマンドがあります。

• cd .. — 現在のディレクトリの親ディレクトリに移動します
• cat my-file.txt — Mac/Linux（Windows では type my-file.txt）、my-file.txt の内容を表示します
• open .（Windows では start .）— 現在のディレクトリを Finder またはファイルエクスプローラーで開きます

Node.js のインストール

Node は、コマンドラインで JavaScript を実行する方法です。Svelte を含む多くのツールで使用されています。まだインストールしていない場合は、Web サイト から最新バージョンを直接ダウンロードするのが最も簡単な方法です。

インストールすると、3つの新しいコマンドが使用できるようになります。

• node my-file.js — my-file.js 内の JavaScript を実行します
• npm [subcommand] — npm は、svelte パッケージなど、アプリケーションが依存する「パッケージ」をインストールする方法です
• npx [subcommand] — npm で利用可能なプログラムを永続的にインストールせずに実行する便利な方法です

テキストエディターのインストール

コードを書くには、優れたエディターが必要です。最も人気のある選択肢は Visual Studio Code（VSCode）で、当然のことながら、優れた設計と豊富な機能を備えており、豊富な拡張機能（コンポーネントを作成する際に構文の強調表示と診断メッセージを提供する Svelte 用の拡張機能 を含む）があります。

プロジェクトの作成

Svelte + Vite テンプレートを使用します。プロジェクトテンプレートを使用する必要はありませんが、セットアップ作業が大幅に少なくなります。

コマンドラインで、新しいプロジェクトを作成する場所に移動し、次の行を入力します（まとめて貼り付けることもできますが、1行ずつ書いて実行する習慣を身につければ、より良い筋力記憶が得られます）。

npm create vite@latest my-svelte-project -- --template svelte
cd my-svelte-project
npm install

TypeScript を使用する場合は、--template svelte を --template svelte-ts に置き換えることができます。

これにより、新しいディレクトリ my-svelte-project が作成され、create-vite/template-svelte テンプレートからファイルが追加され、npm から多数のパッケージがインストールされます。テキストエディターでディレクトリを開いて、見てみましょう。アプリの「ソースコード」は src ディレクトリにあり、アプリがロードできるファイルは public にあります。

package.json ファイルには、"scripts" というセクションがあります。これらのスクリプトは、アプリケーションを操作するためのショートカット（dev、build、preview）を定義します。開発モードでアプリを起動するには、次のように入力します。

npm run dev

dev スクリプトを実行すると、Vite というプログラムが起動します。Vite の役割は、アプリケーションのソースファイルを取得し、他のプログラム（この場合は Svelte を含む）に渡して、ブラウザーでアプリケーションを開いたときに実際に実行されるコードに変換することです。

ちなみに、ブラウザを開いて http://localhost:5173 に移動します。これは、ポート 5173 のローカル _Web サーバー_（したがって「localhost」）で実行されているアプリケーションです。

src/App.svelte を変更して保存してみてください。アプリケーションは変更内容で更新されます。

アプリのビルド

最後のステップでは、アプリを「開発モード」で実行していました。開発モードでは、Svelte はデバッグに役立つ追加コードを追加し、Vite はアプリの JavaScript が圧縮される最後のステップをスキップします。

アプリを世界と共有する場合、エンドユーザーにとって可能な限り小さく効率的になるように、「本番モード」でビルドする必要があります。そのためには、build コマンドを使用します。

npm run build

dist ディレクトリには、最適化されたバージョンのアプリが含まれるようになりました。次のように実行できます。

npm run preview