Introduction

始める前にpermalink

SvelteKitはまだ開発早期段階で、1.0に到達するまでに変更される可能性があります。このドキュメントは作業途中のものです。もし行き詰まったら、Discord チャットルームにどうぞ。

Sapper からのアップグレードについては migration guides(移行ガイド) をご覧ください。

SvelteKitとはpermalink

SvelteKitはとてもハイパフォーマンスなWebアプリを構築するためのフレームワークです。

モダンなベストプラクティスを全て取り入れたアプリを構築するのは、恐ろしく複雑なことです。これらのプラクティスには、必要最小限のコードのみをロードするためのビルドの最適化、オフラインサポート、プリフェッチ (ユーザーがナビゲーションを開始する前 にページを取得すること)、様々な設定が可能なレンダリング (HTMLの生成をサーバー上で行うかブラウザ上で行うか、それをランタイムで行うかビルド時に行うかなど) が含まれています。SvelteKitが全ての退屈な作業を行ってくれるので、あなたはクリエイティブな作業に専念することができます。

Vite を Svelte plugin 経由で使用しており、非常に高速で機能豊富な開発体験を提供します。Hot Module Replacement (HMR)により、コードを変更すると即座にブラウザに反映されます。

このガイドを理解するためにSvelteを知っておく必要はありませんが、知っていれば役に立つでしょう。簡単に紹介しておくと、Svelteはコンポーネントを高度に最適化されたvanilla JavaScriptにコンパイルしてくれるUIフレームワークです。詳しくは、Svelteを紹介するブログ記事とSvelteチュートリアルを読んでみてください。

Getting startedpermalink

SvelteKitアプリを構築してみるのに最も簡単な方法は、npm init を実行することです:

npm init svelte my-app
cd my-app
npm install
npm run dev

最初のコマンドは、TypeScript などの基本的なツールをセットアップするかどうか確認して、my-app ディレクトリに新しいプロジェクトを生成します。追加のツールの設定に関するポイントについては、FAQをご覧ください。以降のコマンドは、依存関係をインストールし、 localhost:3000 でサーバーを起動します。

ここには2つの基本的なコンセプトがあります。

• アプリの各ページは Svelte コンポーネントです
• プロジェクトの src/routes ディレクトリにファイルを追加することで、ページを作成できます。これらはサーバーでレンダリングされるのでユーザーの最初のアクセスの際に可能な限り速く表示されるようになり、それからクライアントサイドのアプリに引き継がれます。

ファイルを編集して、どのように動作するのか確かめてみてください。もしかしたら、もうこれ以降のガイドを読む必要はないかもしれません！

エディタのセットアップpermalink

Visual Studio Code (通称 VS Code) と Svelte extension のご使用をおすすめしていますが、他にも数多くのエディタをサポートしています。