このチュートリアルは、コンポーネントを書くプロセスに慣れることを目的としています。しかしいつかは、ご自身のテキストエディタで快適にコンポーネントを書きたいと思うでしょう。

まず、Svelte とビルドツールをインテグレートする必要があるでしょう。私たちは、SvelteKit の使用をおすすめしています。これは vite-plugin-svelte で Vite をセットアップしているものです。

npm create svelte@latest myapp

また、コミュニティによってメンテナンスされているインテグレーション も多数ございます。

もしWeb開発にあまり慣れておらずこういったツールを使ったことがなくてもご安心ください。順を追って段階的に進められるシンプルなガイドSvelte for new developersをご用意しています。

また、テキストエディタの設定もしておくと良いでしょう。公式のVS Code extensionはもちろん、他のエディタ向けにもプラグイン があります。

そして、プロジェクトのセットアップが完了したら、Svelteのコンポーネントを使うのは簡単です。コンパイラは各コンポーネントを通常のJavaScript classに変換します。コンポーネントをインポートして new でインスタンス化するだけです。

ts
import App from './App.svelte';

const app = new App({
	target: document.body,
	props: {
		// we'll learn about props later
		answer: 42
	}
});

必要に応じて、component API を使用して app を操作することもできます。