sveltekitに入門してみましたけれども
自分のサイトをsveltekitでつくってみました。
作成にあたって詰まった点などを書こうと思います。
sveltekitとは何か？
まずsvelteを知らない人は、svelteを調べてください。sveltekitは、簡単に言えばルーティング機能がついたsvelteです。いい感じにページの移動みたいなことができます。僕のホームページでいえば、ナビゲーションにあるDiaryボタンを押せば、日記が表示される……みたいな感じですね。documentもあるので、ここ見れば大丈夫な気もします。
新規プロジェクトの作成
mkdir my-app
cd my-app
npm init svelte@next
npm install
npm run dev
my-appのところは好きなフォルダ名で良いです。
フォルダつくって移動。
npm init svelte@nextで作成がはじまります。
Ok to proceed?は進めますか？ なのでY
Use TypeScriptはTypeScript使いますか？ なので好きなほうで。
CSSとかSCSSとか使うかきかれるので好きなほうで
Add ESLint for code linting?はESLintでlintしますか？ みたいな感じなので、Yにしておきましょ。
Add Prettier for code formatting?はPrettierで良い感じにしましょうかってことなので、お好きにどうぞ。Yでいいのでは。
あとはnpm i でもyarnでもpnpm iでもお好きなコマンドをどうぞ。
npmは標準のやつ、yarnはnpmのちょっと進化したやつ、pnpmは同じモジュールがいろんなところに散らばらないやつみたいです。
sveltekitの出たはじめのうちは、Windows環境だとバグがありました。いまはWindowsでも動いてるみたいですけど、うまくCSSが当たらないとかのバグが残ってるような気がします（直ったかな？）WSL2とかでubuntuにしておくとバグを踏まない可能性が高くなるかと思います。僕はサブのノートパソコンでubuntuにしてますけど。
npm run devするとSvelteが起動します。こんな画面です。
良い感じですね。
ただ、素の状態でbuildすると、nodeで起動するタイプのものになります。index.jsとかapp.jsが生まれるので、それをpm2 startするとか、nodeで起動するみたいな感じです。
SSRに対応させてみよう。SSRってなんだか知らないけど。
nginxとかで動かしたいなら、SSRっていうんでしょうか、index.htmlがあって～みたいなやつでbuildしないといけないんです。そういうadapterという機能があるので、入れてみましょう。
@sveltejs/adapter-static
こいつを入れます。
ただ、npm i @sveltejs/adapter-staticをすると古いバージョンのものが入ってbuildに失敗します。
npm i @sveltejs/adapter-static@1.0.0-next.4
こうすればbuild時にエラーを吐きません。たぶん。
それではsvelte.config.cjsもちょろっとadapterの部分を変更しましょう。
const sveltePreprocess = require('svelte-preprocess');
//const node = require('@sveltejs/adapter-node');
const pkg = require('./package.json');
const static = require('@sveltejs/adapter-static');
/** @type {import('@sveltejs/kit').Config} */
module.exports = {
preprocess: sveltePreprocess(),
kit: {
adapter: static(),
// adapter: node(),
target: '#svelte',
vite: {
ssr: {
noExternal: Object.keys(pkg.dependencies || {})
}
}
}
};
邪魔なコメント取り除いてみました。
const nodeをconst staticに変える感じです。
これで一度rm -rfでbuildフォルダを綺麗にしてから、もう一度buildしてみましょう。
そうするとindex.htmlとそれに読み込まれるjsが出力されるので、これをnginxのvar/www/htmlとかに適当においてあげたら動きます。きっとね。htmlが表示できるサーバーならなんでも大丈夫なので、普通のレンタルサーバーとかでも動くはずです。たぶん。しらんけど。
Routingとか
Svelteとの一番の違いはルーティングです。どういうことかというと、ナビゲーションバーを押したらページを遷移する、みたいな部分ですね。簡単に説明してみます。まずは僕のホームページを開いてみてください。
この上の部分のHomeとかDiaryとかArticleとかGALLERYとかSUPPORTがどうなっているかを簡単に説明します。
まず、routesフォルダの直下にindex.svelteがあります。ここにナビゲーションバーの下の部分を書きます。僕のサイトでいえば可愛い女の子の画像を出している部分からです。
ナビゲーションバーは、$layout.svelteという名前にします。これがルーティング機能を持つコンポーネントなんでしょう（たぶん）。ドキュメントを読まずに手探りでつくっているのであっているかどうかはしりません。
<script type="ts">
import Nav from '../components/Nav.svelte';
import '../global.css';
</script>
<div class="mx-auto container">
<Nav />
<div
class="sticky top-10 h-auto grid grid-cols-5 text-center bg-white font-semibold w-full text-xs md:text-sm text-gray-700 z-50 md:justify-items-center md:w-2/4 md:mx-auto"
>
<a href="/" class="block col-span-1 tracking-widest h-full pt-3 pb-4">HOME</a>
<a href="/diary" class="block col-span-1 tracking-widest h-full pt-3 pb-4">DIARY</a>
<a href="/article" class="block col-span-1 h-full pt-3 pb-4">ARTICLE</a>
<a href="/gallery" class="block col-span-1 h-full pt-3 pb-4">GALLERY</a>
<a href="/support" class="block col-span-1 h-full pt-3 pb-4">SUPPORT</a>
</div>
</div>
<slot />
こんな感じです。実はtailwindcssを使ってます。
こんだけ同じcss書くならコンポーネント化しろって話ですけど、まあコピペで済ませちゃいました。ダメですね。
aタグのhrefに相対リンクを書きます。フォルダ構造はこんな感じですね。
昔ホームページをつくったことがある人なら、なんとなくわかるでしょう。
/diaryのAタグを踏むと、diaryフォルダの$layout.svelteとindex.svelteが表示されます。$layoutで末尾の<slot />を忘れるとindex.svelteが表示されなくて3時間くらいはまるので気をつけましょう。
昔のインラインフレームが$layout.svelteになってみたいな感じでしょうか。
えっと、あとは画像のリンク先とかでしょうか。なんかこれもWindowsとLinuxで相対パス関連が怪しいような怪しくないような気がします。./にしないとダメだったり/でいけたり？ よくわかんないですけど。
staticのなかにimagesフォルダをつくったら、リンクは/iamges/001.pngとかでいけます。たぶんね。
なんか流行ってるらしいtailwindcssを使ってみたい場合
npx svelte-add tailwindcss
↑ここにちょうどいいやつがあります。
npx svelte-add tailwindcss
このコマンド入れるだけでよしなにやってくれます。
あとはまだ研究中ですけど、とりあえずSvelteでSSRを簡単につくりたいな～という人はこれで簡単につくれるんじゃないかと。まだWindowsだとバグ残ってる気がしなくもないです（devのときにsvelteに書いたCSSが反映されない？）。linuxでやったら大丈夫じゃないかな。Macは持ってないのでしりません。Dockerでつくってしまうのもいいかも。
たぶんsveltekitでできることっていろいろあると思うんですけど、それは必要になってからで良いんじゃないかな。暇なときにちゃんとdocumentを読もうと思って幾星霜。こういう機能便利だよっていうのがあれば知りたいですね。