・0 pv・3 min read
Svelte学習メモ SvelteKit導入編
こんにちは。
今日は、Sveltekitの導入についてのメモを書いときます。
SvelteKitとは？
SvelteKitは、SvelteとViteで構築されたフレームワークです。
ReactでいうNext.js、VueでいうNuxtjsとの関係性に似ているようです。
最初から、ルーティング、サーバーサイドレンダリング(SSR)、静的サイト生成(SSG)
などの仕組みが用意されていて、
PlayGround環境でなく、ローカル環境でSvelteを実行したい時は導入しておくといい感じです。
SvelteKitの導入方法
node.jsをあらかじめインストールして、npm, npx コマンドを使えるようにしておいてください。
もし、npx コマンドが入ってない場合は、次のコマンドで入れられます。
npm install -g npxnpxコマンドが入っている状態で、次のコマンドを実行してみましょう。
npx sv create my-appコマンドを実行すると、次のような画面が出るので、minimalを選択。
typescriptを使うかどうか聞かれるので、お好みで。
prettierとかtailwindとか、何か追加したい時がある場合は、こちらを追加しときましょう
パッケージマネージャを選択しましょう。(通常はnpmでOK)
ここまで実行すると、しばらくインストールを待った後に、プロジェクトが作成されるはずです。
プロジェクトが作成されたら、コマンドプロンプト上で、以下のコマンドを実行してやりましょう。
cd my-app
npm install
npm run devこれで実行されます。
実行すると、こんな感じの画面が出ます。
フォルダ構成
src/
├── routes/
│
└── +page.svelte ・・・ルートのコンポーネントファイル。ホームのものはここに記述するとよい。
└── libs ・・・jsファイルやtsファイルを置くところ。使い回すコンポーネントをここにおいてもいいかも。
static・・・静的ファイルをおくところ。localhost:5173/favicon.pngのような感じでアクセスできます。
vite.config.ts ・・・Vite用のコンフィグファイルです。
svelte.config.js・・・svelteKit用のコンフィグファイルです。
これでローカル環境でSvelteを実行できるようになりました。
この実行した状態で、+page.svelteを書き換えると、ViteのHMR(Hot Module Replacement)のおかげで、
コードを実行したままで変更が反映されます。便利！
今回はここまで。
次回はルーティングについて学習したいと思います。