Published on

データエンジニアでもフロントエンド開発してみたい!Remixの開発環境を構築する

Authors
  • avatar
    Name
    Nomad Dev Life
    Twitter
2024-11-06-ogp-image

SPAを開発したい

個人開発で、データを表示するWebアプリケーションを作っています。ここまでStreamlitWriter Frameworkを使って進めて来ました。両方ともとても良いツールなのですが、どうしても細かいところを合わせるのが難しくなってきたので、フロントエンドは別のフレームワークで作ることにしました。

2024年にSPAを開発するなら何が良いか調べてみたところ、どうやらRemixが良さそうなので、Remixに入門したいと思います。

今回はWindows上にRemixの開発環境を構築したいと思います。

Volta

Remixの開発環境を作るのに先立ち、Node.jsやyarnをインストールすることになるのですが、nvmのように複数のバージョンをインストールして切り替えられるようにしたいところです。しかし、nvmはWindowsには対応していないので、今回はVoltaを使ってみることにしました。

まずVoltaのzipファイルをダウンロードしてパスを通してみたのですが、Volta自体は使えるものの、Volta経由でインストールしたnodeyarnにパスが通らず断念しました。素直にwingetを使ってインストールしています。

winget install Volta.Volta

nodeyarnをインストールする際、バージョンを指定しないと、stableなバージョンをインストールしてくれるようなので、早速サクっとインストールしました。

volta install node
volta install yarn

Vite

次にViteを介して(yarn create vite)、Remixのプロジェクトを作ってみます。私はフロントエンド開発に疎く、Viteは正直あまりちゃんと理解していないのですが、GitHubのページを見るとIt's fast!とあるので、取り敢えず使ってみようと思います。

PS D:\works\github> yarn create vite
YN0000: · Yarn 4.5.1
YN0000:Resolution step
YN0085:+ create-vite@npm:5.5.5
YN0000:Completed
YN0000:Fetch step
YN0013:A package was added to the project (+ 261.86 KiB).
 YN0000:Completed
YN0000:Link step
YN0000:ESM support for PnP uses the experimental loader API and is therefore experimental
YN0000:Completed
YN0000: · Done with warnings in 0s 114ms

Project name: ... myapp
Target directory "myapp" is not empty. Please choose how to proceed: » Ignore files and continue
Select a framework: » React
Select a variant: » RemixYN0000: · Yarn 4.5.1
YN0000:Resolution step
YN0085:+ create-remix@npm:2.14.0, @nodelib/fs.scandir@npm:2.1.5, @nodelib/fs.stat@npm:2.0.5, and 195 more.
 YN0000:Completed in 1s 908ms
YN0000:Fetch step
YN0013:198 packages were added to the project (+ 31.05 MiB).
 YN0000:Completed in 0s 664ms
YN0000:Link step
YN0000:ESM support for PnP uses the experimental loader API and is therefore experimental
YN0000:Completed in 1s 987ms
YN0000: · Done with warnings in 4s 622ms

      Error.captureStackTrace(firstError);
            ^

Error: create-remix tried to access fs-extra, but it isn't declared in its dependencies; this makes the require call ambiguous and unsound.

Required package: fs-extra
Required by: create-remix@npm:2.14.0 (via C:\Users\(user)\AppData\Local\Temp\xfs-18541c27\dlx-8748\.yarn\cache\create-remix-npm-2.14.0-623faf877b-b0db7e9bbf.zip\node_modules\create-remix\dist\)

Require stack:
- C:\Users\(user)\AppData\Local\Temp\xfs-18541c27\dlx-8748\.yarn\cache\create-remix-npm-2.14.0-623faf877b-b0db7e9bbf.zip\node_modules\create-remix\dist\index.js
- C:\Users\(user)\AppData\Local\Temp\xfs-18541c27\dlx-8748\.yarn\cache\create-remix-npm-2.14.0-623faf877b-b0db7e9bbf.zip\node_modules\create-remix\dist\cli.js
    at require$$0.Module._resolveFilename (C:\Users\(user)\AppData\Local\Temp\xfs-18541c27\dlx-8748\.pnp.cjs:7669:13)
    at Function.<anonymous> (node:internal/modules/cjs/loader:1075:27)
    at require$$0.Module._load (C:\Users\(user)\AppData\Local\Temp\xfs-18541c27\dlx-8748\.pnp.cjs:7560:31)
    at TracingChannel.traceSync (node:diagnostics_channel:315:14)
    at wrapModuleLoad (node:internal/modules/cjs/loader:218:24)
    at Module.require (node:internal/modules/cjs/loader:1340:12)
    at require (node:internal/modules/helpers:141:16)
    at Object.<anonymous> (C:\Users\(user)\AppData\Local\Temp\xfs-18541c27\dlx-8748\.yarn\cache\create-remix-npm-2.14.0-623faf877b-b0db7e9bbf.zip\node_modules\create-remix\dist\index.js:19:11)
    at Module._compile (node:internal/modules/cjs/loader:1546:14)
    at Object.<anonymous> (node:internal/modules/cjs/loader:1689:10)

エラーが出ました。fs-extraが依存関係として明記されていないようです。ググったら、以下のコメントを見つけました。

どうやら、.yarnrc.ymlに以下の設定を入れて依存関係を定義した後、yarn create viteを実行すると良さそうです。

問題は、この.yarnrc.ymlをどこに配置するかですが、まだプロジェクト作成前でproject rootには置けそうもないので、ユーザーのhomeディレクトリの配下に配置して再実行したところ、このエラーを回避してRemixのプロジェクトが生成されました。

C:\Users\(user)\.yarnrc.yml
packageExtensions:
    create-remix@*:
        dependencies:
            'fs-extra': 'latest'

動作確認

Viteを介してRemixのプロジェクトが作成できたら、作成されたプロジェクトディレクトリに移動し、以下のコマンドを実行します。

PS C:\Users\(user)> cd C:\development\github\myapp\
PS C:\development\github\myapp> yarn run dev
Local:   http://localhost:5173/
Network: use --host to expose
  ➜  press h + enter to show help

ブラウザでhttp://localhost:5173/にアクセスすると、Remixの画面が表示されました。試しにapp/routes/_index.tsxの"Quick Start"の5 min7 minに変えてみたところ、即座に反映されました。

remix screenshot

おわりに

Remixに入門する為の環境をWindows上に構築しました。Voltaによってnodeyarnのバージョンを管理し、Vite/Remixで開発を進めていけそうです。

まだまだフロントエンド開発に不慣れですが、ツール等を使いながら理解し、前に進んでいきたいと思います。