Svelteを使用して読書リストを作成します-jsチュートリアル-php.cn

Svelteを使用して読書リストを作成します

Joseph Gordon-Levitt

リリース： 2025-02-09 10:01:08

オリジナル

928 人が閲覧しました

Svelte：フロントエンドフレームワークの風景の新星

Svelteは人気を急速に獲得し、「ちょうど別のフロントエンドフレームワーク」のステータスを超えています。その称賛には、「ブレークスルーオブザイヤー」（JS 2019の状態）、最高の満足度評価（JS 2020の状態）、および最も愛されているWebフレームワーク（Stack Overflow 2021）のタイトルが含まれます。この成功は、小さなバンドルサイズ、優れたパフォーマンス、ユーザーフレンドリーなデザインの魅力的なブレンドに由来しています。その中心的な強みを超えて、Svelteは、ビルトイン州の管理、移行、アニメーションなどの貴重な機能を提供します。このチュートリアルでは、Svelteがこの効率をどのように達成するかを調査します。その後のチュートリアルは、Svelteを使用したアプリケーションの構築をより深く掘り下げます。の起源

Svelteの主流の採用は2020年代初頭に始まりましたが、その起源は最初のGithubコミットで2016年後半にさかのぼります。 Rich Harris（ロールアップバンドラーでも知られる）によって作成されたSvelteは、Guardian 簡単な書籍リストアプリケーションの構築

Svelteの機能を説明するために、簡単な本リストアプリケーションを作成しましょう。最終的なアプリケーションは、以下の画像に似ています：

公式のSvelteプロジェクトテンプレートから始めます（代替品には、より複雑なアプリケーション用のViteベースのテンプレートまたはSveltekitが含まれます）。必要なパッケージをインストールした後（

）、基本的なHTML構造を作成するために

を変更します：

このコードは、上位レベルで直接記述されており、SvelteのHTML-SuperSet Syntaxをレバレッジします。 Build a Reading List with Svelte 次に、静的ブックリストとループを追加してレンダリングします。

<h4>Add Book</h4>
<input type="text">
<h4>My Books</h4>
<ul>
  <li>A book</li>
</ul>

ログイン後にコピー

</pre> <label> Add Book <input type="text" bind:value={newBook} on:keydown={addBook}> </label> <h4>My Books</h4> <ul> {#each books as book} <li>{book}</li> {/each} </ul>

bind:value={newBook}newBook入力とon:keydown={addBook}変数の間に双方向の結合を作成します。 addBookイベントリスナーを追加します。 books関数は、Enterが押されたときに

配列を更新します。 Svelteの反応性は、コンポーネントを自動的にレンダーします

SVELTEのコンピレーションプロセス

Svelteのパフォーマンスと小さなバンドルサイズは、コンパイラの性質によるものです。ファイルを前処理し、それらをDOMを外科的に更新する最適化されたJavaScriptに変換します。これにより、大規模なランタイムの必要性が排除され、効率的なレンダーが可能になります。 .svelteスタイリングとトランジションの追加

CSSでUIを強化しましょう：

デフォルトでは、

Svelte Scopesスタイル。最後に、フェードイントランジションを追加しましょう：

<🎜>

<label>
  Add Book
</label>
<h4>My Books</h4>
<ul>
  {#each books as book}
    <li>{book}</li>
  {/each}
</ul>

ログイン後にコピー

スタイリングやトランジションを含む完全なコードを以下に示します。

<style>
  input {
    padding: 5px 10px;
  }
  li {
    list-style: none;
  }
  ul {
    padding: 5px 0;
  }
</style>

ログイン後にコピー

これにより、機能的で視覚的に魅力的な本リストアプリケーションが得られます。（最終アプリケーションの画像はこちらに移動します：

）

<🎜>

<ul>
  {#each books as book}
    <li transition:fade>{book}</li>
  {/each}
</ul>

ログイン後にコピー

建築上の考慮事項と将来の強化 Build a Reading List with Svelte

このチュートリアルは、基本的な紹介を提供します。より大きなアプリケーションでは、状態管理、複数のコンポーネント、およびコンポーネント相互作用メカニズムが必要です。 Svelteはこれらのソリューションを提供しています。これは後続のチュートリアルで調査されます。

次のプロジェクトに適していますか？

Svelteのアクティブなメンテナンス、堅牢なツール、安定した機能、成長するエコシステム、およびSveltekitの可用性により、さまざまなプロジェクトの強力な競争相手になります。コミュニティは繁栄しており、フレームワークは減速する兆候を示していません。

次のステップ

これは6部構成のシリーズの最初の部分です。将来のパーツでは、テンプレートの構文、リアクティブステートメント、ストア、コンポーネントの相互作用、テストをカバーします。完全なシリーズはAmazonでも利用できます

以上がSvelteを使用して読書リストを作成しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。