はじめに？
自作モノリスRailsアプリを Rails(バックエンド) + Nuxt3(フロントエンド)、に分割して、SPA(SSRあり)化してから、開発継続中。
現在、Nuxt4にアップデート済み。
Easel
画像ビューア。
フロントエンド
バックエンド
Vesper
Vue.js/Nuxtベースのモデル駆動開発支援フレームワーク。
Easelのコードベースから分離。
1.0に向け、開発中。
機能
・ユーザー登録/ログイン/ログアウト/ユーザープロフィール編集
・画像一覧/画像登録(アップロード、タグ付け)
：画像表示(拡大/縮小/全画面)
・画像へのコメント(投稿/一覧/編集/削除)
・画像プロフィール編集
・レスポンシブ・デザイン(似非かも？)
スクリーンショット
画像一覧
未ログイン
ログイン済み
検索条件
ログイン
ユーザー登録
ユーザープロフィール
メールアドレス&パスワードでのログイン
Googleログイン
ユーザープロフィール編集
メールアドレス&パスワードでのログイン
Googleログイン
画像アップロード
画像詳細
ログイン済み
未ログイン
画像プロフィール編集
構成
| フレームワーク | |
|---|---|
| フロントエンド | Nuxt4 |
| バックエンド | Rails8.1 |
Nuxt4フロントエンド
Vue.js3 のAPIは Composition API を全面採用。
ビューまわりは、旧アプリ(Rails)のパーシャルViewを(レイアウトや機能については)そのままVue.jsのSFCに書き換えてUIコンポーネント化してから変更の後コミットしたのが始まりです。
現在は、初期実装から、それなりに変わっています。
利用技術
利用NPMパッケージ
| 機能 | NPMパッケージ |
|---|---|
| レイアウト： | Tailwind CSS v4 + daisyUI v5 |
| 入力バリデーション: | Regle |
| 国際化(i18n) | Vue i18n + Nuxt I18n |
| 通知 | Vue Sonner |
| カレンダー | Vue Datepicker |
| ページング | なし (独自実装) |
| Googleログイン | Vue3 Google Sign-in |
| WYSWYGエディタ | Tiptap |
| 画像拡大表示 | Photoswipe / GLightbox |
| ... etc |
Railsバックエンド
WEB API と 管理画面(Motor Admin Rails)で構成。
Rails8.1 + PostgreSQL。
※ Motor Admin Railsについてはカスタマイズしていません。
利用アプリ
| 機能 | アプリ |
|---|---|
| DBサーバー | PostgreSQL |
| ストレージサーバー | MinIO (Amazon S3互換) |
| NoSQL/KVストア | Valkey (Redis互換)(Session Store用) |
| 画像プロキシ | imgproxy |
利用Gem
| 機能 | Gem |
|---|---|
| ログイン認証 | devise + devise-jwt |
| 画像アップロード | Shrine |
| タグまわり | No Fly List |
| 論理削除 | Discard |
| ページング | Pagy |
| UIのコンポーネント化 | ViewComponent |
| JSONシリアライザ | Alba |
| JSONパーサ/マーシャラー | Oj |
| (簡易)管理機能 | Motor Admin Rails |
| テスト | RSpec |
| フロントエンドツール | Rails Vite |
| 画像プロキシ | imgproxy.rb |
| ... etc |
利用NPMパッケージ
| 機能 | NPMパッケージ |
|---|---|
| レイアウト | Tailwind CSS v4 + daisyUI v5 |
| ... etc |
旧バージョン(Rails)
バックエンドとフロントエンドが一体化したモノリス。
Hotwire(Stimulus + Turbo)、
画像詳細ページのコメント一覧/投稿/編集/削除機能に Vue.js3 を採用。
利用Gem
| 機能 | Gem |
|---|---|
| ログイン認証 | devise |
| 画像アップロード | Shrine |
| タグまわり | No Fly List |
| 論理削除 | Discard |
| ページング | Pagy |
| UIのコンポーネント化 | ViewComponent |
| JSONシリアライザ | Alba |
| JSONパーサ/マーシャラー | Oj |
| (簡易)管理機能 | Motor Admin Rails |
| フロントエンドツール | Rails Vite |
| 画像プロキシ | imgproxy.rb |
| ... etc |
利用NPMパッケージ
| 機能 | NPMパッケージ |
|---|---|
| レイアウト | Tailwind CSS v4 + daisyUI v5 |
| ... etc |
履歴
| 変更箇所 | |
|---|---|
| Railsまわり | |
| Rails本体 | 5.2 → 6 → 7.0 → 7.1 -> 7.2 → 8.0 → 8.1 |
| アップローダ | Refile → Shrine |
| ストレージ | プロジェクト内 → MinIO (AWS S3互換) |
| ページング | Kaminari → Pagy |
| JSONシリアライザ | JSON:API Serialization Library → Alba |
| 認証まわり | Sorcery → devise |
| タグまわり | ActsAsTaggableOn → No Fly List |
| 管理機能 | Rails Admin → Motor Admin Rails |
| JS/CSSまわり | |
| Sprockets → Sprockets + Webpacker (on Node.js) → Sprockets + esbuild & sass → Propshaft + esbuild & sass (jsbundiling-rails + cssbundling-rails) → Propshaft + Vite Ruby(vite_rails) → Propshaft + Rails Vite | |
| Yarn → pnpm | |
| JSまわり(旧バージョン) | |
| Vue.js 2 → 3 | |
| JavaScript → TypeScript | |
| Luminous → baguetteBox.js → GLightbox | |
| Strip → PhotoSwipe | |
| Nuxtフロントエンド | |
| Nuxt3 → Nuxt4 | |
| VueQuill(Quill1) → Vue Quilly(Quill2) → Tiptap | |
| Vuelidate → Regle | |
| VCalendar → Vue Datepicker | |
| DBまわり | MySQL → PostgreSQL |
| NoSQL/KVストアまわり | 未導入 → Redis → Valkey |
| 画像プロキシ | 未導入 → imgproxy |
| CSSまわり | Bootstrap 4 → 5 → Tailwind CSS v4 + daisyUI v5 |
最後に
Nuxt3/4いいよ、Nuxt3/4！
上記アプリのSPA化に掛かった期間はちょろちょろ作成で数週間。
(初めての Nuxt3 アプリ作成、Nuxtを触るのも初めて、でした。)
Next.js/Remix v2(React) / TanStack Start(React/Solid.js)を用いて数週間で？RailsアプリをSPA化するのは、今のところ、自分には無理... と、以前、書いていましたが、面倒くさがらなければ、今なら時間を掛ければできそうです、でも、面倒くさいので、しません、ハマりどころもありそうなので...。
コードの解説は書きません。
コードは、全てを識(し)っている(嘘？です、書いてみただけです)。