Remixの世界: プロジェクトのセットアップ #2


## はじめに

はじめまして、WEB フロントエンドエンジニアの nuintee です。

この度かねてより関心があった Remix に入門する覚悟が出来たので、
その学習過程をアドベントカレンダーにしてみました。

Remix に少しでも興味のある方は、ぜひご覧ください。

## フロントエンドの世界 2024 について

「[フロントエンドの世界 2024](https://qiita.com/advent-calendar/2024/frontend-assort-2024)」は普段 [`Next.js`](https://nextjs.org/) を書いている筆者が、同じフロントエンドライブラリである [`Svelte(Kit)`](https://svelte.jp/docs/introduction), [`Remix`](https://remix.run/docs/en/main) ,[`SolidJS`](https://docs.solidjs.com/), [`Qwik(City)`](https://qwik.dev/)の 4 つにアソート形式で触れ、理解を深めていく様子を収めたアドベントカレンダーです。

![frontend-assort-2024-banner.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3294810/7666d209-1aef-9ce5-c298-d8e60847e830.png)

## もくじ

- [はじめに](#はじめに)
- [フロントエンドの世界 2024 について](#フロントエンドの世界-2024-について)
- [もくじ](#もくじ)
- [前提](#前提)
- [Remix の導入](#remix-の導入)
- [Remix プロジェクトの立ち上げ](#remix-プロジェクトの立ち上げ)
- [ブラウザで確認](#ブラウザで確認)
- [おわりに](#おわりに)

## 前提

本シリーズでは [`Turborepo`](https://turbo.build/) によるモノレポ管理を行っています。

単体で `Remix` を導入する場合は適宜プロジェクト作成先パスを変更して下さい。

## Remix の導入

`apps`配下に`Remix`のプロジェクトを作成します。

```shell
# Turborepoの場合
pnpm create remix@latest apps/remix-client
```

```shell
# 単体の場合
npm create remix@latest remix-client
```

:::note
--template <テンプレートの種類> でテンプレートの指定も可能です。
(参考: [create-remix---template](https://remix.run/docs/en/main/other-api/create-remix#create-remix---template))
:::

### 対話型プロジェクトセットアップ

**git リポジトリの初期化**
今回は初期化を行います。
※ お好みで選んでください。

```shell
Initialize a new git repository?
> Yes
```

**パッケージをインストールするかどうか**
今回は `Turborepo` で管理するので `pnpm` でインストールします。
※ お好みで選んでください。

```shell
Install dependencies with pnpm?
> Yes
```

```shell:実行ログ全文
npm warn deprecated inflight@1.0.6: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.
npm warn deprecated glob@7.2.3: Glob versions prior to v9 are no longer supported

 remix   v2.15.0 💿 Let's build a better website...
      ◼  Directory: Using apps/remix-client as project directory

      ◼  Using basic template See https://remix.run/guides/templates for more
      ✔  Template copied

   git   Initialize a new git repository?
         Yes

  deps   Install dependencies with pnpm?
         Yes

      ✔  Dependencies installed

      ✔  Git initialized

  done   That's it!

         Enter your project directory using cd ./apps/remix-client
         Check out README.md for development and deploy instructions.

         Join the community at https://rmx.as/discord

```

今回はモノレポで管理しているので`apps`配下に`remix-client`という名前でミニマムテンプレートのプロジェクトを作成しました。

https://remix.run/docs/en/main/other-api/create-remix

## Remix プロジェクトの立ち上げ

dev コマンドでローカル環境の立ち上げます。

```shell
# モノレポの場合 (ルートで実行)
pnpm --filter remix-client dev
```

:::note warn
↑ のコマンドで立ち上がらない場合は package.json の `name`フィールド が `remix-client` に設定されているか確認して下さい。
:::

```shell
# 単体の場合
npm install
npm run dev
```

## ブラウザで確認

ブラウザで http://localhost:5174 を開くと、"Welcome to Remix" と表示されます。

![スクリーンショット 2024-12-04 1.09.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3294810/a2205b02-45c6-a897-6e0e-5d8824484e81.png)

## おわりに

たったの 2 ステップであっという間に Remix プロジェクトをセットアップする事が出来ました。

テンプレートの種類も豊富なので必要なツールを兼ね備えたプロジェクトを簡単に立ち上げる事が出来そうです。(参考: [Templates And Stacks](https://remix.run/docs/en/main/guides/templates#templates-and-stacks))

また本シリーズを通してお気軽にコメントお待ちしております。
また完走賞も目指しているので是非応援お願いします！

---

この記事は [フロントエンドの世界 Advent Calendar 2024](https://qiita.com/advent-calendar/2024/frontend-assort-2024)の 9 記事目です。
次の記事はこちら [Remix の世界: UI 構築とトランジション #3](https://qiita.com/nuinteedev/private/280b9ba9fe822d775d26)