Remixはこれから間違いなく伸びていくので、2025年頃が楽しみ

気が変わった。T3 Stackそのものは推して行くが、Theoさんの推す構成ではない。

aroundthedistance.hatenadiary.jp

フルスタックはReact前提に

RailsでフルスタックWebフレームワークの扉が開いた。Rails,Cake.Django等は、MVCのMCがメイン。Vが弱い。Vにテンプレートエンジンを使い、jQueryを使ってインタラクティブなUIを作っていたけど、もうそれが最適な時代ではない。ReactでUIをプログラミングする前提に立つと、ルーティングとrevalidateがルート単位で可能なFWが一番開発生産性が高くなる。可能であれば、ビジネスロジックもそこに入れて、だ。

Theoさん提唱のT3 Stackでは、Next.js + tRPCがコアのコンセプト。UIはNext.jsで書いて、スキーマを決めてtRPCでエンドポイントを生やし、サーバー通信を行ってUIを更新する。

Next.jsが得意な人であればこれでよいと思うが、私はNext.jsの状態管理ですごく手こずった。Next.jsは初学者にはかなり情報量が多いFWであり、Next.jsの決めた開発手法に強く従うことを求められるピーキーさが苦手。前提となる技術が抽象化されていて、なんかよくわからん状態に。

でも、ViewをReactで書いてTypeScriptでPOSTするとサーバーサイドのコードが呼び出されてUIの更新ができるなら、それがベスト。そして、Remixを見つけることが出来た。これが自分の欲しい物だった。

Remix推しポイント

クライアントとサーバーサイドが1つのファイルに書ける

やばくね？？？コレが一番驚いた。tRPCのようなAPI定義も不要。フォームをPOSTしたらaction関数が実行される。

import { json } from "@remix-run/node";
import type { ActionFunctionArgs } from "@remix-run/node";
import { Form } from "@remix-run/react";
import { addTodo } from "~/todoStore";

export async function action({ request }: ActionFunctionArgs) {
  const formData = await request.formData();
  const { todo } = Object.fromEntries(formData.entries());
  await addTodo(todo);
  return json({ ok: true });
}

export default function Index() {
  return (
    <Form method="post">
      <label htmlFor="todo">Item name</label>
      <input type="text" name="todo"/>
      <input type="text" name="description"/>
      <button>Add</button>
    </Form>
  );
}

このコードを書けるようになるまでがすごい大変なんだろうけど、開発体験最高に良かった。

Routingの設計が美しい

RemixのコアはVとC。特にC。React Routerによるクライアント側のルーティングに最高のスパイスが乗っている。Nested Routeなどがそれなんだけど、元々の設計として、ルートを起点に遷移するので、所謂サーバーサイドのミドルウェアを作るのが単純化できる。

Hooksをほとんど使わない

Formの実装がほとんど素のHTMLを変わらないのと、useEffectで副作用って所が、基本的に loader関数で代替できるため。 useRefでFormのDOMを触るなどは普通にあるし、チェックボックスに全部つけるみたいなのも、普通に標準のJavaScript書けばいいだけ。そこまでHooksでやるのめんどいだけだろっていう。

ただ、単純なFormでは表現できないようなものも当然ある。予約カレンダーをvisible:hiddenで持ってポップアップして表示する系のやつとか、トグルで開いた時に初めてデータ取ってくる系のやつとか。そういうのは・・・Hooks！

Hooksで処理すべきところと、Remixに委ねていいところが、実に明確で気持ちよい。これなら戦えるって思った。

CSRが出来ないので、Remixを使う時はBFF(実質Node.jsのアプリケーションサーバ)が必要になる。BFFおけないですっていうCSR前提なら、そもそもNext.jsでもなんでもなくて、Reactで書けば良いんじゃないのとも。

残念なことに「フルスタックフレームワーク」だから、バックエンドまできちんと書いたことがないと旨味が少ない。業務系システムはすごいRemixが向いていると思う。100画面ぐらいすぐ作れそう。やっと、自分が目指す形でWebアプリケーションが作れそう！！！嬉しい。

2024.01.15 追記

CSRが出来ないので、Remixを使う時はBFF(実質Node.jsのアプリケーションサーバ)が必要になる。

嘘でーーーす！！ RemixがSPAモードのサポートを開始しました！！ CSR作りたいなら素のReactよりRemix採用したほうが良いかもよ！！

remix.run

Life is Really Short, Have Your Life!!

ござ先輩の主に技術的なメモ