Skip to main content
Basic Svelte
Introduction
Reactivity
Props
Logic
Events
Bindings
Classes and styles
Actions
Transitions
Advanced Svelte
Advanced reactivity
Reusing content
Motion
Advanced bindings
Advanced transitions
Context API
Special elements
<script module>
Next steps
Basic SvelteKit
Introduction
Routing
Loading data
Headers and cookies
Shared modules
Forms
API routes
$app/state
Errors and redirects
Advanced SvelteKit
Hooks
Page options
Link options
Advanced routing
Advanced loading
Environment variables
Conclusion

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

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

Svelte とは?

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

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

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

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

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

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

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

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

Edit this page on GitHub

previous next
1
2
<h1>Welcome!</h1>