SvelteKitを使用した新しいアプリの作成方法


  1. SvelteKitプロジェクトの作成 まず、SvelteKitプロジェクトを作成するために、ターミナルで以下のコマンドを実行します:
npx degit sveltejs/template my-svelte-app
cd my-svelte-app
npm install

これにより、SvelteKitのテンプレートを使用して新しいプロジェクトが作成され、必要な依存関係がインストールされます。

  1. ページの作成 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>
  1. ルーティングの設定 SvelteKitでは、ルーティングは自動的に処理されます。src/routesディレクトリ内のファイル構造に基づいて、URLパスが自動的に生成されます。例えば、src/routes/about.svelteというファイルがあれば、/aboutというURLでアクセスできるようになります。

  2. アプリのビルドと実行 SvelteKitアプリをビルドして実行するためには、以下のコマンドを実行します:

npm run build
npm run dev

npm run buildコマンドは、アプリケーションをビルドし、静的なファイルを生成します。npm run devコマンドは、開発用サーバーを起動してアプリを実行します。

以上が、SvelteKitを使用して新しいアプリを作成する基本的な手順とコード例です。これをベースにして、さまざまな機能やコンポーネントを追加していくことができます。詳細なドキュメントやチュートリアルも公式のSvelteKitのウェブサイトで入手可能ですので、参考にしてください。