はじめに

Rails7 x Tailwind CSSでアプリを作成しようとした際、bin/devコマンドを忘れてCSSデザインが適用されず、原因究明に時間がかかってしまったため記事にすることにしました。

bin/devって何

Rails7ではrails sコマンドの代わりにbin/devコマンドを打つことで、JavaScriptやCSSがビルドされるようになっています。

ビルドとは

JSやCSSはいろんなファイルに分散して書いてある。これらを本番環境に持っていく際、下記の作業を行うことを「ビルド」という

minify：インデントやコメントを取り除く
transpile：新しい規格を古い規格に変換（新しい規格に対応していないブラウザがあるため）
bundle：色んなファイルや外部ソースに散っているコードを集めて一つのファイルにまとめる

参考：なぜJavascriptにビルドが必要？フロントエンド開発の知識をアップデートしよう

bin/devの中身を見てみると、

#!/usr/bin/env sh

if gem list --no-installed --exact --silent foreman; then
  echo "Installing foreman..."
  gem install foreman
fi

# Default to port 3000 if not specified
export PORT="${PORT:-3000}"

exec foreman start -f Procfile.dev --env /dev/null "$@"

「gem foremanが入ってなければインストールして、そのforemanでProcfile.devを実行する」というような内容です。

foremanって何

Using foreman you can declare the various processes that are needed to run your application using a Procfile.

Procfileというファイルに設定を書き込むと、複数のプロセスをまとめて立ち上げてくれるようなツールらしい。

Procfileって何

アプリケーション直下に、Procfile.devというファイルがあります。development環境用のProcfileというところでしょうか。

web: bin/rails server -p 3000
js: yarn build --watch
css: yarn build:css --watch

書き方は下記の通り、プロセス名: コマンドという形式になっています。

A Procfile should contain both a name for the process and the command used to run it.
web: bundle exec thin start
job: bundle exec rake jobs:work
https://ddollar.github.io/foreman/#PROCFILE

Procfileの中で、rails sやJS、CSSのビルドが行われているのがわかります。

ちなみにここのbuildやbuild:cssはpackage.jsonで定義されています。

  "scripts": {
    "build": "esbuild app/javascript/*.* --bundle --sourcemap --format=esm --outdir=app/assets/builds --public-path=/assets",
    "build:css": "tailwindcss -i ./app/assets/stylesheets/application.tailwind.css -o ./app/assets/builds/application.css --minify"
  },

まとめ

bin/devコマンドを実行すると、Procfile.dev内で定義されたrails sとJS、CSSのビルドをforemanが実行していることがわかりました。

参考

Rails 7.0 + Ruby 3.1でゼロからアプリを作ってみたときにハマったところあれこれ - Qiita

[rails7] bin/devの役割とその仕組み - Qiita