Svelte3入門

序章

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アプリケーションの基本です。これらは、HTMLのスーパーセットを使用して、.svelteファイルに書き込まれます。 .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の詳細については、公式ドキュメントを確認してください。