ブログを作り直すとやっとその記録により記事が増えるという謎状態ですが、感想を残しておきます
モチベーション
- かなり久々にやる気を出して書いた大きな記事がPCを初期化した時に消えてしまった
- 以前がMarkdownファイルに記事を書いていたのでエディタを開いてコミットしてプッシュして…というワークフローによる心理的抵抗を感じていた
- Sapperのままノーメンテで放置しており、あまり触りたくもなかった
- 記事は書いていないもののデザインに飽きた
謝辞
- zenn.dev
- エディタのmarkdownコンバーター を改造して使わせて頂きました
- デザインも部分的に参考にしました
- Bing
- 丁度作っている最中にBing Chatがリリースされて、チャット機能もさることながらそれ以上に背景グラデがかっこいいと感じて分析・参考にさせてもらいました
SvelteKit
なんでSvelteKit?
- 1.0が最近リリースされていた
- 仕事ではNext.jsが多いので違うフレームワークや思想に触れたかった
- 前身がSapper(SvelteKitの前身）だった
等がありますが、基本なんでもよかったかなとは思います。一部server機能を持っていたり、SG形式かが確定していなかったのでそちらにかなり寄っているastroは採用しませんでした。（SSRもできるはずですが、何か不具合等がありそうな情報を見たので）
SvelteKitの所感
- Svelte x Typescript x Jetbrains系IDEは相当相性が悪い（型の恩恵がないに等しいレベル）
- vscodeにできれば移行したいとは思っているものの今回も最後まで慣れないままだった
- 裏で型定義ファイルが作られる仕組みがあまり好きではない
- memo (
$) を含む部分をhooksのように外だしする方法が分からなかった - エコシステムのReact比での弱さはどうしても気になる
- lib/serverでclient側にserver専用コードを露出しない仕組みがあるものの、グルーピングとしてのディレクトリ等が
lib/とlib/serverで重複してしまうので拡張子.serverのほうが今の所良さそう - 慣れを含めると今SvelteKitを採用するメリットってなんだろうってなってしまった
- 作ったのがブログだったせいか分からないものの、仕事で採用するかと言われると微妙
- routesディレクトリ内にページのファイルとその他のファイルが混在させられるのが思想的には面白かった
- 一方で意外とここにファイルを置くのは本当にそれで上手くいくのかという点で勇気が必要な印象
（参考）型周りの比較Twitter（codegen freeの部分）
基本はやはり特別な採用意図がない場合Next.js or LP等はastro(はまだちゃんと触っていないけど)、が現状のベースになりそう
将来的にはこのあたりも触りたい(react/jsx系とtypescriptの相性の良さを感じたのでそちらより)
- SolidJSはチュートリアル程度では感触がよかったのでSolid Start
- tanstack系のライブラリは結構感触が良いので Tanstack Start
Newt
HeadlessCMSとしてDirectusだったり自前作成だったりを考えながら結局めんどくさすぎて探すことに。必要要件は以下でした。
- CMS側で画像、ドキュメント類、音声、動画のアップロードに対応している
- アップロードの際、個人の管理しているストレージサービスにあげてほしい
- markdownをかけて一定の補助（特に上記のアップロードした画像の差し込み）がある
- このmarkdownの素のコンテンツを取得できる（変換は自前でやる）
- リッチコンテンツエディアでも良いものの良いエディタに出逢わない
- 将来の移行等に備えるとmarkdownのほうが嬉しい
NotionがNotionのエディタを持つCMS作ってくれたら嬉しいなと思ったりはしている。埋め込みだったりリンクのカードだったり意外と面倒くさいことが多い。
今でもAPIはあるのでNotionを使って作れるかもしれないもののリクエスト制限に怯えるのがちょっとネガティブな要因。
一方でSG形式にした場合、瞬間的にすごいアクセスが飛びそうなので、NotionもだけどHeadlessCMS系のSaaSもいけるものなのか、何かディレイを挟むようにするのかどうするんだろう。
よかったところ
- UIが割とシンプルで使いやすい
- 自身の要件を満たしていた
気になる所
- SDKの実装がドキュメントに書いてある種類全てをサポートできていなさそうだった
- 結局ドキュメントをみながらSDKを使わずにリクエストするようにした
- 設定の編集時に割と自動保存されないもののしれっと画面移動できてしまうので、変更が破棄されてしまったりするのに結構ストレスを感じた
- 関連要素のフィルタができなさそう
- tag.posts のようにタグベースで記事を取得した場合post側のフィールドのフィルタリングができない
- この影響なのか採用事例にある企業ブログでもタグ関する記事一覧で1つのカード表示分（title / tags / author / og image 程度）出すだけで記事本文を取っているせいか、27kbの取得をしていたりと気になる
vs MicroCMS
若干の仕事での採用検証も含めていたので国内プロダクトを候補としていました。
| MicroCMS | Newt |
|---|---|
| 3個の無料API | 無料無制限(?) |
| リッチコンテンツエディタかtextarea | リッチコンテンツエディタとMarkdownから選べる |
| 自身の管理するストレージサービスにファイルをあげられない | 自身の管理するストレージサービスにファイルをあげられる |
| 無料プランでは音声や動画ファイルをアップロードできない | 無料プランで音声や動画ファイルをアップロードできる（挿入には難あり） |
| GET系以外のAPIがある | GET系以外のAPIがなさそう |
| 関連リソースのフィールドの絞り込みができる | 関連リソースのフィールドの絞り込みが現状できない |
画像関連ではMicroCMSではimgixのAPIが使えるのは良い所かも。自前ストレージが使えない代わりにそこまで含まれるのは良い点な気がする。
その他自身の気にする部分以外での差異はまだ色々あるのですが、比較記事を書きたいわけではないので割愛。両者意外と特徴が違う感じがしたので良さそうな気がする。API/SDK周りは流石に後発のNewtはまだ弱いかなという印象を持った。
HeadlessCMS
月別投稿数とか集計系はどうすべきなんだろう…？別でデプロイ中に静的データファイルとかを作ると良いのかな…？（以前のサイトでは全てのmarkdown fileからサマリのjsonを生成していたりした）
こういうのは自前で建てるDirectusとかだったら投稿時hookで集計系データをCMSに適当に流し込めるかもしれない。
リニューアルした感想
- 無駄なものをどんどん消したので以前よりシンプルになった
- OG画像生成とか特にいらないと思って消した
- デザイン的にも今風になりつつ多分シンプルになったので飽きにくくなった
- HeadlessCMSになったことで記事の投稿がしやすくなった
- 実際には今はObsidianでベースを書いてコピペしている
過去と現在
v1 - Nuxt.js(Vue.js)
v3 - Gridsome(Vue.js) v2はGatsbyで途中でPending
v4 - Sapper(Svelte)
v6 - Sveltekit(Svelte) v5はNext.jsで途中でPending
