Remixアプリケーションの環境構築
はじめに
この記事では、WebアプリケーションのフレームワークであるRemixを試すために基本的な部分の初期構築を行ったため、その際の備忘録となります。
今回のコード
今回紹介する内容については、以下のGithubリポジトリで公開しています。
1. 環境構築
まず初めにRemixアプリケーションの環境構築を行いました。主に、以下のPRでまとめています。
Remixのアプリケーションの初期構築については、公式ドキュメントを参考に実行しました。
基本的に公式ドキュメントで問題ありませんでしたが、１点考慮すべき点として、現時点(2025/01時点)のremixの最新バージョンが、React.jsのv19に対応していなかったため、React.jsはv18をインストールしています。
2. 開発環境のDocker化
次に「開発環境のDocker化」です。以下のPRでまとめています。
3. ESLint, prettierの導入
次にLinterである「ESLint, prettierの導入」です。以下のPRでまとめています。
ESLintは、v9から設定手順が「FlatConifg」という形式に大きく変わりましたので、この形式での設定を採用しております。次に、設定手順については、公式ドキュメントに従いました。
具体的には、以下のスクリプトを実行することで、初期設定を一括で行なっております。
npm init @eslint/config@latest
次に、ESLintのプラグインについては、TypeScript, React.js, prettier, アクセシビリティ等の基本的なプラグインを追加しています。
- typescript-eslint
- eslint-plugin-react
- eslint-plugin-react-hooks
- eslint-plugin-jsx-a11y
- eslint-plugin-import
- eslint-config-prettier
また、ESLintに合わせて、フォーマッターであるprettierについても導入しています。
4. 「tailwind」の導入
次に、CSSフレームワークとして「tailwind」を導入しました。こちらは以下のPRでまとめられています。
tailwindについて、現時点(2025/01時点)で最新バージョンはv4ですが、このバージョンの導入を試みるもエラーとなってしまいました。更に解決方法が分からなかったため、仕方なくv3系のインストールを行いました。その際の導入手順は、公式ドキュメントを参考にしています。
5. 「shadcn/ui」の導入
次に、UIフレームワークとして「shadcn/ui」を導入しました。先述の「tailwind」を導入したのも、依存関係のあるこの「shadcn/ui」を試したかったことが理由になります。こちらについては、以下のPRでまとめています。
最後に
今回は、Webアプリケーションフレームワークである「Remix」で開発をするにあたっての基本的な項目の構築手順について、記事にまとめました。
また、他にも以下の記事でRemixアプリケーションの機能開発についてまとめていますので、ご興味のある方は合わせてご確認ください。
Discussion