From 85f877ffd994810585aca612dad69605216b35df Mon Sep 17 00:00:00 2001
From: mziyut <4934628+mziyut@users.noreply.github.com>
Date: Mon, 30 Jun 2025 13:19:02 +0000
Subject: [PATCH] Pull articles

---
 qiita/public/e02ffd701834f8ce4964.md | 119 +++++++++++++++++++++++++++
 qiita/public/f85cdfac702e4dea5aee.md |   4 +-
 2 files changed, 121 insertions(+), 2 deletions(-)
 create mode 100644 qiita/public/e02ffd701834f8ce4964.md

diff --git a/qiita/public/e02ffd701834f8ce4964.md b/qiita/public/e02ffd701834f8ce4964.md
new file mode 100644
index 0000000..aa4bdc0
--- /dev/null
+++ b/qiita/public/e02ffd701834f8ce4964.md
@@ -0,0 +1,119 @@
+---
+title: Remix v2 から React Router v7 に アップグレードする
+tags:
+  - JavaScript
+  - Node.js
+  - Remix
+  - ReactRouter
+private: false
+updated_at: '2025-06-30T22:07:05+09:00'
+id: e02ffd701834f8ce4964
+organization_url_name: foundingbase
+slide: false
+ignorePublish: false
+---
+
+## はじめに
+
+- 2024年11月22日 に React Router v7 がリリースされた
+- Remix の開発チームが React Router の開発と合流したことによって Remix v2 の移行先は React Router v7 になった
+- 最近 Remix v2 から React Router v7 への移行を行ったのでそのまとめです
+
+https://remix.run/blog/incremental-path-to-react-19
+
+## アップグレードの前に
+
+- Remix v2 の最新バージョンまで上げておきましょう
+  - feature_flag は有効にしておきましょう
+
+https://remix.run/docs/en/main/start/future-flags
+
+基本的に日頃から Remix のバージョンを上げて、 追加される feature_flag を有効にしていれば（一部を除き）スムーズに更新することができます。
+
+## アップグレード手順
+
+基本的に React Router の Upgrading from Remix のページに記載の手順で実施していけば問題ありません。
+加えて、 `codemod` を実行することで基本的な書き換えも実施してくれます。
+
+https://reactrouter.com/upgrading/remix
+
+ほぼドキュメント通りなので 個別対応が必要だったファイルアップロード周りについて記載します。
+
+### unstable_createMemoryUploadHandler 及び unstable_parseMultipartFormData の置き換え
+
+Remix v2 のときは下記のように `unstable_createMemoryUploadHandler` と `unstable_parseMultipartFormData` を使ってファイルを扱っていました。
+
+```tsx
+import {
+	type ActionFunctionArgs,
+	unstable_createMemoryUploadHandler,
+	unstable_parseMultipartFormData,
+} from '@remix-run/cloudflare';
+
+export async function action({ context, request }: ActionFunctionArgs) {
+
+  const uploadHandler = unstable_createMemoryUploadHandler();
+  const formData = await unstable_parseMultipartFormData(request, uploadHandler);
+  const file = formData.get('file') as File;
+```
+
+それを 新たにライブラリを追加し、処理を置き換えていきます。
+
+```zsh
+npm i @mjackson/form-data-parser
+```
+
+https://www.npmjs.com/package/@mjackson/form-data-parser
+
+```diff_tsx
+  import {
+  	type ActionFunctionArgs,
+  	unstable_createMemoryUploadHandler,
+  	unstable_parseMultipartFormData,
+- } from '@remix-run/cloudflare';
++ } from 'react-router';
++ import { parseFormData } from '@mjackson/form-data-parser';
+
+  export async function action({ context, request }: ActionFunctionArgs) {
+
+-   const uploadHandler = unstable_createMemoryUploadHandler();
+-   const formData = await unstable_parseMultipartFormData(request, uploadHandler);
++   const formData = await parseFormData(request);
+    const file = formData.get('file') as File;
+```
+
+上記で置き換えは完了です。
+
+### `load-context.ts` の置き換え (`@remix-run/cloudflare` に限る)
+
+React Router v7 の template を確認すると `load-context.ts` 及び `server.ts`に記述されていた内容が `workers/app.ts` に変更されていました。
+
+https://github.com/remix-run/react-router-templates
+
+https://github.com/remix-run/remix/blob/6e570942ee655342d13370abb8945677be170c12/templates/cloudflare-workers/server.ts#L1-L37
+
+https://github.com/remix-run/remix/blob/6e570942ee655342d13370abb8945677be170c12/templates/cloudflare-workers/load-context.ts#L1-L22
+
+特別な理由も無いのでこちらも `workers/app.ts` に変更します。
+
+https://github.com/remix-run/react-router-templates/blob/744998414e03240be6eb90195638c428aa8df4fc/cloudflare/workers/app.ts#L1-L23
+
+^ ファイルをベースに `load-context.ts` 及び `server.ts` で記載していた内容を移行します。
+移行が終わったら、`wrangler.toml` の main の定義を変更してあげれば終わりです。
+また、 `wrangler.toml` も `wrangler.jsonc` に変更されていたので変更したい場合は変更してあげてください。
+
+```diff_toml
+- main = "./server.ts"
++ main = "./workers/app.ts"
+```
+
+## 最後に
+
+日頃からバージョンアップしていたことで Remix に関する書き換えはほぼ発生しませんでした。（大事）
+ただ、依存するライブラリの変更、自動修正されない細かな変更は対応が必要なのでプロジェクトで何を使っているかどのように影響するか等頭に入れて取り掛かるとスムーズに進むのではないでしょうか?
+
+## References
+
+https://reactrouter.com/upgrading/remix
+
+https://reactrouter.com/how-to/file-uploads
diff --git a/qiita/public/f85cdfac702e4dea5aee.md b/qiita/public/f85cdfac702e4dea5aee.md
index 5e8c969..674041f 100644
--- a/qiita/public/f85cdfac702e4dea5aee.md
+++ b/qiita/public/f85cdfac702e4dea5aee.md
@@ -7,7 +7,7 @@ tags:
   - Node.js
   - ESLint
 private: false
-updated_at: '2024-12-03T07:03:53+09:00'
+updated_at: '2025-06-30T21:22:08+09:00'
 id: f85cdfac702e4dea5aee
 organization_url_name: foundingbase
 slide: false
@@ -21,7 +21,7 @@ ESLint v9 から Flat Config がデフォルトとして扱われるようにな
 
 ESLint v9 で従来の legacy ESLint configuration file format を使いたい場合は、 `ESLINT_USE_FLAT_CONFIG` を `false` に設定すれば利用可能ですが、 `@eslint/migrate-config` を利用すれば、簡単に移行することができます。
 
-##　注意
+## 注意
 
 `@eslint/migrate-config` は 2024/11 時点以下のファイルフォーマットのみ対応しています。