次世代のフロントフレームワーク! Remix を試してみる。

こんにちは k-jun です。今回は React Router の作成者が、作ったフレームワーク Remix を試してみます。

README によると work in progress ということですが、面白そうなので触ってみてしまいます。

Setup

create-remix で一撃でした。

$ npx create-remix@latest
Need to install the following packages:
  create-remix@latest
Ok to proceed? (y) y

R E M I X

💿 Welcome to Remix! Let's get you set up with a new project.

? Where would you like to create your app? ./my-remix-app
? Where do you want to deploy? Choose Remix if you're unsure, it's easy to change deployment targets. Remix App Server
? TypeScript or JavaScript? TypeScript
? Do you want me to run `npm install`? Yes

Run

では早速起動してみます。

$ npm run dev

> dev
> remix dev

Watching Remix app in development mode...
💿 Built in 373ms
Remix App Server started at http://localhost:3000
GET / 200 - - 43.888 ms

f:id:K-jun1221:20211127160232p:plain

おおお、ひとまず立ち上がることは立ち上がりましたね。

中身を見てみましたが、一番近いのは React ですね。拡張子は tsx ですし。

こちらに従って続きを作っていきます。

app/root.tsx の内容を以下のように書き換えます。

import { LiveReload, Outlet } from "remix";

export default function App() {
  return (
    <html lang="en">
      <head>
        <meta charSet="utf-8" />
        <title>Remix: So great, it's funny!</title>
      </head>
      <body>
        <Outlet />
        {process.env.NODE_ENV === "development" ? (
          <LiveReload />
        ) : null}
      </body>
    </html>
  );
}

そして、app/routes/index.tsx を以下のように追加すると、いい感じに。

export default function IndexRoute() {
  return <div>Hello Index Route</div>;
}

変更して気づきましたが、Remix 反映がめちゃくちゃ早いですね。変わったことにすら気づかない Flutter レベルで早いです...。の component が少なからず影響しているようです。良さげ。

f:id:K-jun1221:20211127161529p:plain

どうもこのという component がかなり便利そうです。下位の component を自動でここに格納するようです。つまり、以下のように app/routes/jokes.tsx と app/routes/jokes/new.tsx を追加すると。

import { Outlet } from "remix";

export default function JokesRoute() {
  return (
    <div>
      <h1>J🤪KES</h1>
      <main>
        <Outlet />
      </main>
    </div>
  );
}

export default function NewJokeRoute() {
  return (
    <div>
      <p>Add your own hilarious joke</p>
      <form method="post">
        <div>
          <label>
            Name: <input type="text" name="name" />
          </label>
        </div>
        <div>
          <label>
            Content: <textarea name="content" />
          </label>
        </div>
        <div>
          <button type="submit" className="button">
            Add
          </button>
        </div>
      </form>
    </div>
  );
}

こんな感じになる。

f:id:K-jun1221:20211127161910p:plain

絵文字の箇所は app/routes/jokes.tsx から来ているがそれ以外は app/routes/jokes/new.tsx ってことですね。ワイルドカードを含むルーティングには app/routes/jokes/$jokeId.tsx のように指定するようです。

ということで軽く触るだけしてみましたが、なかなかおもしろそうです。本格的には展開されていないので真の力はこれからですが。それでは今回はこのへんで。