爆速SvelteKit + tailwindcss-jit の学習環境を作って Vercel にデプロイする

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/134221/13b83369-e3ce-f481-0d42-c909095ed543.png)

**「ビルドが早くて開発体験が良い」**

# 大まかな流れ
1. [Svelte + tailwindcss のプロジェクトを作る](https://qiita.com/mkin/items/cd4789eb6a2a2cceb3b6#1-svelte--tailwindcss-%E3%81%AE%E3%83%97%E3%83%AD%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E3%82%92%E4%BD%9C%E3%82%8B)
2. [GitHub にプロジェクトを追加（割愛）](https://qiita.com/mkin/items/cd4789eb6a2a2cceb3b6#2-github-%E3%81%AB%E3%83%97%E3%83%AD%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E3%82%92%E8%BF%BD%E5%8A%A0%E5%89%B2%E6%84%9B)
3. [Vercel にデプロイ](https://qiita.com/mkin/items/cd4789eb6a2a2cceb3b6#3-vercel-%E3%81%AB%E3%83%87%E3%83%97%E3%83%AD%E3%82%A4%E3%81%99%E3%82%8B)

おまけ
[Vite （ヴィート）はなぜ早い？](https://qiita.com/mkin/items/cd4789eb6a2a2cceb3b6#vite-%E3%83%B4%E3%82%A3%E3%83%BC%E3%83%88%E3%81%AF%E3%81%AA%E3%81%9C%E6%97%A9%E3%81%84)

## 追記
- `@tailwindcss/jit`は`tainwindcss本体にv2.1から取り込まれました(2021/4/6)

# 1. Svelte + tailwindcss のプロジェクトを作る

## SvelteKitアプリケーションを作る

```sh
mkdir sveltekit-ts-tailwindcss
cd sveltekit-ts-tailwindcss
npm init svelte@next
```
下記の設定を対話モードで設定していきます。

- TypeScriptを使うか
- スタイルの当て方（CSS / Less / SCSS）
- ESLintを使うか
- Prettierを使うか

今回はTypeScript使う、CSS、ESLint使う、Prettier使うを選択します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/134221/31336825-4035-f6ca-7049-09a163fbcaa4.png)

そうすると、プロジェクトがスキャフォールドされるので、起動してみます。

```sh
yarn install
yarn dev --open
```
**2秒で起動しますっ:rocket:**
（timeコマンドを先頭につけると計測できます)

```sh
time yarn dev --open
real	0m1.983s
user	0m0.168s
sys	0m0.046s
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/134221/693ac741-1b71-bf53-ebe4-0df7f570081e.png)

ctl + C でいったん停止します。

## @tailwindcss/jitをインストールする

```sh
npx svelte-add@latest tailwindcss
yarn install
```
> 2021/10/13更新: `jit`が`tailwindcss`のデフォルト設定になったので、`--jit`は不要になりました。 @tamanugiさんありがとうございます！ 

```sh
yarn dev --open
```
**3秒で起動しますっ:flushed:**
（初回ビルドとは思えない早さ!!）

```sh
time yarn dev --open
real	0m2.918s
user	0m0.179s
sys	0m0.049s
```

tailwindcssが有効かコードを少し変更してみます。

```diff:src/routes/index.svelte
- <main>
+ <main class="bg-black">
    <h1>Hello world!</h1>
+   <p class="text-xl text-white">「tailwindは有効です」</p>
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/134221/bb128d32-ed26-faee-fe99-e554370860b1.png)
**変わった！**

# 2. GitHub にプロジェクトを追加（割愛）

こちらをご覧ください :bow:

- [コマンドラインを使った GitHub への既存のプロジェクトの追加](https://docs.github.com/ja/github/importing-your-projects-to-github/adding-an-existing-project-to-github-using-the-command-line)

Gitでのユーザー名やメールアドレスを変更したい場合はこちらをご確認ください :bow:

- [Git でのユーザ名を設定する](https://docs.github.com/ja/github/getting-started-with-github/setting-your-username-in-git)
- [Git のコミットメールアドレスを設定する](https://docs.github.com/ja/github/setting-up-and-managing-your-github-user-account/setting-your-commit-email-address#setting-your-commit-email-address-in-git)

# 3. Vercel にデプロイする

SvelteKitには、ビルドされたアプリを受け取り、指定したプラットフォームごとに最適化された出力をするアダプターが用意されています。
20201/04/04時点で、SvelteKitドキュメントから確認できるのは以下の通りです。

- ホスティングサービス
  - Begin: サーバーレス環境を簡単に構築できる。SvelteKitの目的を実現してくれそう
  - Vercel: 日本だとNelifyより早いらしい。[VercelとNetlifyの違いが分からなかったので実際に比べてみた。](https://qiita.com/fussy113/items/ba204747e3f0e6c59af0#%E3%82%B5%E3%82%A4%E3%83%88%E8%A1%A8%E7%A4%BA%E9%80%9F%E5%BA%A6)
  - Netlify: 
- Node.js: セルフホストされたNodeアプリ用。
- static: 静的サイト用。SSG(Static Site Generator)向け。

## Vercelアダプターを設定

Vercel用のアダプターをインストールしましょう。現時点では、バージョン指定で@nextをつけないとbuildでエラーになるのでお忘れなく。不要なnode用アダプターはアンインストールします。

```sh
yarn add -D @sveltejs/adapter-vercel@next
yarn remove @sveltejs/adapter-node
```

```diff:package.json
	"devDependencies": {
-		"@sveltejs/adapter-node": "next",
+		"@sveltejs/adapter-vercel": "^1.0.0-next.10",
```

続いて、ビルド時にVercelアダプターを使うように設定します。

```diff:svelte.config.js
- const node = require('@sveltejs/adapter-node');
+ const vercel = require('@sveltejs/adapter-vercel');

module.exports = {
	kit: {
		...
-		adapter: node()
+		adapter: vercel()
	}
};
```

では、さっそくビルドしてみましょう！ビルドコマンドを実行します。

```sh
yarn build
```

すると、.vercel_build_output が出力されました。
これはソース管理する必要がないので .gitignore に追加しましょう。

```diff:.gitignore
...
.vercel_build_output
```

さて、うまくビルドできたところで、いったんGitHubに最新ソースをコミットしておきます。

```sh
git add .
git commit -m "add adapter-vercel"
git push
```

## Vercelにプロジェクトを作成

GitHubのリポジトリを公開してみましょう :earth_asia: 

[Vercel](https://vercel.com/)にログインしたら[New Project](https://vercel.com/new)からGitHubリポジトリをImportします。

### Vercelからリポジトリへのアクセスを許可する

（既に設定済みの方はスキップしてください。）
初回の場合、まずはVercelからリポジトリへのアクセスを許可する必要があります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/134221/c0e087b8-db2a-2add-e735-9837c8401a59.png)

GitHubのダイアログが表示されたら、リポジトリを選択して保存します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/134221/b3785598-9a78-f038-07f0-d28199370335.png)

先程のVercelの選択画面に許可したリポジトリが表示されるので、Importボタンをクリックしてください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/134221/6f8b332d-7878-b657-267c-499adf7eb8cc.png)

個人アカウントなので PERSONAL ACCOUNT を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/134221/07f3d815-4484-5b40-ad27-ba9229508a68.png)

TOP階層を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/134221/e908e4af-f2fe-abdb-17a5-3c0845a7fc35.png)

OUTPUT DIRECTORY に`.svelte`を入力してDeployボタンをクリックしてください。
約38秒後、世界が震撼します :volcano: 
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/134221/c692e671-fc4b-5868-202c-3a1e021641f0.png)

デプロイが成功したらアクセスしてみてください。
おめでとうございます！！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/134221/19015a75-10d9-495b-832a-2e22af0f5d08.png)

# ここまでできた方は以下やってみてください
（実は、これは社内勉強会の資料なのです...:bow:）

- ページの追加
    - [SvelteKit#Routing](https://kit.svelte.dev/docs#routing)を参考にして
    - `src/routes/about.svelte`ファイルを追加して`localhost:3000/about`にアクセスしてみる
- tailwindをサンプルから使ってみる
    - [tailwindcomponents](https://tailwindcomponents.com/)にアクセスする
    - サイト内で`Card`とかで検索し、気に入ったコンポーネントを選択
    - コンポーネント詳細画面で`Show Code`をクリックし、コードを表示して`about.svelte`ファイルに貼り付ける
- tailwindを試してみる
    - [tailwindcssの公式ドキュメント](https://tailwindcss.com/docs)で検索しながら、自分でスタイルをあててみる。

# Appendix

## Vite （ヴィート）はなぜ早い？

SvelteKitのビルドが早い理由として、ノーバンドラーツールであるViteを採用していることが挙げられます。
ViteはGO製のesbuildで依存関係を事前解決するため非常に高速です。

- three.jsのビルド時間は他のビルドツールより10-100倍高速です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/134221/44e4da47-4717-3bf1-414b-b687ee0093c4.png)
引用元『[esbuild](https://esbuild.github.io/faq/#benchmark-details)』

- ファイル変更すると関連するモジュールのみ置き換えます。ViteはネイティブESMを介して実行するため、他のバンドラーのHMR機能より高速です。（キャッシュも強力らしいので、時々変更した内容が反映されないのはこのためか!?）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/134221/032ba298-d02b-1d65-6cca-adf81aaf1b6f.png)


## 参考サイト
https://kit.svelte.dev/docs
https://github.com/svelte-add/tailwindcss