- SvelteKitプロジェクトの作成 まず、SvelteKitプロジェクトを作成するために、ターミナルで以下のコマンドを実行します:
npx degit sveltejs/template my-svelte-app
cd my-svelte-app
npm install
これにより、SvelteKitのテンプレートを使用して新しいプロジェクトが作成され、必要な依存関係がインストールされます。
- ページの作成
SvelteKitでは、ページは
src/routes
ディレクトリ内に作成されます。新しいページを作成するためには、該当するディレクトリに.svelte
拡張子のファイルを作成します。例えば、src/routes/index.svelte
というファイルを作成しましょう。
以下は、簡単なコード例です:
<script>
let message = "Welcome to my SvelteKit app!";
</script>
<main>
<h1>{message}</h1>
</main>
<style>
h1 {
color: blue;
}
</style>
-
ルーティングの設定 SvelteKitでは、ルーティングは自動的に処理されます。
src/routes
ディレクトリ内のファイル構造に基づいて、URLパスが自動的に生成されます。例えば、src/routes/about.svelte
というファイルがあれば、/about
というURLでアクセスできるようになります。 -
アプリのビルドと実行 SvelteKitアプリをビルドして実行するためには、以下のコマンドを実行します:
npm run build
npm run dev
npm run build
コマンドは、アプリケーションをビルドし、静的なファイルを生成します。npm run dev
コマンドは、開発用サーバーを起動してアプリを実行します。
以上が、SvelteKitを使用して新しいアプリを作成する基本的な手順とコード例です。これをベースにして、さまざまな機能やコンポーネントを追加していくことができます。詳細なドキュメントやチュートリアルも公式のSvelteKitのウェブサイトで入手可能ですので、参考にしてください。