参考情報

#

Remixとはウェブの標準技術とモダンなUXに焦点を当てたフレームワークだそうです。

今はNextjsを使うことが多いですが、以下リンク先で言われているようにNextjsにも気になるところがあります。

• Next.jsから別のフレームワークに移行した時、Next.jsの上達に費やした時間が無駄になりますが、Remix だとWeb開発全般のスキルが向上するようになっています。

• Vercel へのデプロイが前提にされている

• 魔法が多すぎる

viかemacsかで悩んだ時に、いろんな環境で使えるからとviを選んだ時を思い出します。(違う？)

公式のクイックスタートをやってみます

日本語なので特に整理し直す必要もないですね。 詰まった、わからなかったところだけ残しておこうと思います。

詰まった・わからなかったところメモ

#

Reactのバージョン衝突エラー

#

手順内の以下で

# 開発依存関係をインストール
npm i -D @remix-run/dev vite

reactのバージョンが衝突するエラーになった

$ npm i -D @remix-run/dev vite
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: my-remix-app@1.0.0
npm ERR! Found: react@19.1.0
npm ERR! node_modules/react
npm ERR!   react@"^19.1.0" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^18.0.0" from @remix-run/react@2.16.7
npm ERR! node_modules/@remix-run/react
npm ERR!   @remix-run/react@"^2.16.7" from the root project
npm ERR!   peer @remix-run/react@"^2.16.7" from @remix-run/dev@2.16.7
npm ERR!   node_modules/@remix-run/dev
npm ERR!     dev @remix-run/dev@"*" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 
npm ERR! 
npm ERR! For a full report see:
npm ERR! /Users/xxxxxxxx/.npm/_logs/2025-05-22T09_20_33_863Z-eresolve-report.txt

npm ERR! A complete log of this run can be found in: /Users/xxxxxxxx/.npm/_logs/2025-05-22T09_20_33_863Z-debug-0.log

npm ERR! node_modules/react npm ERR! react@"^19.1.0" from the root project npm ERR! npm ERR! Could not resolve dependency: npm ERR! peer react@"^18.0.0" from @remix-run/react@2.16.7

とあります。 projectとしてはreact19系を求めていて、@remix-run/react@2.16.7が18系を求めているようです。@remix-run/react@2.16.7は2025/05/22現在で最新のようなので19系はないようです。しょうがないのでprojectのreactを18にしました。

以下のコマンドでreactのバージョンを18系にします

$ sed -i '' 's/"react": "[^"]*"/"react": "^18.0.0"/' package.json
$ sed -i '' 's/"react-dom": "[^"]*"/"react-dom": "^18.0.0"/' package.json

改めて以下のコマンドで開発依存関係をインストールできました。

npm i -D @remix-run/dev vite

base64を直接アイコンに使う

#

画像の準備をしていないんだけど何が表示されるんだろう？って思って調べたら、ファイルレスでbase64のAAをアイコンにできるらしい。お試しの開発時にはよくやる方法らしい。

        <link
          rel="icon"
          href="data:image/x-icon;base64,AA"
        />

独自のサーバーを持ち込む が動かない

#

Express、Remix Express アダプター、および本番モードで実行するための cross-env をインストールする

というところで、以下コマンドを実行するように言われるのですが、一向にインストールが終わりません。諦めました…

npm i express @remix-run/express cross-env

まとめ

#

クイックスタートの手順はイマイチっぽい

#

クイックスタートの説明はイマイチで、以下の問題があります。

• そのままだとビルドエラー
• インストールが進まない物があり開発環境が作れない

npx create-remix@latest を使えば良い

#

上記問題が起きているのは、公式クイックスタートで「学習のために手動で環境構築しよう！」という流れの部分でした。素直に最初に書かれている npx create-remix@latestを使えば一発で環境ができて、npm run devで開発もできる。

感想

#

今のところの体験は最悪です。公式のクイックスタートすらもろくにメンテされていないソフトを信じていいものなんだろうか…。しかも npx run dev 中に ターミナルから root.tsx を編集していたらターミナルがフリーズした。(Remix関係あるのか？多分無いと思うけど…)

公式ドキュメントに振り回され、ターミナルはフリーズし、心もフリーズしかけましたが、Remixの世界はまだまだ奥が深そうです。もう少し触ってみて、また爆死したら記事にします（？）