Reactの新しいフレームワークであるRemixを試したので、インストール方法とプロジェクトの作成方法について解説します。
まずは、Remixの公式ドキュメントを確認することをお勧めします。英語が得意な方は、以下のリンクからアクセスできます。
React Remixは2021年11月28日にオープンソースとしてリリースされたばかりの新しいフレームワークです。
そして、この記事は、2021年11月28日に投稿されたものであり、筆者がRemixを試した結果を報告しています。
ただし、Remixは今後もアップデートが続く可能性があります。そのため、最新情報を確認することをお勧めします。
環境構築
※2021年11月28日時点
Node.js v14以上
npm v7以上
この記事ではVS Codeのターミナル操作となっておりますのでご了承ください。
Remix プロジェクト作成
まずはRemixプロジェクトを作成するために、以下のコマンドを実行します。
npx create-remix@latest
このコマンドはプロジェクトの初期化を行います。
実行すると、Remixのロゴと同じカラフルな表示が出力され、可愛らしいデザインに目を奪われます。
そのまま進むと、オプション選択肢が表示されます。
ドキュメントによると、「Remix App Serverを選択することが重要」とのことなので、1番上の「Remix App Server」のデプロイターゲットを選択することをおすすめします。
さらに、表示された画面で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を呼び出し、必要なコンポーネントやフックを組み込みます。
public/
index.html：アプリケーションのルートHTMLファイルが含まれます。
.gitignore：Gitが無視するファイルのリストが含まれます。
remix.config.js
remix.config.jsファイルは、React Remixアプリケーションの設定ファイルで、アプリケーションのカスタムロジックを追加するために使用されます。
このファイルでは、例えば、以下のような設定を行うことができます。
ルートの追加や変更
ビルド時のパフォーマンスチューニング
外部ライブラリのインストールや設定
環境変数の設定
このファイルは、プロジェクトのルートディレクトリに置かれる必要があります。
以上がこのアプリの基本的なファイル構成についての説明です。
ではターミナルで以下のコマンドを使用します。
npm run dev
このコマンドを実行することで、テンプレートアプリが実行されます。
具体的には、Webアプリケーション開発のためのツールであるnpmが、パッケージ内の「dev」スクリプトを実行します。
実行されたアプリは、Webブラウザ上で「http://localhost:3000」というアドレスで表示されます。
このアドレスを開くと、RemixというReactフレームワークを用いたWebアプリケーションが動作します。
以上が、ターミナル上でのコマンド実行とWebアプリケーションの実行に関する簡単な説明です。
これらの情報を元に、自分で実際に試してみることで、より深く理解することができます。
オープンソースとしてリリースされたばかりですので、筆者も手探りでやっております。