Svelte (SvelteKit) 触ってみる

+page.svelte: ページに対応するコンポーネント
+page.ts: +page.svelteと同時に実行される。ロード時に実行される処理やssrの設定など
- https://kit.svelte.jp/docs/routing#page-page-js
+page.server.ts: +page.ts をサーバーサイドでのみ実行
- https://kit.svelte.jp/docs/routing#page-page-server-js
hoge.server.ts: サーバーサイドだけで実行される

_ を付けたらルーティングから除外される、みたいなやつある？って思ったけどなかった。
けど、 +page みたいなルーティング用のファイルを置かない限りはページは生成されないから、 +page を置かなければいいだけの話だった

結構知らん書き方あるな～

Svlete Components

VueとかAstroと同じような構成ね

<script lang="ts"> でTSがつかえる。
import { enhance } from '$app/forms';
- SvleteKitでデフォで用意されている機能が使える
  - （$app で参照できるの、簡単だけどわかりにくいような…）
export let でpropsを定義できる
let で定義した変数に値を代入すると再レンダリングされる
- useState使わなくてもstateみたいな感じか
$: でリアクティブなステートメントを定義
- useEffectみたいなものか

クラス名が自動付与されて、scopedなスタイルになる。

AstroとVueを通ってきたので、わりと近い概念が多くて雰囲気でいけそうだな
とりあえず作りつつで行けそうか

「作りたいものは作り始める前に今すぐにデプロイしよう」という言葉があるので、まずデプロイできるところまで通してみるか

最終的にはサーバーサイドも動かしたいけど、GitHub Pagesで楽したいので一旦フロント完結で。

adapter-staticを入れる
*.server.ts があると当然静的に吐き出せないので、そういうページは削除する。
- もしくは、 strict: false にすればエラーにせず除外してくれる
出力するすべてのページが prerender可能でないといけない。すべての +page.ts に書いてもいいし、面倒ならルートの +layout.ts に書けばOK
+layout.ts で trailingSlashを設定すると /about/index.htmlを吐き出してくれる
- https://kit.svelte.dev/docs/page-options#trailingslash
  - （感想）こういう、決まった名前でexportするやつあんまり好きじゃないんだよな～…。型がつかないからタイポしてても気づけないし、変数命名って本来恣意性があるべきなんだけど見えないところでそれが奪われている感じ…

ただサブディレクトリなのがうまく設定できてないから画像とかリンクが404

GitHub Pages 向けにビルドするとき、あなたのリポジトリの名前が your-username.github.io と異なる場合は、config.kit.paths.base をあなたのリポジトリの名前に更新してください。

これをしないといけない

ビルド時にリンク切れしている（hrefの指定をミスっている）と警告出してくれるみたいなんだけど、
どのファイルを修正すればいいかがわかりにくい…

~~し、普通に誤検知してそう~~

SvelteKitError: Not found: /html-card-game/$./

いや、私がわるうございました
<a href="{base}/about"> って書くところを、テンプレートリテラルのノリで <a href="${base}/about">　って書いてた

なにも設定してなくても、layoutを元に404ページ出してくれる？っぽい