Railsプロジェクトのセットアップ：EsbuildとTailwindCSSを使用する方法

Ruby on Railsは、ウェブアプリケーションを迅速に開発するための強力なフレームワークです。最近では、フロントエンドのビルドツールとしてEsbuild、スタイリングのためのTailwindCSSが人気を集めています。この記事では、RailsプロジェクトにEsbuildとTailwindCSSを組み込む方法を詳しく解説します。

必要なツールのインストール

まず、Railsプロジェクトを作成するために必要なツールをインストールします。以下の手順に従ってください。

# RubyとRailsがインストールされていることを確認します。
ruby -v
rails -v

# 新しいRailsプロジェクトを作成します。
rails new myapp --skip-javascript
cd myapp

ここで、`--skip-javascript`オプションを使用して、デフォルトのJavaScriptセットアップをスキップします。これにより、Esbuildを使用して独自のJavaScriptビルドプロセスを設定できます。

Esbuildのセットアップ

次に、Esbuildをプロジェクトに追加します。以下の手順で進めてください。

# Esbuildをインストールします。
yarn add esbuild --dev

次に、プロジェクトのルートディレクトリに`esbuild.config.js`というファイルを作成します。このファイルには、Esbuildの設定を記述します。

touch esbuild.config.js

以下の内容を`esbuild.config.js`に追加します。

const esbuild = require('esbuild');

esbuild.build({
  entryPoints: ['./app/javascript/application.js'],
  bundle: true,
  outdir: './app/assets/builds',
  sourcemap: true,
  watch: process.argv.includes('--watch'),
}).catch(() => process.exit(1));

この設定では、`application.js`をエントリーポイントとして指定し、バンドルされたファイルを`app/assets/builds`ディレクトリに出力します。

JavaScriptファイルの作成

次に、`app/javascript`ディレクトリに`application.js`ファイルを作成します。このファイルは、アプリケーションのJavaScriptコードを含むメインファイルです。

mkdir -p app/javascript
touch app/javascript/application.js

`application.js`に以下のコードを追加します。

// ここにJavaScriptコードを追加します。
console.log("Hello, Rails with Esbuild!");

TailwindCSSのセットアップ

次に、TailwindCSSをプロジェクトに追加します。以下の手順で進めてください。

# TailwindCSSとその依存関係をインストールします。
yarn add tailwindcss postcss autoprefixer --dev

# TailwindCSSの設定ファイルを生成します。
npx tailwindcss init -p

これにより、`tailwind.config.js`と`postcss.config.js`という2つの設定ファイルが生成されます。

TailwindCSSの設定

次に、`tailwind.config.js`を開いて、コンテンツの設定を追加します。

module.exports = {
  content: [
    './app/**/*.html.erb',
    './app/helpers/**/*.rb',
    './app/javascript/**/*.js',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

この設定により、TailwindCSSは指定したファイルをスキャンして、使用されているクラスを生成します。

CSSファイルの作成

次に、TailwindCSSを使用するためのCSSファイルを作成します。`app/assets/stylesheets`ディレクトリに`application.tailwind.css`というファイルを作成します。

mkdir -p app/assets/stylesheets
touch app/assets/stylesheets/application.tailwind.css

`application.tailwind.css`に以下の内容を追加します。

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

ビルドプロセスの設定

次に、EsbuildとTailwindCSSを組み合わせてビルドプロセスを設定します。`package.json`ファイルを開いて、以下のスクリプトを追加します。

"scripts": {
  "build": "node esbuild.config.js",
  "build:watch": "node esbuild.config.js --watch"
}

これにより、`yarn build`コマンドでビルドを実行できるようになります。

アプリケーションの起動

すべての設定が完了したら、アプリケーションを起動してみましょう。以下のコマンドを実行します。

# ビルドを実行します。
yarn build

# Railsサーバーを起動します。
rails server

ブラウザで`http://localhost:3000`にアクセスすると、Railsアプリケーションが表示されるはずです。

TailwindCSSのスタイリングを追加

最後に、TailwindCSSを使用してスタイリングを追加してみましょう。`app/views/layouts/application.html.erb`ファイルを開き、以下のように変更します。




  Myapp
  <%= csrf_meta_tags %>
  <%= csp_meta_tag %>

  <%= stylesheet_link_tag 'application', 'data-turbo-track': 'reload' %>
  <%= javascript_include_tag 'application', 'data-turbo-track': 'reload' %>



  
    Hello, Rails with TailwindCSS!

これで、TailwindCSSを使用したスタイリングが適用されます。再度ブラウザでアプリケーションを確認してみてください。

まとめ

この記事では、RailsプロジェクトにEsbuildとTailwindCSSを組み込む方法を解説しました。これにより、効率的なフロントエンド開発が可能になります。ぜひ、あなたのプロジェクトに取り入れてみてください！