ReactRemix

環境構築
- Remix プロジェクト作成

Reactの新しいフレームワークであるRemixを試したので、インストール方法とプロジェクトの作成方法について解説します。

まずは、Remixの公式ドキュメントを確認することをお勧めします。英語が得意な方は、以下のリンクからアクセスできます。

Remix

React Remixは2021年11月28日にオープンソースとしてリリースされたばかりの新しいフレームワークです。

そして、この記事は、2021年11月28日に投稿されたものであり、筆者がRemixを試した結果を報告しています。

ただし、Remixは今後もアップデートが続く可能性があります。そのため、最新情報を確認することをお勧めします。

環境構築

※2021年11月28日時点

Node.js v14以上

npm v7以上

Windows or Mac

VS Code

この記事ではVS Codeのターミナル操作となっておりますのでご了承ください。

Remix プロジェクト作成

まずはRemixプロジェクトを作成するために、以下のコマンドを実行します。

npx create-remix@latest

React Remix

このコマンドはプロジェクトの初期化を行います。

実行すると、Remixのロゴと同じカラフルな表示が出力され、可愛らしいデザインに目を奪われます。

そのまま進むと、オプション選択肢が表示されます。

React Remixオプション選択

ドキュメントによると、「Remix App Serverを選択することが重要」とのことなので、1番上の「Remix App Server」のデプロイターゲットを選択することをおすすめします。

React Remixオプション選択②

さらに、表示された画面でJSのみかTypeScriptなのかを選択します。

ドキュメントチュートリアルではTypeScriptでの使用が推奨されていますが、好みに合わせて選択してください。

筆者はTypeScriptを選択しました。

これで、テンプレートのプロジェクトが作成されます。

プロジェクト構造は以下のようになっています。

my-react-remix-app/
├── app/
│   ├── components/
│   ├── hooks/
│   ├── routes/
│   ├── entry.client.tsx
│   ├── entry.server.tsx
│   ├── root.tsx
│   └── app.tsx
├── public/
│   ├── favicon.ico
│   └── index.html
├── remix.config.js
├── .gitignore
├── package.json
└── tsconfig.json

このプロジェクト構造には、Reactアプリケーションのデフォルトのファイルが含まれています。

これらのファイルを使用して、Remixアプリケーションを開発することができます。

app/

全てのRemixアプリコードが入る場所となり、複数のファイルで構成されています。

components/：アプリケーションで使用されるReactコンポーネントが含まれます。
hooks/：アプリケーションで使用されるReactフックが含まれます。
routes/：ここではすべての『ルートモジュール』が移動する場所となります、つまり、アプリケーションのすべてのルートが定義されています。各ルートは、URLパターンとそれに対応するReactコンポーネントを指定しています。これらのルートは、app/routes/フォルダ内のファイルに分割することができます。
entry.client.tsx/：ブラウザ環境でアプリケーションを起動するためのエントリーポイントです。このファイルは、クライアントサイドで実行されるReactコードを含みます。
entry.server.tsx/：サーバー環境でアプリケーションを起動するためのエントリーポイントです。このファイルは、サーバーサイドで実行されるReactコードを含みます。
root.tsx/：アプリケーション全体のルートコンポーネントです。アプリケーションのレイアウトを決定するために使用されます。HTMLの要素をレンダリングするために使用されます。
app.tsx/：アプリケーションのエントリーポイントとなるReactコンポーネントです。app/root.tsxを呼び出し、必要なコンポーネントやフックを組み込みます。