Skip to main content

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

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

Svelte とは?

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

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

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

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

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

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

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

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

Next: Your first component

1
2
<h1>Welcome!</h1>
 
initialising