Zenn
Open3

Remixのチュートリアルをやってみる

Remix
hoshimahoshima

Setup

ひとまずセットアップしてnpm run dev。
ずいぶんトラディショナルなフォームが出てきた

http://localhost:5173の5173って変な数字だけどなに？って思ったら、
これ自体はVite由来のポート番号で、LEET表記のSITE説と5をローマ数字のⅤとしてVITE説があるらしい
Fun fact: Vite's default port is 5173 which spells VITE if you think about it. Notice the commit branch was named 'vite-port-riddle'. : r/programming

The Root Route

Root Route、日本語にしちゃうと「ルートルート」か…

<Meta>とか<Form>とかのコンポーネントってReact由来？Remix独自？
そのへんの解説はもうちょい後かな

あんたまたえらい急におしゃれになってもうて……

これやってることはAngularのこれと一緒か

@Component({
  // ...
  styleUrls: ['./foo.component.css']
})

The Contact Route UI

Now if we click one of the links or visit /contacts/1 we get ... nothing new?

nothing new?とちゃうねん

<Form>内の<button>が全部しっかりsubmitしてるの、SPAの時代じゃないんだなーを感じる
SPAだとAjax通信が前提になるから、submitって「<form>内に雑な<button>が1個だけ置かれてるときに発生してしまうやつ」だった

Nested Routes and Outlets

これはAngularでおなじみの<router-outlet>だ
Next.jsだと{children}か

RemixはReact Routerというのを使ってるらしい
Next.jsのディレクトリ内に置いたpageやlayoutがいろんな部品として使われていく感じとは感覚が違って、かなりAngularっぽさ（htmlとかcssを全部tsファイルに詰め込んだ感じ）がある

Client Side Routing

じゃあこれは<a [routerLink]="foo">か

Loading Data

静的jsファイルと、DBから取得した（ていの）jsonがそれぞれ降ってくるのか
Next.jsのDBアクセスではバックエンドでhtmlまで作ってたけど、この違いってなんだ？

<li key={contact.id}>のkey属性ってなに？？？
→Reactの制御に必要らしい　Angularの@forでいうtrack:か

Type Inference

やってることはgenericsなのに、genericsって言葉が全く出てこないのが気になる

URL Params in Loaders

URLパラメータとかパスパラメータとか言われるやつを取得する方法

Validating Params and Throwing Responses

パラメータ取得と、パラメータに応じたデータがなかったときのエラー処理

Remixのチュートリアル書いてる人、テンション高いというか筆が乗ってるというか、壇上で喋ってる人って感じがしませんか？？？

いったんここまで。

Tutorial(30m)

30分…？30分で終わる内容か……？？

hoshimahoshima

Data Mutations

ここは座学の時間。

Creating Contacts

This is where the "old school web" programming model shows up.

Next.jsやったときも思ったけど、やっぱりオールドスクールなwebアプリへの回顧がキてますよね？
というかオールドスクールな概念の上をモダンな方法で走ってるって感じがある

Updating Data

<Form key={contact.id} id="contact-form" method="post">

editなのにpostメソッドなの？？？

Updating Contacts with FormData

Fill out the form, hit save, and you should see something like this! (Except easier on the eyes and maybe less hairy.)

筆者ノリノリじゃん

Mutation Discussion

前のチャプターの詳細についての座学。

actionとloaderがそれぞれデータの取得と更新をやるの、わかりやすくていいな

Aside from the action function, none of these APIs we're discussing are provided by Remix: request, request.formData, Object.fromEntries are all provided by the web platform.
action関数を除くと、これらのAPIはRemixが提供するものではありません。request、request.formData、Object.fromEntriesはすべてWebプラットフォームによって提供されます。

これが「web標準技術に寄せていく」っていうRemixのコンセプトのところですよね？

Redirecting new records to the edit page

new recordを作ると同時にeditページにリダイレクトする

こういうときに空データを作るの本当に嫌いなんですよね…

ほぼサイドバー専用の<Link>かと思ったけど、isPendingが使い勝手よさそう？
2重submit防止とかに使えるとかある？？？

Global Pending UI

ローディング表示。

Deleting Records

これもオールドスクールなwebアプリっぽい
ページ全体の再読み込みを防ぐためにfetchを使うの、10年前にやってたこういうやり方を思い出す…
targetのiframeを高さ/幅0にして、画面はそのままだけど裏でデータいじるってことをやってた気がする

Index Routes

_index.tsxの使い方

急に気づいたけど、チュートリアルページのスクショのポート番号が全部3001になってるんだ

Cancel Button

戻るボタン

ダラダラやってるからにしても結構時間かかるんですが？？？