【SvelteKit】プロジェクトを作成する

2023-08-28

Svelte(スベルト)と読むようです。
SvelteはJavaScriptのフレームワーク

Svelteとは

手短に言えば Svelte は、ナビゲーションバーやコメントセクション、コンタクトフォームなど、ユーザーがブラウザで見たり操作したりするユーザーインターフェースコンポーネントを書く方法です。Svelte コンパイラは、コンポーネントを、ページの HTML をレンダリングする実行可能な JavaScriptと、ページのスタイリングをする CSS に変換します。

https://kit.svelte.jp/docs/introduction

SvelteKitとは

SvelteKit は、Svelte を使用して堅牢でハイパフォーマンスな web アプリケーションを迅速に開発するためのフレームワークです

https://kit.svelte.jp/docs/introduction

準備

npmコマンドを使うのでNode.jsをインストールしておいて下さい。

Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.
nodejs.org

手順

npm create svelte@latest [プロジェクト名]
cd [プロジェクト名]
npm install
npm run dev

npm create svelte@latest [プロジェクト名] を実行した際に、テンプレートは何を使うか?JavaScriptかTypeScriptか?ESLintを使うか?など聞かれます。

実行例

>npm create svelte@latest my-project

create-svelte version 5.0.5

┌  Welcome to SvelteKit!
│
◇  Which Svelte app template?
│  Skeleton project
│
◇  Add type checking with TypeScript?
│  Yes, using TypeScript syntax
│
◇  Select additional options (use arrow keys/space bar)
│  none
│
└  Your project is ready!

✔ Typescript
  Inside Svelte components, use <script lang="ts">

Install community-maintained integrations:
  https://github.com/svelte-add/svelte-add

Next steps:
  1: cd my-project
  2: npm install (or pnpm install, etc)
  3: git init && git add -A && git commit -m "Initial commit" (optional)
  4: npm run dev -- --open

To close the dev server, hit Ctrl-C

Stuck? Visit us at https://svelte.dev/chat

>cd my-project

>npm install

added 110 packages, and audited 111 packages in 19s

11 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

>npm run dev

> frontend@0.0.1 dev
> vite dev


Forced re-optimization of dependencies

  VITE v4.4.9  ready in 1819 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h to show help

ブラウザで http://localhost:5173/ を開いて以下の画面が表示されればOK!

ちなみにディレクトリ構成は以下のものができあがる

参考

公式ドキュメント

プロジェクトを作成する • SvelteKit documentation
kit.svelte.jp