【Typescript】Remixクイックスタート

2024-04-22に更新

はじめに

このブログはNext.jsで作っています。 Next.js便利だなと思っている反面、他にいいものはないかなと調べていたら、、

https://www.epicweb.dev/why-i-wont-use-nextjs

こういう記事を目にすることがあり、
ちょっとRemixを触ってみようという気になったので、
すごい初歩のRemixクイックスタートの記事を書いてみました！

Quick Start (5m) | Remix

Remix

CLIを使用する場合

下記のように進むとRemixがテンプレートを作ってくれる。

npx create-remix@latest

# 質問
Where should we create your new project?
.

Initialize a new git repository? (recommended)
No

Install dependencies with npm? (recommended)
Yes

ちょっと、npmで構成している時間が1分くらいあったので遅いかなと感じました。

なので、今回は公式にもあるように一から進めてみようと思います。

一から作っていく場合

mkdir remix-app && cd remix-app
npm init -y

# remixをインストール
npm i @remix-run/node @remix-run/react @remix-run/serve isbot@4 react react-dom
# typescript使用時
npm i -D @types/node @types/react @types/react-dom typescript

# ビルドツールはviteを使用
npm i -D @remix-run/dev vite vite-tsconfig-paths

どうやら、RemixはViteを使用しておりプラグインが充実している。
こちらも公式に沿ってViteの設定をする。
他にもViteより10倍早いと言われているTurbopackもあるがRemixのプラグインにあるか調べきれてないので、
とりあえず、Viteで進める。

vite.config.ts

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

export default defineConfig({
  plugins: [ remix(), tsconfigPaths()],
  server: {
    port: 3001,
  },
  build: {
    outDir: "build"
  }
});

このファイルでポートを任意の番号に変更できる。

ルートを作成

mkdir app
touch app/root.tsx

root.tsx

          import { Links, Meta, Outlet, Scripts, ScrollRestoration } from "@remix-run/react"
import { ReactNode } from "react";
import "@/styles/global.scss"

export function Layout({children}: {children: ReactNode}) {
  return (
    <html lang="ja">
      <head>
        <meta charSet="utf-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <Meta />
        <Links />
      </head>
      <body>
        {children}
        <ScrollRestoration />
        <Scripts />
      </body>
    </html>
  )
}

export default function App() {
  return <Outlet />;
}

これが大元を司っているファイル。
ScrollRestorationは、ブラウザのスクロール位置を覚えておき、
ブラウザバックで戻ってきたときに、同じ位置で表示してくれる。

viteの設定ファイルを作成

vite.config.js

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

export default defineConfig({
  plugins: [ remix(), tsconfigPaths()],
  server: {
    port: 3001,
  },
  build: {
    outDir: "build"
  }
});

package.jsonに追記。

"dev": "remix vite:dev",
"build": "remix vite:build"

無事にlocalhost:3001で起動した！

このコマンドは、
Cloudflare Workers、Netlify、Vercel、Fastly、AWS、Deno、Azure、Fastify、Firebaseなどどの環境でも動作するようにできている。

また独自のサーバーを組み込むことも可能。
しかし、RemixはViteを推しているようなのでこのままViteを使ってみる。

Tailwindを入れてみる

せっかくなので、TailwindCssを導入してみる。

npm i tailwindcss postcss autoprefixer sass

個人的にcssよりsassの方が好きなのでここで一緒に入れておく。

設定ファイルを生成

npx tailwindcss init -p

tailwind.config.js

上記のコマンドでtailwind.config.jsファイルが作成されている。
appディレクトリ以下に適用させるように設定。

tailwind.config.js

          /** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./app/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

グローバルscssファイルで読み込む

global.scss

          @tailwind base;
@tailwind components;
@tailwind utilities;

これで無事にTailwindのスタイルが適用された！

まとめ

Next.jsを使用していると、結構ブラックボックスになる部分が個人的にはあると思っていたので、
ゼロイチのような感じで構築できていけるのは書いてて楽しい気がする😇
ちょっとハマりそうなので、今後ルーティングやサーバー側の処理の内容を書けたらなって思っている！

https://github.com/zaki-app/remix-app