Svelteとは

Svelteを始めよう！Reactよりも使いやすい？

by

今日はSvelteのフレームワークを紹介します。

Svelteってどんなフレームワーク


Svelteは、JavaScriptベースのフロントエンドフレームワークです。Svelteは、コンパイル時にコンポーネントを効果的に変換し、ブラウザで実行可能なJavaScriptコードを生成することで、高速なパフォーマンスと効率的なバンドルサイズを提供します。

Svelteの特徴的な点は、実行時にライブラリコードを含まずにコンポーネントをビルドすることです。ReactやVueなどの他のフレームワークと異なり、Svelteは仮想DOM（Virtual DOM）を使用せず、変更を追跡するための高度なリアクティビティシステムを備えています。これにより、ブラウザでの実行時のパフォーマンスが向上し、アプリケーションの応答性が向上します。

Svelteのコンポーネントは、HTML、CSS、およびJavaScriptを組み合わせて記述します。コンポーネント内の変数や状態を宣言することができ、これらの変数の変更は自動的にコンポーネントの再レンダリングを引き起こします。また、Svelteではトランジションやアニメーションの作成も容易であり、ユーザーインターフェースを豊かにするための強力なツールが提供されています。

Svelteの他の特徴には、ReactやVue.jsなどの他のフレームワークで使われている機能や構文のいくつかが組み込まれていることがあります。また、Svelteアプリケーションは、単一のJavaScriptバンドルファイルとして出力されるため、配信やホスティングが容易です。

総合的に言えば、Svelteは、高速なパフォーマンス、効率的なバンドルサイズ、シンプルな構文、および強力なリアクティビティシステムを提供するモダンなフロントエンドフレームワークです。

Svelteを開発した人は誰

Svelteは、Rich Harris（リッチ・ハリス）という開発者によって作成されました。Rich Harrisは、The New York TimesやThe Guardianなどのメディア企業でフロントエンド開発者としての経験を積んでいました。

彼は、既存のフロントエンドフレームワークが仮想DOMに基づいて動作することに対する懸念を抱いていました。そのため、Svelteを作成し、仮想DOMの代わりにコンパイル時に効率的なコードを生成することで、高速で効率的なフレームワークを提供しました。

Svelteは2016年に最初に発表され、以降、多くの開発者によって利用されています。Rich Harrisは、Svelteのリードデベロッパーとして、フレームワークの進化と改善に取り組んでいます。彼の革新的なアイデアと貢献により、Svelteはフロントエンド開発コミュニティで注目を集めています。

日本でSvelteを使っている会社

  1. Wantedly（ウォンテッドリー）: Wantedlyは、採用プラットフォームを提供する日本の企業です。WantedlyのウェブサイトはSvelteを使用して開発されており、パフォーマンスと使いやすさを重視しています。
  2. SmartHR（スマートエイチアール）: SmartHRは、クラウド型の人事管理ソフトウェアを提供する日本の企業です。彼らのプロダクトの一部はSvelteを使用して開発されており、快適なユーザーエクスペリエンスと高速なレンダリングを実現しています。
  3. PLANT（プラント）: PLANTは、デジタルクリエイティブエージェンシーとして活動している日本の企業です。彼らはSvelteを使用して、クライアントのウェブアプリケーションやインタラクティブなコンテンツを開発しています。

ではSvelteの利点や使うべき状況が理解できたところで早速Svelteのプロジェクトを作成します。

SvelteKitとSvelteの違い


SvelteとSvelteKitは、どちらもSvelteフレームワークをベースにしたツールですが、いくつかの重要な違いがあります。

  1. フレームワークの目的: Svelteは、UIコンポーネントベースのフレームワークであり、効率的なUIの構築とレンダリングに焦点を当てています。一方、SvelteKitは、フルスタックのフレームワークであり、ルーティング、サーバーサイドレンダリング、データプリフェッチなどの機能を提供しています。
  2. プロジェクトの種類: Svelteは、単一のコンポーネントを持つウィジェットや小規模なアプリケーションの開発に適しています。一方、SvelteKitは、マルチページアプリケーションやブログ、ポートフォリオなどのより大規模なプロジェクトに適しています。SvelteKitは、Svelteを使用して複数のページを管理し、ルーティングを処理することができます。
  3. ビルドと開発環境: Svelteは単一のコンポーネントファイルをコンパイルしてバンドルするだけであり、追加の設定やビルドステップは必要ありません。一方、SvelteKitは開発サーバー、ルーティング、サーバーサイドレンダリングなどの機能を提供するため、より複雑な開発環境となります。
  4. サーバーサイドレンダリング: Svelteはクライアントサイドでのみ動作しますが、SvelteKitはサーバーサイドレンダリング（SSR）をサポートしています。SvelteKitでは、ページの初期レンダリングをサーバーサイドで行い、クライアントには最初のHTMLが配信されます。これにより、SEOの向上や初期表示の高速化が可能となります。

これらはSvelteとSvelteKitの主な違いです。Svelteは効率的なUIの構築に特化しており、SvelteKitはフルスタックのフレームワークであり、ルーティングやサーバーサイドレンダリングなどの機能を提供しています。どちらを選択するかは、プロジェクトの要件と目標によって異なります。

Svelte / Svelte Kitを始めよう

①Node.jsのインストール: SvelteはNode.js環境で動作しますので、まずはNode.jsをインストールしてください。公式ウェブサイト (https://nodejs.org) から最新の安定版をダウンロードし、インストールしてください。

②Svelteアプリケーションの作成: Svelteプロジェクトを作成するために、ターミナル（コマンドプロンプト）を開き、以下のコマンドを実行します。

myappの部分は自分のプロジェクト名を入れましょう。

※ちなみにViteでもプロジェクトの作成ができます！

npm create svelte@latest myapp
cd myapp
npm install
npm run dev

では実際にnpm run devのコマンドでアプリを起動してみましょう。ダイナミックでインタラクティブなウェブアプリが表示されましたね。（demoをインストールするとサンプルコードが見れます。）

Svelte Kitのファイル構成

my-project/
├ src/
│ ├ lib/
│ │ ├ server/
│ │ │ └ [your server-only lib files]
│ │ └ [your lib files]
│ ├ params/
│ │ └ [your param matchers]
│ ├ routes/
│ │ └ [your routes]
│ ├ app.html
│ ├ error.html
│ ├ hooks.client.js
│ └ hooks.server.js
├ static/
│ └ [your static assets]
├ tests/
│ └ [your tests]
├ package.json
├ svelte.config.js
├ tsconfig.json
└ vite.config.js

Svelteの一般的なファイル構成は、以下のような形になります。


SvelteKitの一般的なファイル構成は、以下のような形になります。ただし、プロジェクトの設定や追加のモジュールの導入によって、構成は変化する可能性があります。

  1. srcディレクトリ: srcディレクトリには、アプリケーションのソースコードやコンポーネントが配置されます。以下のようなファイルやディレクトリが一般的に存在します:
    • main.js（またはmain.ts）: アプリケーションのエントリーポイントとなるファイルで、SvelteKitの初期設定やルートの定義が行われます。
    • routesディレクトリ: ページごとのコンポーネントやルートファイルが配置されるディレクトリ。各ページは個別のディレクトリを持ち、その中にindex.svelteや[slug].svelteのようなファイルが含まれます。
    • libディレクトリ（オプション）: ユーティリティ関数やAPIクライアントなどの共通のコードが配置されるディレクトリ。
    • componentsディレクトリ（オプション）: 再利用可能なコンポーネントが配置されるディレクトリ。
  2. staticディレクトリ: staticディレクトリには、静的なファイルやアセットが配置されます。これらのファイルはビルド時にそのまま出力ディレクトリにコピーされ、静的ファイルとして提供されます。一般的に、以下のようなファイルやディレクトリが含まれます:
    • 画像、フォント、CSSファイルなどの静的なアセット。
    • favicon.icoやrobots.txtなどのプロジェクトのルートレベルのファイル。
  3. src/routesディレクトリ内の各ページディレクトリ: 各ページディレクトリには、そのページに関連するSvelteコンポーネントや追加のファイルが配置されます。一般的に、以下のようなファイルが含まれます:
    • [slug].svelte: 動的なルートパラメータを持つページのコンポーネント。
    • index.svelte: ルートURLにマッピングされるページのコンポーネント。
  4. ルートディレクトリにある設定ファイル:
    • svelte.config.js: SvelteKitのビルドや設定に関するカスタム設定が含まれる場合に使用されるファイル。
    • package.json: プロジェクトの依存関係やスクリプトなどの情報が含まれるファイル。

終わりに

いかがでしたでしょうか？Svelteを学ぶことは、モダンなフロントエンド開発において非常に有益です。Svelteはシンプルで直感的な構文を持ち、パフォーマンスに優れたアプリケーションを構築することができます。ReactやVueと合わせて是非、活用してみてください。