Closed12

Remix Tutorialやる

sarashinasarashina

これをやる

https://remix.run/docs/en/main/start/tutorial

疑問

  • React RouterとRemixの違い
    • どちらもreactのフレームワーク。React Routerでできることが増えてRemixを使うならReact Routerでもいいじゃんってなってる
  • ./app.css?urlとは？
    • ファイルの中身ではなく、urlとして扱って欲しい
  • useLoaderData<typeof loader>();わからん
    • loaderの値を取得してくるやつ
  • tiny-invariantとは
    • 型の絞り込みに利用
  • ajaxって
    - ページ更新を早く行う仕組み（非同期処理, javascript)
  • ヒストリスタック
    • 閲覧履歴
  • useFetcherとsubmit replaceの違い
    • 現在のページ更新に利用できる点は同じ
    • 履歴を残さずに別ページに遷移したいならsubmit replace 
import invariant from 'tiny-invariant';

type Person = { name: string };
const value: Person | null = { name: 'Alex' }; // 型は Person | null

invariant(value, 'Expected value to be a person');
// この行以降、TypeScriptは 'value' の型が 'Person' であると推論する
console.log(value.name); // エラーにならない
sarashinasarashina

Link, ahrefが挙動が違う

Linkはサーバーサイドへのリクエストがない

a hrefはリクエストがある

sarashinasarashina

loader関数のparamsでurl遷移時のデータを持ってこれるっぽい

export const loader = async ({ params }) => {
    const contact = await getContact(params.contactId);
    return { contact };
  };
sarashinasarashina
export const action = async ({
    params,
    request,
  }: ActionFunctionArgs) => {
    invariant(params.contactId, "Missing contactId param");
    const formData = await request.formData();
    const updates = Object.fromEntries(formData);
    await updateContact(params.contactId, updates);
    return redirect(`/contacts/${params.contactId}`);
  };

1. 関数の定義

export const action = async ({
    params,
    request,
  }: ActionFunctionArgs) => {
  • export const action: Remixの規約（ルール）です。ルートファイル（例: app/routes/contacts.$contactId.tsx）でactionという名前の関数をエクスポートすると、そのページに対する**フォーム送信（POSTリクエストなど）**を自動的に処理してくれます。
  • async: この関数が非同期処理（時間がかかる可能性のある処理）を含むことを示します。awaitキーワードが使えるようになります。
  • { params, request }: action関数が受け取る引数です。
    • params: URLに含まれる動的な部分（パラメータ）が入っています。例えば、URLが /contacts/123 なら、params.contactId には "123" が入ります。
    • request: 送信されたリクエストそのものの情報を持っています。フォームから送られたデータなどがここに含まれます。

2. パラメータのチェック

invariant(params.contactId, "Missing contactId param");
  • invariantは「もし最初の引数がfalseやnullなら、エラーを発生させる」という便利な関数です。
  • ここでは、URLにcontactIdがちゃんと含まれているかをチェックしています。もし何らかの理由でcontactIdがなければ、「Missing contactId param」というエラーメッセージを出して処理を中断します。これは、どの連絡先を更新すればよいか分からない状態で処理が進むのを防ぐための安全装置です。

3. フォームデータの取得

const formData = await request.formData();
  • request.formData()は、フォームから送信されたデータを取得するための命令です。
  • awaitを使っているのは、リクエストの中からデータを取り出すのに少し時間がかかる可能性があるためです。
  • formDataには、<input name="first_name" value="太郎"> のようなフォームの入力内容がキーと値のペアで格納されます。

4. データの整形

const updates = Object.fromEntries(formData);
  • formDataは少し特殊な形式のオブジェクトなので、扱いやすい通常のJavaScriptオブジェクトに変換しています。
  • 例えば、フォームに first_name と last_name があれば、updatesは { first_name: "...", last_name: "..." } のような形になります。

5. 連絡先情報の更新

await updateContact(params.contactId, updates);
  • これが実際のデータ更新処理です。
  • updateContactという別の関数（これは自分で用意する必要があります）を呼び出しています。
  • 引数として、どの連絡先を更新するかを示すparams.contactIdと、更新内容であるupdatesオブジェクトを渡しています。
  • awaitで、データベースへの書き込みなどの非同期処理が終わるのを待っています。

6. リダイレクト

return redirect(`/contacts/${params.contactId}`);
  • redirectはRemixが提供する関数で、ユーザーを別のページに移動させます。
  • データ更新が無事に完了したら、更新された情報が表示されている連絡先の詳細ページ（例: /contacts/123）にユーザーをリダイレクトします。
  • これにより、ユーザーは自分の変更が正しく反映されたことをすぐに確認できます。
sarashinasarashina

NaviLinkとFormでページ遷移できる
使い分けはありそう

sarashinasarashina
<button type="button">

こうしないとPOSTメソッドになっちゃう

sarashinasarashina

useSubmit: プログラム的にフォームを送信したい場合に利用

このスクラップは4ヶ月前にクローズされました