Skip to main content

Frequently Asked Questions

Svelteは初めてです。どこから始めればいいですか? permalink

最初に行う最善の方法は、対話型の チュートリアル を試すことです。各ステップは、主に1つの特定の側面に焦点を当てており、容易に実行できます。ブラウザで実際のSvelteコンポーネントを編集して実行します。

5~10分あれば、すぐに始められます。1時間半でチュートリアル全体を完了できます。

サポートはどこで受けられますか? permalink

特定の構文に関する質問がある場合は、 APIページ が参考になると思います。

コードレベルの質問やエラーで詰まった際に利用されているStack Overflowという人気のフォーラムがあります。 Svelte とタグづけられた既存の質問を読んでみてください。または 自分で質問 してみください!

ベストプラクティスやアプリケーションアーキテクチャについて議論したり、他のSvelteユーザーと交流する場所としてオンラインやチャットの場があります。例えば 私達のDiscord または Redditのチャンネル などです。コードレベルの質問がある場合は、Stack Overflowの方が適切です。

日本語翻訳版 追記:上記のDiscordはSvelte本体のもので、英語でコミュニケーションが行われています。もし日本語で質問したり交流したいのであれば、Svelte日本のDiscordにどうぞ!

Svelte v2はまだ入手可能ですか? permalink

新しい機能は追加されていませんし、バグはおそらく、非常に悪質な場合や、何らかのセキュリティ脆弱性がある場合にのみ修正されるでしょう。

ドキュメントはまだ こちら から入手できます。

ホットモジュールリロードをするにはどうすればよいですか? permalink

SvelteKit の利用をお勧めします。SvelteKit は、すぐに利用可能な HMR をサポートし、Vitesvelte-hmr をもとに構築されています。rollupwebpack のためのコミュニティプラグインもあります。

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

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

コンポーネントのドキュメントを作成する方法はありますか? permalink

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>

Note:コンポーネントを記述するHTMLコメントには@componentが必要です。

TypeScriptのサポートはどうですか? permalink

svelte-preprocess などのプリプロセッサをインストールする必要があります。svelte-check を使用すると、コマンドラインからタイプチェックを実行できます。

Svelteテンプレートでリアクティブ変数の型を宣言するには、次の構文を使用します。

let x: number;
$: x = count + 1;

タイプまたはインタフェースをインポートするには、TypeScriptのtype修飾子を使用します:

import type { SomeInterface } from './SomeFile';

svelte-preprocess はインポートが型であるか値であるかを認識しないため、 type 修飾子を使用する必要があります。 svelte-preprocess は他のファイルを認識することなく一度に1つのファイルのみをトランスパイルするため、この修飾子が存在しない型のみを含むインポートを安全に消去することはできません。

Svelteはスケールしますか? permalink

いずれブログに書く予定ですが、それまではこちらのIssueをご確認ください。

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

単独のコンポーネントだけではなく、いくつかの UI コンポーネントライブラリがあります。Svelte Society Web サイトの components section で探してみてください。

Svelteアプリケーションをテストするにはどうすればよいですか? permalink

ビューロジックとビジネスロジックを分離することをお勧めします。データ変換またはコンポーネント間の状態管理は、Svelteコンポーネントの外部に保管するのが最適です。このようにしてJavaScriptの機能をテストするのと同じように、これらの部分をテストすることができます。コンポーネントをテストする際には、コンポーネントのロジックはテストをして、Svelteが提供する実装の詳細はテストする必要はないことを覚えておくのがベストです(Svelteライブラリにはそれ自身のテストがあるため)。

テストを行うときにはいくつかの方法がありますが、一般的にはコンポーネントをコンパイルして何かにマウントし、テストを実行します。基本的には、テストするコンポーネントごとにバンドルを作成し(なぜなら、svelteはコンパイラであり、通常のライブラリではないからです)、それらをマウントする必要があります。JSDOMインスタンスにマウントできます。また、Playwright、Puppeteer、Cypressなどのライブラリを使用して本物のブラウザを使うこともできます。

単体テストを始めるためのリソース:

ルーターはありますか? permalink

公式のルーティングライブラリは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のルーターによく似たファイルシステムベースのルーターです。Version 3はSvelteのネイティブなSSRをサポートしています。

We stand with Ukraine. Donate → We stand with Ukraine. Petition your leaders. Show your support.