さくっとSvelteインストール

さくっとSvelteをインストールして、デモページを表示することを目標にします。

特徴

仮想DOMを使用しないため、パフォーマンス良く、バンドルサイズを少なくできます。

準備するもの

• MacOS
• Nodeの最新バージョン
• VSCode

Nodeの最新バージョン

※以前の記事でNodeのバージョン管理ツールからインストールする方法を記載しています！

SvelteKitをインストール

Svelteのコンパイラを使用するUIフレームで、SvelteとViteで構成されています。
VueでいうところのNuxtになります。

npm create svelte@latest svelte-samlple

オプション選択

◇  Which Svelte app template?
◇  Add type checking with TypeScript?
◇  Select additional options (use arrow keys/space bar)

Which Svelte app template -> SvelteKit demo app
Add type checking with TypeScript? -> TypeScript
Select additional options (use arrow keys/space bar) -> ESLint, Prettier

必要なオプションを指定します。
lint系だけあれば良いと思います。

Svelteを動かす

ここからはVSCode上で作業します。

ターミナルで、svelte-samlpleフォルダに移動し、codeコマンドでVSCodeを開きます。
※codeコマンドを使用するためには、VSCode上でshift + command + pから、「シェルコマンド：PATH内に'code'コマンドをインストールします」でインストールしておいてください

code .

Node.js 関連のパッケージをインストール

npm install

開発サーバーを起動

npm run dev -- --open

Webブラウザ(Chromeなど)が開かれるので、VSCodeに許可をして、デモページが表示されたら完了です。