【Svelte】SvelteKitを始めてみよう

パイナップルが大好きな岩崎真也です。

SvelteKitとは

SvelteKit」はとてもハイパフォーマンスなWebアプリを構築するためのフレームワークです。フロントエンドだけでなく、バックエンドも構築することができます。

また、Svelte と同様に、JavaScript だけでなく TypeScript もサポートしています。

Svelteのチュートリアルは終わりましたか?

まだ読んでいない人は、「Svelte チュートリアル」を先に読むことをおすすめします。

SvelteKit を始めてみよう

ここでは、「SvelteKit Docs」から一部を抜粋して紹介します。

準備

まず、「Node.js」のインストールを終了させます。

Getting started

「Mac のターミナル or Windows のコマンドプロント」を開きます。

これからプロジェクトをフォルダを作成するのに適切なフォルダに移動します。

以下のコマンドを実行して、スケルトンプロジェクトを作成します。「my-app」はプロジェクトディレクトリ名となります。

npm init svelte@next my-app

選択肢がいくつか出てきますが、自分はいつも以下のように選択しています。

✔ Which Svelte app template? › Skeleton project
✔ Use TypeScript? …Yes
✔ Add ESLint for code linting? … Yes
✔ Add Prettier for code formatting? … Yes

完了するとプロジェクトフォルダが作成されているので以下のコマンドで移動します。

 cd mp-app

インストールを行います。

 npm install

実行します。

 npm run dev

実行されたら「http://localhost:3000」をブラウザで開きます。

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

ここまで来たら、VS Code などのエディターで開発が始められます。VS Code を利用している場合は、Svelte Extension を必ず入れておきましょう。

あとはドキュメントを読み進めよう

最新で、かつ確かな情報はいつも公式のドキュメントにあります。あとは「SvelteKit Docs」を読み進めましょう。

Leave a comment

メールアドレスが公開されることはありません。

*

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)