Build the future of communications.
Start building for free

svelte stores posts

  • By Stephenie Minami Nakajima
    はじめてのSvelte - 基礎から応用まで はじめてのSvelte - 基礎から応用まで

    背景

    JavaScriptのフロントエンド開発に関わる技術は移り変わりが目まぐるしく、日々新しいツールやフレームワークが誕生しています。Svelteも近年注目を集めているフロントエンドフレームワークの一つです。2021年のStackOverFlowの開発者サーベイでは、Svelteが開発者から最も愛されているツールとして選ばれました。本稿では、Svelteの基礎的な開発方法から、Storeを使った状態管理やアニメーションの適用方法など、応用までご紹介します。

    目標

    このチュートリアルを最後まで進めると、Svelteの基礎から応用までを学べるとともに、以下のようなタスク管理アプリを作成できます。

    アプリ完成イメージ

    Svelteとは?

    Svelteは、ブラウザ上で動作するユーザーインターフェースを作成するためのオープンソースフレームワークです。

    ReactやVue.jsとの違い

    SvelteはReactVue.jsと同様に、ユーザーインターフェースを作成するためのコンポーネントベースのJavaScriptフレームワークです。

    しかし、SvelteとReactやVue.jsには決定的な違いがあります。Svelteは仮想DOMを使用しません。SvelteはTypeScriptで書かれたコンパイラであり、ビルド時にJavaScriptをコンパイルするのに対し、ReactやVue.jsは実行時に仮想DOMを使ってアプリケーションコードを解釈します。

    Svelteとほかのフレームワークの違いについて詳しくは、ブログ記事「SvelteとReactの基本を比較」を参照してください。

    Svelteを使う …

    Read More
  • By Ashley Boucher
    How to Use Svelte Stores to Share Data Between Components svelte stores

    In this article, you’re going to learn about Svelte stores - Svelte’s mechanism to share state and data between different, unrelated components - by building a very basic shopping app as an example.

    When building React applications, you might use something like Redux to share state outside the component hierarchy, or for simpler applications, you might “lift state” to share data between sibling components.

    Svelte stores are a built-in functionality that enables you to manage state in a more graceful way.

    Prerequisites

    To follow along with this tutorial, you’ll need the following:

    • Node.js installed on your machine
    • Some basic familiarity with component based JavaScript front-end frameworks

    Set up your Svelte app

    Open a command prompt or terminal window and run the following commands to clone a Svelte template, install any required dependencies, and start your local server (on port 5000):

    npx degit sveltejs/template svelte-stores-demo
    cd svelte-stores-demo
    npm install
    npm run …
    Read More
  • Newer
    Older
    Sign up and start building
    Not ready yet? Talk to an expert.