Svelte チュートリアルにようこそ！ ここでは、高速でフットプリントが小さい、あらゆるサイズの Web アプリケーションを簡単に構築するために必要なこと全てを学ぶことができます。

API ドキュメント や Playground を参照することもできます。また、すぐにローカルで動かしたい場合は、npx sv create を実行してプロジェクトを作成してください。

Svelte とは？

Svelte は、web アプリケーションを構築するためのツールです。他のユーザーインターフェースフレームワークと同様、マークアップ(markup)、スタイル(styles)、振る舞い(behaviours) を組み合わせたコンポーネントでアプリを 宣言的(declaratively) に構築することができます。

これらのコンポーネントはサイズが小さく効率的な JavaScript モジュールに コンパイル されるため、従来の UI フレームワークには付き物だったオーバーヘッドがありません。

アプリ全体を Svelte で作ることもできますし (例えば SvelteKit のようなアプリケーションフレームワークを使用して。SvelteKit はこのチュートリアルで学習できます)、既存のコードベースに部分的/段階的に追加することもできます。また、どんな場所でも機能するスタンドアロンパッケージとしてコンポーネントを配布することもできます。

このチュートリアルの使い方

Svelte を理解するには、HTML、CSS、JavaScript の基本的な知識が必要です。

このチュートリアルは大きく4つのパートに分かれています:

• Basic Svelte (現在はこちらです)
• Advanced Svelte
• Basic SvelteKit
• Advanced SvelteKit

各セクションには、機能を解説するために作られた演習があります。後のセクションの演習は、それより前のセクションの演習で得た知識を土台として作られているので、最初から最後まで通しで学習することをおすすめします。必要に応じて、上部のメニューから移動することができます。

行き詰まったら、スクリーンの右上にある 正解を見る ボタンをクリックすることもできます。(このセクションのように演習がないセクションでは 正解を見る ボタンは無効化されています。) ただし、これに頼りすぎないようにしてください。提示されたコードブロックをどこに配置するか自分で考え、エディタに手入力することで、より早く学習することができます。