ViewComponent + Hotwire + TailwindCSS

Rails7, Hotwire, ViewComponent, TailwindCSS でのサンプルプロジェクト.

Hotwire + ViewComponent + TailwindCSS の組み合わせにより、/componentsでコンポーネント指向な実装を目指す.

---

Categories

• Version
• Install
  • 1. node_modules フォルダを作成
  • 2. env ファイルを作成
  • 3. Docker イメージを作成
  • 4. database を作成
  • 4. seed データを投入
  • 5. プロジェクトを起動
  • 6. seed ファイルに定義したアカウントでログイン
  • 7. 画面にアクセス
  • 8. 完了
• Command
• Other
  • ViewComponentのプレビュー

---

Version

• Ruby 3.2.2
• Rails 7.0.4
• Tailwind CSS

---

Install

1. node_modules フォルダを作成

Docker Componse で node_modules ボリュームをバインドするために必要.

./
  ├─ app
  ├─ ...
  ├─ node_modules // このフォルダを作成
  └─ ...

2. env ファイルを作成

.envに記述したクレデンシャルは、docker-compose.yml経由でプロジェクト内に環境変数として登録される.(※本プロジェクトでは未使用)

./
  ├─ app
  ├─ ...
  ├─ .env // このファイルを作成
  └─ ...

3. Docker イメージを作成

docker compose build

4. database を作成

docker compose run web rails db:create && rails db:migrate

4. seed データを投入

docker compose run web rails db:seed

5. プロジェクトを起動

docker compose up

6. seed ファイルに定義したアカウントでログイン

id	pass
current_user@example.com	example
other_user@example.com	example

7. 画面にアクセス

ブラウザから各画面にアクセスして表示されることを確認.

画面名	URL
タスク一覧画面	http://localhost:3000/tasks
ログイン画面	http://localhost:3000/sign_in

8. 完了

Command

• view_component と stimulus コントローラをジェネレート
  • rails generate component Hoge::Fuga --stimulus --preview
• stimulus コントローラを index.js に登録(rake コマンドで拡張したもの)
  • rails view_component:stimulus_manifest:update

Other

ViewComponentのプレビュー

/rails/view_componentsからコンポーネント単位でのプレビューを確認できる