Svelte3入門

投稿日: 2022-04-20 2022-10-09
タグ: javascript

序章

JavaScriptを使用してアプリケーションを構築する場合、ソフトウェア開発者が行う決定の核心は常に高性能と透過性です。 Svelte は、命令型コード用の高性能コンポーネントフレームワークです。

Svelteはまた、ユーザーインターフェイスをテーブルにスキャフォールディングする別の方法をもたらします。 ReactとVueはブラウザーでほとんどの作業を実行しますが、Svelteは、アプリケーションのコンポーネントをDOMを更新するコードに変換することにより、ビルド時に実行されます。

このチュートリアルでは、Svelteの基本と、Svelteの機能を利用して高性能アプリケーションを構築する方法について説明します。

ステップ1—Svelteアプリケーションの構築

Svelteアプリケーションを構築するときに最初に行うことは、Svelteをプロジェクトスキャフォールディングツールと統合することです。このチュートリアルでは、degitを使用します。

ターミナルに移動し、次のコマンドを実行して、アプリケーションの新しいディレクトリを作成します。

npx degit sveltejs/template my-svelte-app

新しいディレクトリに移動します。

cd my-svelte-app

NPM を使用している場合は、次のコマンドを使用して依存関係をインストールします。

npm install

Yarn を使用している場合は、次のコマンドを使用して依存関係をインストールします。

yarn install

次のコマンドを実行して、ビルド中にアプリケーションを監視できるローカル開発サーバーを実行します。

npm run dev

これにより、サーバーが起動します http://localhost:5000.

プロジェクトフォルダには、スキャフォールディングプロセス中に作成されたファイルがいくつかあります。このチュートリアルでは、アプリケーションの核心となるファイルについて詳しく説明します。

package.json：これは、プロジェクトが依存するパッケージがリストされている場所です。 ReactやVueとは異なり、Svelteの package.json ファイルには、開発者の依存関係のみがリストされ、前述の2つのフレームワークで見慣れている通常の標準的な依存関係はリストされていません。その理由は、本番用にビルドするときに、フレームワークがコードをVanillaJavaScriptにコンパイルするためです。
main.js：これは、アプリケーション内のすべてのJavaScriptのエントリポイントです。コンポーネントはここでインスタンス化されます。
App.svelte：これは、アプリケーションの最初のコンポーネントです。 Vueコンポーネントがを使用して作成される方法と同様です .vue 拡大。これには、コンポーネントが機能するために必要なすべてのロジック、スタイル、およびマークアップが含まれています。
index.html：開発中、 public アプリケーションのフォルダには、アプリケーションのバンドルの縮小されていないバージョンが含まれます。 index.html そのバンドルが実行される場所です。

ステップ2—Svelteコンポーネントを作成する

コンポーネントは、すべてのSvelteアプリケーションの基本です。それらはに書かれています .svelte HTMLのスーパーセットを使用したファイル。 A .svelte ファイルには2つのセクションがあります。

<script>：このセクションには、アプリケーションを実行するすべてのJavaScriptとロジックが含まれています。
<style>：これには、アプリケーションのCSSスタイルが含まれています。マークアップ：これにはHTMLマークアップが含まれ、ReactでJSXを作成するのと似ています。

以下のコードブロックは、Svelteコンポーネントがどのように見えるかの例です。

<script>
  let framework = 'Svelte';
</script>

<style>
  h1 {
       color: blue;
       font-family: 'Open Sans';
       font-size: 2em;
    }
</style>

<h1>This is a {framework} Component.</h1>

Result
// This is a Svelte Component.

ステップ3—リアクティブ宣言の調査

Svelteにはリアクティブ宣言と呼ばれる機能があります。ほとんどの場合、アプリケーションを構築するとき、それは少し大きくなります。コンポーネントの状態の一部は、他の部分から呼び出され、変更された場合は再計算する必要があります。これはまさにリアクティブ宣言が使用される目的です。以下のコードブロックを確認してください。

<script>
  let car = 'Mercedes';
$: carMakeSedan = car + ' E350';
$: carMakeSuv = car + ' G500';
</script>

<p> The {car} you want is a {carMakeSedan}.</p>
<p> If you would like something more expensive, go for the {carMakeSuv}.</p>

 Result
// The Mercedes you want is a Mercedes E350.
// If you would like something more expensive, go for the Mercedes G500.

3行目と4行目は、参照されている値のいずれかが変更されるたびにこのコードを再実行するようにSvelteに指示しています。複数回参照する必要がある場合、または値に依存する他の値が存在する場合、値は相対的である必要があります。

ステップ4—プロパティの作成と宣言

アプリケーションを構築するとき、最終的にはコンポーネントからコンポーネントにデータを渡す必要があります（親から子コンポーネントとも呼ばれます）。そのためには、propsでプロパティを宣言する必要があります。 Svelteはこれを使用してこれを実現します export キーワード。例については、以下のコードサンプルを確認してください。

// Car.svelte
<script>
  export let carMake;
</script>

<p>You ordered a {carMake}</p>

に移動します App.svelte 親コンポーネント：

// App.svelte
<script>
  import Mercedes from './Car.svelte';
  import BMW from './Car.svelte';
  import Jaguar from './Car.svelte';
</script>

<Mercedes carMake={' Mercedes'}/>
<BMW carMake={' BMW'}/>
<Jaguar carMake={' Jaguar'}/>

// You ordered a Mercedes
// You ordered a BMW
// You ordered a Jaguar

デフォルト値を指定するオプションもあります。の中に Car.svelte 以下の例では、のデフォルト値を指定できます carMake:

//Car.svelte
<script>
  export let carMake = 'Mercedes';
</script>

<p>You ordered a {carMake}</p>

その後、コンポーネントのインスタンス化に失敗した場合 carMake、デフォルト値に戻ります。

//App.svelte
<script>
  import Mercedes from './Car.svelte';
</script>

<Mercedes carMake={' Mercedes'}/>
<Mercedes />

// You ordered a Mercedes
// You ordered a Mercedes

ステップ5—ロジックとバインディングの調査

ReactにおけるJSXの特定の特徴の1つは、条件付きステートメントを含めることができないことです。このようなロジックが必要なほとんどの場合、通常は3値演算子またはその他の回避策に置き換えられます。 Svelteには、マークアップをラップすることで条件付きでレンダリングする機能があります。 if ブロック。以下のコードサンプルを確認してください。

<script>
  let luggage = { checkedIn: false };

  function toggle() {
    luggage.checkedIn = !luggage.checkedIn;
  }
</script>

{#if luggage.checkedIn}
  <button on:click={toggle}>
    Luggage is Checked Out
  </button>
{/if}

{#if !luggage.checkedIn}
  <button on:click={toggle}>
    Luggage is Checked In
  </button>
{if}

Reactのようなフレームワークと同様に、Svelteのデータフローはトップダウンです。親コンポーネントは子コンポーネントにプロパティを設定しますが、その逆はありません。 Svelteでは、を使用してこれを回避できます bind: value 指令。以下のコードサンプルを確認してください。

<script>
  let framework = 'Svelte';
</script>

<input bind:value={framework}> 

<p>{framework} is awesome!</p>

これにより、 framework の値を更新します input、しかしに変更します input また更新されます framework.

結論

Svelteはまだ初期段階にあるかもしれませんが、多くの可能性と期待を示しています。この投稿は紹介であるため、Svelteを使用して達成できることはまだたくさんあります。 Svelteの詳細については、公式ドキュメントを確認してください。

getdocs

13036