Remix バックエンドエンジニアから見たフロントエンドの潮流｜Offers Tech Blog

はじめに

こんにちは!!

プロダクト開発人材の副業転職プラットフォーム Offers を運営する株式会社 overflow 普通のバックエンドエンジニアの takkun7171 でございます。
最近 41 歳になったんですが、本厄真っ只中のミドルエイジクライシスということで(!?)、初めてブリーチし髪をアッシュグレーにしました。
いやあ、髪を染めようなんて、今までは思ってなかったのに、怖いですねえ。。人生何が起こるかわからないから、楽しいですね😉

そろそろフロントエンドを本気で勉強しないとヤバい

自分はバックエンドエンジニアなんですけど、
これを見てるバックエンドエンジニアの皆さん、そろそろガッツリとフロントエンドを本気で勉強しないとヤバいなと思っていませんか？自分は思っています。

React や Next.js、Vue、TypeScript の型安全な開発など
昨今のフロントエンドの発展は目覚ましく、
今後益々フロントエンドが主流になっていくということは感じております。
未来においてはバックエンドという言葉自体がなくなっているかもしれません。

そして SEO 的にもページの表示速度が重要になってきており、その辺りも Next.js を始めとした、フロントエンドのフレームワークが、SSG など優れたソリューションを提供している印象です。このようなフロントエンドの潮流は最早止められません。

そして Cloudflare などエッジコンピューティングもヤバい技術で、
この記事を読んでヤベェなあ、時代が変わるなあと思ってます。
https://zenn.dev/mizchi/articles/cloudflare-d1

爆速の Web ページが普通の世の中になる前に、フロントエンドを本気で勉強しないと、バックエンドエンジニアは淘汰されてしまいます(´・ω・｀)
そのような危機感があります。とにかくこのままではキノコルことができないのではないか？なんならバックエンドではなくフロントエンドエンジニアになるべきではないか？(´・ω・｀)

なぜRemix

ということで、今回は Remix を紹介します。
最初に断っておきますが、自分はフロントエンドには知悉ではなく、あくまでバックエンドエンジニアから見たフロントエンドの紹介記事です。紹介記事であり、深いレベルの記述はないので、ガチのフロントエンドの方は他の記事をご参照下さい m(..)m

Remix は ReactRouter の作者が作った React のフルスタックフレームワークで、Next.js などが競合です。
前述のように勉強しないといけないという危機感があるので、フロントエンド界隈の勉強の一環として、イケてるフロントエンドのフレームワークである、Remix を調べてみました。

Remixの哲学

Remix の哲学は、こちらの philosophy に書かれています。
https://remix.run/docs/en/v1/pages/philosophy

日本語訳すると以下の通りです

1. サーバー／クライアントモデルを採用し、ソースコードとコンテンツ／データの分離を含む。
2. Web の基盤に逆らわず、共に働く。ブラウザ、HTTP、HTML というウェブの基礎に逆らわず、一緒に取り組むこと。
3. JavaScript は、ブラウザの動作をエミュレートすることで、ユーザーエクスペリエンスを向上させるために使用します。
4. 基礎となる技術を抽象化しすぎないこと

Web の基礎的な技術に寄り添い、基礎となる技術を過度に抽象化しないなど、
基礎に忠実で不自然なことをなるべく行わないという方針を感じます。
これは個人的には好感触でした。実際 Next.js よりもやや低レイヤーをいじってる感じで、
ちゃんと理解できているならば、痒いところに手が届きうる印象です。

Remixの特長・特徴をザックリと紹介。Cloudflare Workersで使えるのがデカイ？

Remix は Next.js の牙城を崩すものになるかと言えば、今の所そんな感じはしないです。
とはいえ Next.js から見ても、思想的、技術的に優れた箇所があり、注目されているようです。

まず Next.js で使われている SSG や ISR は使用せず、SSR が基本のようです。
SSG は事前にビルドして静的サイトとして提供する方法なのですが、それは無理があると考えてるのか、やらない方針です。
その代わり、コンポーネントごとに HTTP header を簡単に設定でき、こちらで Cache-Control を
いい感じに設定できれば、Cloudflare などのエッジコンピューティングサービスと相性は良さそうです。やはり時代はエッジコンピューティングサービスなんですね。

そして React Router V6 の機能らしいですが、NestedRouting をサポートしています。
これはザックリと言ってしまえば階層構造化された上位の page を読み込んでいる時に、下位のページを並列で読み込んでくれるようです。
SSG がない代わりに、キャッシュ周りや事前の読み込みが充実しているということでしょうか。

あと Next.js だと Vercel にロックインされる節がありますが、Remix は Vercel にロックインされず aws とか Fly.io、Cloudflare Workers といった環境で動かせます。

Cloudflare Workers でバリバリ動かせるってのが、恐らく Next.js にはない Remix 最大の強みなのだと思います。Cloudflare Workers と Remix に備わったキャッシュコントロールの技術を使いこなせれば、爆速の Web ページを爆速で作ることができるのでしょう。
ただフロントに詳しい友人曰く、Cloudflare Workers はサービスとしての完成度は今は低いので、未来に期待と言ったところでしょうか。

他にもエラーハンドリング周りや Cookie 周りが優れているとのことですが、
主な特徴はこんな感じのようです。

Remix Stacks

Remix Stacks という技術スタックのテンプレートがあり、開発者のユースケースや
開発規模に合わせて、テンプレを選べるようです。こちらの記事が詳しいです。
こちらも発展途上らしいですが、ユーザが増えてくると便利なテンプレができるかもですね。

https://dev.classmethod.jp/articles/remix-stacks/

tutorials触ってみた

https://remix.run/docs/en/v1/tutorials/blog

チュートリアルやってみました。
indie stack を用いた、簡単なブログの投稿システムです。
思い当たる注意点は、prisma/seed.ts が何故か自分の環境では prisma/seed.js で
そちらに posts データ書くと普通に動きました。
それ以外は特につまずくことはなかったです。

感想ですが、ファイルベースのルーティングで、非常にシンプルでスマートな印象でした。
TypeScript もバリバリ使えるし、型安全な開発を享受できます。

そして以下のようにして、
useLoaderData と loader でサクッと SQLite からデータを取得できます。

import { json } from "@remix-run/node";
import { Link, useLoaderData } from "@remix-run/react";
import { getPosts } from "~/models/post.server";

type LoaderData = {
  // this is a handy way to say: "posts is whatever type getPosts resolves to"
  posts: Awaited<ReturnType<typeof getPosts>>;
};

export const loader = async () => {
  return json<LoaderData>({
    posts: await getPosts(),
  });
};

export default function Posts() {
  const { posts } = useLoaderData() as LoaderData;
  return (
    <main>
      <h1>Posts</h1>
      <ul>
        {posts.map((post) => (
          <li key={post.slug}>
            <Link
              to={post.slug}
              className="text-blue-600 underline"
            >
              {post.title}
            </Link>
          </li>
        ))}
      </ul>
    </main>
  );
}

クライアントとサーバが曖昧な感じでつながってるのが、(今の時代は普通なのかもしれませんが)自分としては不思議でした。
そういうのを意識せずに 1 つのコンポーネント内で簡潔に書けるのが凄いですね。(老害感)
チュートリアルにもこんな感じで書いてあります

Loaders are the backend "API" for their component and
it's already wired up for you through useLoaderData.
It's a little wild how blurry the line is between the client and the server in a Remix route.

日本語訳
ローダーはコンポーネントのバックエンドの「API」であり、
useLoaderDataを通じてすでに配線されています。
Remixルートではクライアントとサーバーの境界が曖昧で、少し乱暴な感じです。

そして上のコードではないのですが、Post の処理も 1 つのコンポーネント内で完結できました。
Vue とかだとある画面を理解する時に、色んなコードを見ないと行けないのですが、
Remix だと見るべきコードが少なくなるので、見通しが良くて開発しやすそうです。

実際に触ってみた感じ、非常に先進的、SEO にも強そうでありながら、
質実剛健・シンプルで開発しやすいイケてるフレームワークっていう印象でした。

まとめ

今回は Remix をザックリとまとめてみました。
お伝えしたとおり、今回の記事は技術というよりも啓発的な意味あいで投稿してみました。(自分への戒めでもあります)
我々バックエンドエンジニアも過去の経験を捨てて、フロントエンドを本気で学ばないとまずいですね。明らかに将来の Web 開発の主戦場はこの辺になると思うので。。
そしてエッジコンピューティングと爆速な Web ページもどんどん流行って、それが普通の世の中にあっという間になってしまうかもしれないので、危機感持って勉強しないといけないと思いました。
フロントエンドのスピードの速さにビビりますが、必死で食らいついていきましょう(震え声)

参考記事

https://qiita.com/yoshii0110/items/1cf44219c2b2cec64050

https://dev.classmethod.jp/articles/qucikstart-remix-framework/

https://zenn.dev/steelydylan/articles/remix-nextjs-comparison

https://zenn.dev/kaa_a_zu/articles/fbd06ca2cc3b86

https://zenn.dev/chimame/articles/0207636dea9c78

https://speakerdeck.com/aiji42/remixfalseqi-miwoshao-jie-sitai?slide=30

https://note.com/mtng420/n/nc9c65accdace