Svelteを始める前に知っておこう

by

この記事では、2025年1月にリリースされたSvelte 5の特徴や変更点、Svelteの開発者であるリッチ・ハリスの背景について詳しく解説します。また、日本国内でSvelteやSvelteKitを採用している企業の一覧を紹介し、日本語コミュニティやリソースへのアクセス方法も共有しています。初心者やSvelteに興味がある方に向けて、基本情報から実践的な知識までをわかりやすく解説しています。Svelteの魅力や最新技術に触れるチャンスです！

あさめしコードもSvelteでつくられている

はじめに言わせてください。このサイトはSvelteで作成されています。

GitHubでソースコードも見れます。それぞれReactとVueにも良さがありますが、個人的にはSvelteが一番、個人的に使っていきたいフレームワークです。次はVueのフレームワークのNuxt.jsがいいなと思います。

React、Vue、Svelteのコード比較

以下は、単純なカウンターアプリをReact、Vue、Svelteで実装した例です。

Reactの例：

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

export default Counter;

Vue3の例：

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const count = ref(0);

    const increment = () => {
      count.value++;
    };

    return {
      count,
      increment,
    };
  },
};
</script>

Svelteの例：

<script>
  let count = $state(0);
</script>

<div>
  <p>Count: {count}</p>
  <button onclick={() => count++}>Increment</button>
</div>

比較結果

  • React: 状態管理のためにuseStateを使用し、JSX構文が必要。
  • Vue: テンプレート、データバインディング、メソッド定義が必要。
  • Svelte: 最もシンプルで、状態管理が直接でき、追加のボイラープレートが少ない。

Svelteは、コンパクトなコードで機能を実現できるため、読みやすさとメンテナンス性に優れています。これがSvelteの大きな魅力の一つです。

Svelte5のリリース

2025年の1月にSvelte 5が公式リリースされてから数カ月が経ちました。個人的な感想として、以前の”$を使ったマジカルなシンタックス” が廃止されたことや、新しいRunesの追加について、議論や「Reactっぽい」などの意見も聞かれます。しかし、私の視点ではこれらの変化は精査された結果であり、高く評価しています。

さらにSvelte 5はSvelte 4と下低互換性があるため、以前のプロジェクトをアップデートしても壊れることなく利用できるのは、すごいと感じました。

今日は、初めてJavaScriptを触って、次にSPAフレームワークを試したい方や、Svelteの使い心地を知りたい方に向けて、Svelte 5の基礎をご紹介します。

Svelteの日本語公式サイト

Svelteの開発者：リッチ・ハリス

Svelteの開発者は、リッチ・ハリス (Rich Harris) というイギリス出身のソフトウェアエンジニアです。他はSvelteのクリエーターであり、フロントエンド開発の世界で非常に著名な人物です。

バックグラウンド

リッチは元々ジャーナリストで、特にThe Guardianなどのニュースメディアで働いていました。そこで、データビジュアライゼーションやインタラクティブコンテンツの作成に携わる中で、フロントエンド開発の技術に精通していきました。

オープンソース活動

Svelte以前には、データビジュアライゼーションに特化したJavaScriptライブラリ「Ractive.js」を開発していました。この経験がSvelteの設計にも活かされています。

Svelteの誕生

Svelteは2016年にリリースされ、ReactやVueとは異なるアプローチ (コンパイル時に最適化) を取り入れたフレームワークとして注目されました。車やパフォーマンスの良さが特徴です。

現在の活動

リッチはかつてThe New York Timesでエンジニアとして働いていましたが、•2022年にVercelに入社し、Svelteの開発に専念しています。VercelはNext.jsの開発元でもあり、オープンソースプロジェクトのサポートに力を入れています。

リッチ・ハリスは、シンプルで開発者体験の良いツールを生み出すことに情熱を注いでおり、他の貢献はフロントエンドの進化に大きな影響を与えています。

日本国内でSvelteやSvelteKitを採用している企業

日本内でSvelteやSvelteKitを採用している会社の一覧をご紹介します。

  • 株式会社アンドパッド
  • 株式会社エイチーム
  • OSSTech株式会社
  • 株式会社カヤック
  • 株式会社ギフティ
  • KINTOテクノロジーズ株式会社
  • 株式会社クレディセゾン
  • ニフティ株式会社
  • 株式会社ネクストビート
  • 株式会社フライル
  • 株式会社CAMPFIRE
  • LINEヤフー株式会社
  • 株式会社Liquitous
  • 株式会社MIERUNE
  • 株式会社みんなの銀行
  • 株式会社M&Aクラウド
  • note株式会社

これらの会社の詳細な事例については、Svelte Japan Community が管理するGitHubリポジトリで確認できます。

Svelteコミュニティ

日本のSvelteコミュニティにはDiscordサーバーが存在しています。Qiitaなどを通じて日本語での情報交換やサポートが行われており、初心者から事業で利用している開発者まで広いユーザーに、有益な場を提供しています。

Leave a Comment