Zenn
🍫

Remex V2 を使ってみよう

2024/03/23に公開
React
frontend
Remix
tech

はじめに

普段はNextjsで開発を行っているのですが、ふとした話題でRemixに関して話が及びました。
Remix自体は知っていたものの実際に利用して開発したことはないので、このことを機会に調べみたいと思います。
今回調べる内容としては、以下とします。
また、筆者はNext.jsを普段利用しているのでそこの比較も兼ねて書きたいと思います。

  • 基本的なRemixの利用方法
  • Remixでのルータの確認
  • ログインの認証機能

この中でも今回は基本的な使い方に注目していこうと思います。

ここでは、環境周りの説明は省きます。

基本的な使い方

Remixのインストール始め方

始め方は、RemixのQuick Startに記載されている通りの手順で進めていきます。
Node.js等がインストールできていない方は利用しているOSに応じてインストールをしてみてください。

Templateがあるので大変な方 OR 触りだけやってみたい人は、下記コードで始めてください
$ npx create-remix@latest --template remix-run/remix/templates/vite

上記のコマンドを実行すると、いくつかの質問がされます。
v2.8.1では以下のような質問がされます。

  • dir
  • git
  • deps

それでは詳しく見てみましょう。

dir
これは、プロジェクトのディレクトリ名を及び、Package.jsonの "name" に設定されます。

git
gitを利用するかしないかのフラグですリコメンドは利用するとされています。
特別な理由がない限りYesとしていいですね。

deps
PackageManagerをnpmとして依存関係をインストールするのかを質問される。

下記のコマンドを実行してプロジェクトの初期設定とRemixのTypescriptの設定を行う。

$ mkdir my-app
$ cd my-app
$ npm init -y

# install runtime dependencies
$ npm i @remix-run/node @remix-run/react @remix-run/serve isbot@4 react react-dom

# install dev dependencies
$ npm i -D @remix-run/dev vite typescript @types/react @types/react-dom @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint eslint-import-resolver-typescript eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react eslint-plugin-react-hooks vite-tsconfig-paths

tsconfig.jsonの設定は以下となっている。
基本的には、Remixのテンプレートを参考に作成していますが、Paths項目に関しては、~ から　@ と変更している。
これは、Next.jsの基本設定であり、こちらのほうが直感的に見やすい（個人差による）と思ったため設定を変えています。

{
    "include": [
      "**/*.ts",
      "**/*.tsx",
      "**/.server/**/*.ts",
      "**/.server/**/*.tsx",
      "**/.client/**/*.ts",
      "**/.client/**/*.tsx"
    ],
    "compilerOptions": {
      "lib": ["DOM", "DOM.Iterable", "ES2022"],
      "types": ["@remix-run/node", "vite/client"],
      "isolatedModules": true,
      "esModuleInterop": true,
      "jsx": "react-jsx",
      "module": "ESNext",
      "moduleResolution": "Bundler",
      "resolveJsonModule": true,
      "target": "ES2022",
      "strict": true,
      "allowJs": true,
      "skipLibCheck": true,
      "forceConsistentCasingInFileNames": true,
      "baseUrl": ".",
      "paths": {
        "@/*": ["./app/*"]
      },
  
      // Vite takes care of building everything, not tsc.
      "noEmit": true
    }
  }

vite.config.tsの設定

import { vitePlugin as remix } from "@remix-run/dev";
import { installGlobals } from "@remix-run/node";
import { defineConfig } from "vite";
import tsconfigPaths from "vite-tsconfig-paths";

installGlobals();

export default defineConfig({
  plugins: [remix(), tsconfigPaths()],
});

ここまで、きたらRemixのTypescriptのベーシックな骨組みはできたも同然です。

Remixの作り込み

骨組みができたら、実際に表示する箇所を作成していきましょう。
次にRootのtsxファイル(root.tsx)をappディレクトリに作成します。

$ mkdir app
$ cd app
$ touch root.tsx

root.tsxは下記のように作成する。

import {
    Links,
    Meta,
    Outlet,
    Scripts,
  } from "@remix-run/react";
  import type { MetaFunction } from "@remix-run/node";
import type {
    ReactNode
} from "react";

export const meta: MetaFunction = () => {
    return [
      { title: "Very cool app | Remix" },
      {
        property: "og:title",
        content: "Very cool app",
      },
      {
        name: "description",
        content: "This app is the best",
      },
    ];
  };
  const Root = ( { children } : { children: ReactNode}) =>{
    return (
      <html lang="en">
        <head>
          <meta charSet="utf-8" />
          <meta name="viewport" content="width=device-width, initial-scale=1" />
          <link
            rel="icon"
            href="data:image/x-icon;base64,AA"
          />
          <Meta />
          <Links />
        </head>
        <body style={{backgroundColor: "#DFBABA"}}>
          {children}
          <Outlet />
          <Scripts />
        </body>
      </html>
    );
  }

export default Root

簡単に説明をすると、

  1. import 文:

    import {
  Links,
  Meta,
  Outlet,
  Scripts,
} from "@remix-run/react";

    ここでは、@remix-run/react から複数のコンポーネントをインポートしています。これらはRemixフレームワーク固有の機能を提供します。

  2. App コンポーネント:
    App は、アプリケーションのルートコンポーネントです。これは関数コンポーネントであり、アプリケーションのHTML構造を返します。

  3. <html lang="en">:
    ルートHTML要素であり、lang 属性によりページの主要言語が英語（en）であることを示しています。

  4. <head> セクション:
    ドキュメントのメタデータ（タイトル、スタイルシートのリンク、スクリプトなど）を含む部分です。

    • <meta charSet="utf-8" />: 文字エンコーディングをUTF-8に設定します。
    • <meta name="viewport" content="width=device-width, initial-scale=1" />: モバイルデバイスでの表示を最適化します。
    • <Meta />: Remixが管理する追加のメタデータを挿入します。
    • <Links />: Remixが管理するスタイルシートリンクを挿入します。

  5. <body> セクション:
    ページのコンテンツを含む部分です。

    • <Outlet />: 子ルートのコンポーネントがレンダリングされる場所です。Remixでは、ネストされたルーティングがここに表示されます。
    • <Scripts />: アプリケーションで必要とされるJavaScriptスクリプトを挿入します。このスクリプトにより、クライアントサイドの動的機能が可能になります。

この構造は、Remixアプリケーションでの一般的なページレイアウトを定義しており、基本的なSEOとモバイルフレンドリーなビューポート設定を含んでいます。Outlet と Scripts コンポーネントは、それぞれアプリケーションのコンテンツと機能性を動的に管理します。

まとめ

今回は、簡単にRemixを作成してみました。

Nextjsと比較するとroutesの考え方がユニークであることが言えます。
詳細に関しては以下のページにて議論がされています。
※個人的にはNextjsのほうが使いやすかったり。。

https://github.com/remix-run/remix/discussions/4482

また、V2ではネストするルートとフラットなルートについて検討されており、各国のユーザに関しても混乱を持っているようですね。
このような議論はフレームワークでの会話のみではなく、ソフトウェア開発においてもよく見る内容ですね。

また、Remixの旧バージョンから扱っていた方は、
こちらのV2のドキュメントも一読する必要があるでしょう。

https://remix.run/docs/en/main/start/v2

先ほど取り上げたルートに関してはパッケージで旧バージョンとの共存ができるような仕組みが用意されているようですね。

https://remix.run/docs/en/main/start/v2#upgrading-without-changing-files

今回はRemixのチュートリアルを中心に学んでみましたが、普段扱っていないフレームワークは新しい発見や、気付きに気付かされるものとなりました。
また、Issueなどを覗いてみるとRemixに対しての開発者の思いが垣間見えてとてもおもしろかったです。

Discussion