よくある質問

Svelte を使い始めたばかりです。どこから始めるべきですか？

始めるには、インタラクティブな チュートリアル をプレイするのが一番だと思います。各ステップは主に特定の側面に焦点を当てており、簡単に理解できます。ブラウザで直接実際の Svelte コンポーネントを編集して実行します。

5～10 分で起動して実行できるはずです。1時間半でチュートリアル全体を完了できるはずです。

どこでサポートを受けられますか？

特定の構文に関する質問の場合は、リファレンスドキュメントから始めるのが良いでしょう。

Stack Overflow は、コードレベルの質問をしたり、特定のエラーで詰まっている場合に最適なフォーラムです。Svelte または Svelte のタグが付いた既存の質問を読んでください。または、自分で質問してください。

オンラインフォーラムやチャットは、ベストプラクティス、アプリケーションアーキテクチャに関する議論や、他の Svelte ユーザーと知り合うのに最適な場所です。Discord または Reddit チャンネルがその例です。回答可能なコードレベルの質問がある場合は、通常、Stack Overflow の方が適しています。

サードパーティのリソースはありますか？

Svelte Society は、書籍とビデオのリストを管理しています。

VS Code で .svelte ファイルを構文ハイライトするにはどうすればよいですか？

Svelte 用の公式 VS Code 拡張機能があります。

.svelte ファイルを自動的にフォーマットするツールはありますか？

prettier-plugin-svelte プラグインを使用して prettier を使用できます。

コンポーネントをドキュメント化するにはどうすればよいですか？

Svelte Language Server を使用するエディターでは、特別な形式のコメントを使用して、コンポーネント、関数、およびエクスポートをドキュメント化できます。

<script>
	/** What should we call the user? */
	export let name = 'world';
</script>

<!--
@component
Here's some documentation for this component.
It will show up on hover.

- You can use markdown here.
- You can also use code blocks here.
- Usage:
  ```tsx
  <main name="Arethra">
  ```
-->
<main>
	<h1>
		Hello, {name}
	</h1>
</main>

注：コンポーネントを記述する HTML コメントでは、@component が必要です。

Svelte はスケールしますか？

最終的にはこれに関するブログ記事が投稿される予定ですが、それまでの間、この issue を確認してください。

UI コンポーネントライブラリはありますか？

スタンドアロンのコンポーネントだけでなく、いくつかの UI コンポーネントライブラリがあります。Svelte Society Web サイトのコンポーネントページの設計システムセクションで確認してください。

Svelte アプリをテストするにはどうすればよいですか？

アプリケーションの構造とロジックが定義されている場所によって、適切にテストするための最適な方法が決まります。すべてのロジックがコンポーネント内にあるわけではないことに注意することが重要です。これには、データ変換、コンポーネント間の状態管理、ログなどの懸念事項が含まれます。Svelte ライブラリには独自のテストスイートがあるため、Svelte が提供する実装の詳細を検証するテストを作成する必要がないことに注意してください。

Svelte アプリケーションには、通常、ユニットテスト、コンポーネントテスト、エンドツーエンド（E2E）の3種類のテストがあります。

ユニットテスト：ビジネスロジックを隔離してテストすることに焦点を当てます。多くの場合、これは個々の関数とエッジケースを検証することです。これらのテストの表面積を最小限に抑えることで、テストを簡潔かつ高速に保つことができます。また、Svelte コンポーネントからできるだけ多くのロジックを抽出することで、より多くのアプリケーションをテストでカバーできます。新しい SvelteKit プロジェクトを作成するときに、ユニットテスト用に Vitest をセットアップするかどうかを尋ねられます。他にも多くのテストランナーを使用できます。

コンポーネントテスト：Svelte コンポーネントがマウントされ、そのライフサイクル全体で期待どおりにインタラクトすることを確認するには、Document Object Model (DOM) を提供するツールが必要です。コンポーネントは（Svelte は通常のライブラリではなくコンパイラーであるため）コンパイルしてマウントすることができ、要素構造、リスナー、状態、および Svelte コンポーネントが提供するその他すべての機能に対してアサートできます。コンポーネントテスト用のツールは、Vitest のようなテストランナーと組み合わせて jsdom のようなインメモリ実装から、Playwright や Cypress などの視覚的なテスト機能を提供する実際のブラウザーを利用するソリューションまで多岐にわたります。

エンドツーエンドテスト：ユーザーがアプリケーションと対話できるようにするには、可能な限り本番環境に近い方法で全体としてテストする必要があります。これは、ユーザーがアプリケーションと対話する方法をシミュレートするために、デプロイされたバージョンのアプリケーションをロードして対話するエンドツーエンド（E2E）テストを作成することで行われます。新しい SvelteKit プロジェクトを作成するときに、エンドツーエンドテスト用に Playwright をセットアップするかどうかを尋ねられます。他にも多くの E2E テストライブラリを使用できます。

テストを開始するためのいくつかのリソース

• Svelte Testing Library
• Cypress での Svelte コンポーネントテスト
• vitest を使用した例
• JSDOM を使用した uvu テストランナーの例
• Vitest と Playwright を使用した Svelte コンポーネントのテスト
• WebdriverIO を使用したコンポーネントテスト

ルーターはありますか？

公式ルーティングライブラリは SvelteKit です。SvelteKit は、ファイルシステムルーター、サーバーサイドレンダリング（SSR）、ホットモジュールリローディング（HMR）を1つの使いやすいパッケージで提供します。React の Next.js と似た点があります。

ただし、任意のルーターライブラリを使用できます。多くの人が page.js を使用しています。非常によく似た navaid もあります。また、子ルートを持つアイソモーフィックな universal-router もありますが、組み込みの履歴サポートはありません。

宣言型の HTML アプローチを好む場合は、アイソモーフィックな svelte-routing ライブラリと、いくつかの追加機能を含む svelte-navigator というフォークがあります。

クライアント側でハッシュベースのルーティングが必要な場合は、svelte-spa-router または abstract-state-router を確認してください。

Routify は、SvelteKit のルーターに似た、別のファイルシステムベースのルーターです。バージョン 3 は Svelte のネイティブ SSR をサポートしています。

sveltesociety.dev のコミュニティが管理するルーターのリストを参照できます。

Svelte に未使用のスタイルを削除しないように指示できますか？

いいえ。Svelte はコンポーネントからスタイルを削除し、他の場合に発生する問題を回避するために、それらについて警告します。

Svelte のコンポーネントスタイルスコープは、特定のコンポーネントに固有のクラスを生成し、Svelte の制御下にあるコンポーネント内の関連要素に追加し、そのコンポーネントのスタイル内の各セレクターに追加することで機能します。コンパイラーがスタイルセレクターが適用される要素を認識できない場合、それを保持するための2つの悪いオプションがあります。

• セレクターを保持してスコープクラスを追加すると、セレクターはおそらくコンポーネント内の予期される要素と一致せず、子コンポーネントまたは {@html ...} によって作成された場合は確実に対応しません。
• スコープクラスを追加せずにセレクターを保持すると、指定されたスタイルはグローバルスタイルになり、ページ全体に影響を与えます。

コンパイル時に Svelte が識別できないものをスタイル設定する必要がある場合は、:global(...) を使用してグローバルスタイルを明示的に選択する必要があります。ただし、セレクターの一部のみを :global(...) でラップできることにも注意してください。.foo :global(.bar) { ... } は、コンポーネントの .foo 要素内に現れるすべての .bar 要素をスタイル設定します。現在のコンポーネントに開始する親要素がある限り、このような部分的なグローバルセレクターは、ほぼ常に必要なものを取得できます。

Svelte v2 はまだ利用できますか？

新しい機能は追加されておらず、バグは非常に厄介な場合や、何らかのセキュリティ脆弱性を提示する場合にのみ修正される可能性があります。

ドキュメントは こちら で引き続き利用できます。

ホットモジュールリローディングを行うにはどうすればよいですか？

HMRをすぐに利用でき、Viteとsvelte-hmrの上に構築されているSvelteKitの使用をおすすめします。 また、rollupとwebpack用のコミュニティプラグインも存在します。