Remix 入門ログ
Kiyohito KEETH KuwaharaQuick Start(5min) から
cli の頁もあるが，まずは基本の通り $ npx create-remix@latest で対話的にやる
よしよし動いた．デフォルトは vuite なのね．メインのファイルは root.tsx か．デフォルトの remix-serve を使わず，カスタムで server.js を作って node で動かすこともできる．
package.json を見たら，@remix-run/react と react, react-dom, @types/react, @types/react-dom がある
Kiyohito KEETH Kuwahara続いて Tutorial(30min)
ボイラープレート見たら <Form> というカスタムコンポーネントがあった．
標準のWebのHTMLフォームを拡張したものらしく，ブラウザからサーバーにリクエストを送信するのを防ぎ，フェッチ経由で action（後で出てくる） にデータを送る，という仕組みらしい．
すべてのルートにおいて，スタイルシートの追加には，links という関数を作って export するらしい．返すものは配列で．いわゆる <head> に組み込むものをここで定義する．
import type { LinksFunction } from "@remix-run/node";
// existing imports
import appStylesHref from "./app.css?url";
export const links: LinksFunction = () => [
{ rel: "stylesheet", href: appStylesHref },
];
で，これが root.tsx の <Links /> にレンダリングされる．
Remix は React Router 上に構築されていると，公式にもはっきり書かれているな．
Since Remix is built on top of React Router, it supports nested routing.
ネストされたルーティングのためには，親で <Outlet /> をレンダリングする必要があるらしい．
import { Outlet } from "@remix-run/react";
// （省略）
<div id="detail">
<Outlet />
</div>
SPA にするには <Link> コンポーネントをインポートする必要がある．が，確認したところ SPA ではあるが，JS ファイルは確かに再度取得はしていないが，HTML, CSS などは再度サーバーに問い合わせているっぽいな．
data.ts の中にデータフェッチ用の関数を含んだオブジェクトとダミーデータが格納されていて，それをコールして擬似的にデータを API からフェッチしているような見え方．このチュートリアルでは loader() 関数を書いているが，これは loader という名前のAPI なので，別の名前だとエラーになった．useLoaderData() は loader() で return したものを受け取れる．
ダイナミックセグメントは，URL の指定した位置（今回は $contanctId の部分）の値を，params.contactId で渡される．チュートリアル通りやっているが，typescriptの型エラーが出ているな．
↓
ちゃんと後ほど対応してる．型ガードの方．今のところは何かあっても404エラーとして画面上にも404だけが表示される．
tiny-invariant は初めて知った．
データの更新も Form コンポーネントを使うのね．
ファイル名が app/routes/contacts.$contactId_.edit.tsx と，接頭辞ではなく接尾辞として _ をつけるのは初めて見た．内部でネストさせたくない[1]，でも差別化はしたい，ということでこうなったと．テクニックだったか．ちょっと違うけど，自分は自分の OSS で .gr という固有の拡張子とか作ったことを思い出した．
で，form のデータで更新をするには，作成のときと同様に action() 関数を書くと．
ちなみに Remix は form のリクエストを中断しコントロールするので，リクエストボディとかを見るために action で console.log() とかを仕込んでも，ブラウザのコンソールには出ず，ターミナル等の標準出力に出る．サーバーで処理しているから．値を取得したければ，
formData.get("hoge")
と，ゲッターが用意されているのはありがたい．