Introduction

Svelte チュートリアルへようこそ。ここでは高速で小さいWebアプリケーションを簡単に構築するために必要な全てを学ぶことができます。

API docsexamples を参照することもできます。また、すぐにローカルで動かしたい場合は 60-second quickstart をご参照ください。

Svelteとは?

Svelteは速いWebアプリケーションを構築するためのツールです。

洗練されたインタラクティブなユーザーインタフェースを簡単に構築することが目的であるという点においては、ReactやVueなどのJavaScriptフレームワークに似ています。

しかし決定的な違いがあります。Svelteは、アプリケーションの実行時にコードを解釈するのではなく、ビルド時に理想的なJavaScriptに変換します。これによって、他のフレームワークにあるような抽象化と引き換えのパフォーマンスコストを支払う必要もなければ、アプリが最初にロードされるときのペナルティも発生しません。

Svelteを使用してアプリケーション全体を構築することも、既存のコードベースに部分的/段階的に追加することもできます。また、従来のフレームワークに依存することなく、どこでも機能するスタンドアロンパッケージとしてコンポーネントを配布することもできます。

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

HTML、CSS、JavaScriptの基本的な知識があればSvelteを理解することができます。

チュートリアルを進めていくと、機能を解説する小さい演習が表示されます。後の章では前の章で学習した知識が必要になりますので、最初から最後まで学習することを推奨します。必要に応じて、上記のドロップダウンから移動することができます('Introduction / Basics'をクリックしてください)。

各チュートリアルでは、行き詰まった時に正しい解答を表示できる'Show me'ボタンがあります。ただし、これに頼りすぎないようにしてください。提示されたコードブロックをどこに配置するか自分で考え、エディタに手入力することで、より早く学ぶことができます。

コンポーネントを理解する

Svelteでは、アプリケーションは1つ以上のコンポーネントで構成されます。コンポーネントとは、HTML、CSS、JavaScriptをカプセル化した再利用可能な自己完結型のコードブロックのことで、.svelteファイルに記述します。コードエディタの 'Hello world!' は単純なコンポーネントの例です。



		
loading editor...

Console

loading Svelte compiler...


		
loading editor...

Compiler options

result = svelte.compile(source, {
generate:
});


		
loading editor...