Zenn
Closed5

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

戻るボタン

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

hoshimahoshima

URLSearchParams and GET Submissions

methodが未指定（＝get）の<Form />の場合、loader()関数のみが動作し、action()は動かない

確かに意識してなかったら詰まりどころかもしれない

Synchronizing URLs to Form State

URLパラメータに指定されたテキストをフォームに初期設定しておく方法

Reactの詰まりがちポイントとしておなじみのuseEffect, useStateがようやく？出てきた
Angularのsignalやってたおかげでなんとなくわかるぜ

Submitting Form's onChange

<Form />のonChangeイベント

FormのonChangeとinputのonChangeの動きってどうなってるんだ？
両方のonChangeが同時に発火する
→inputのonChangeがqueryを書き換えてURLが書き換わる
→コンポーネントが再レンダリングされる
→FormのonChangeでsubmitがかかる
→コンポーネントまるっと更新する
って感じ？

Adding Search Spinner

navigation.location.searchのsearchって何？
→クエリパラメータのことだった　だから「クエリパラメータにqがあるか？」って意味ね

Managing the History Stack

こういうHistoryいじるの、なんとなーく嫌い　やるけど

Forms Without Navigation

この章が言いたいことはわかるけど、具体的にどういう違いなのかがよくわからなかった
調べてたら公式にいい感じのページ（Form vs. fetcher | Remix）があったので、あとで読んでみることとする

Optimistic UI

Optimistic=楽観的
ローディング以外のUI的レスポンスって意識したことなかったけど、言われてみればこういうのもそうか

hoshimahoshima

Remixのチュートリアルはこれでおしまい

直近にやったNext.jsと比べると、１ページ１ファイルに圧縮されてるのが由来の違いが大きいなと感じる
ファイルがディレクトリで分けられてるNext.jsと、ファイル名で分けるRemixって点は大きいし、
Remixは１ファイルに取得も更新もすべての処理を書く形になるので１ファイルあたりの行数が長くなるかなとも思う
そういえばRemixのチュートリアルの範囲内だとコンポーネント分割とか処理の切り出しとかほとんどされてないね

Next.jsとRemixの世間的な評価、チュートリアルやってるだけだとさすがにわからなかったな
Next.jsとRemixの両方を深くやっていってようやく語れるようになるやつだと思う
「Remixのほうがweb標準に準拠してる」「Next.jsはキャッシュが扱いづらい」とかもチュートリアル範囲ではわかりづらいし

自分が使うとしたらRemixかなあ
古いwebもやってた人間なので、オールドスクールなwebの感じがしっくりくる

このスクラップは15日前にクローズされました