【Svelte】SvelteKitを始めてみよう

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

SvelteKitとは

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

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

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

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

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

「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」を読み進めましょう。

弊社では、「さらに高みを目指したいエンジニア」を育てる環境を用意しています。

株式会社 #sinProject CEO/CTO

Twitterアプリ1位 #Tweecha2 企画制作

サービス・システム設計開発、コンサルタント

#kimurakan ピアノ弾き語り