1.はじめに
開発中に出てきたエラーの原因と対処を振り返りとしてまとめました。
同じエラーで困っている人の参考になればうれしいです。
開発環境
・Ruby 3.3.6
・Rails 8.0.2.1
・Docker(開発環境)
・DB: PostgreSQL
・画像管理: Cloudinary
・デプロイ: Render / Neon
目次
1. Tailwind CSSが読み込めないエラー対応
⚠️ エラーメッセージ
ブラウザの検証 → Console 画面にて
tailwindcss:1 Failed to load resource: the server responded with a status of 404 (Not Found)
ページ読み込み時に Tailwind CSS が見つからず 404 エラー
原因
- Tailwind CSS を使うための Gem が入っていなかった
- Rails が Tailwind 用の CSS をコンパイルできず、ブラウザからアクセスしても存在しないため 404 エラーになった
要するに、ファイルが存在しない状態 で読み込みを試みていた
対応方法
# gemの追加
gem "tailwindcss-rails"
追加後に
bundle install
必要に応じてbin/rails tailwindcss:installを実行して初期ファイル生成
/ CSSの読み込み */
= stylesheet_link_tag "application", "data-turbo-track": "reload"
2. TailwindのCSS エラー解消したらハンバーガーメニューがきかなくなった
⚠️ 状況
Tailwind CSS の 404 を解消したら、今度はハンバーガーメニューの JavaScript が効かなくなった
原因
# Taileindエラー解消前
= stylesheet_link_tag :app, "application", "data-turbo-track": "reload"
# 修正後
= stylesheet_link_tag "application", "data-turbo-track": "reload"
:app は Ruby のシンボルで、Rails は内部で CSS ファイル名に変換して探す
実際に app.css がなくても、プリコンパイル済みのエントリ "app" があればブラウザが CSS を取得できる
そのため、application.css にインポートされていた hamburger.css も読み込まれ、ハンバーガーメニューが正常に動作していたがTailwin CSSエラーで :app シンボルを消した為、ハンバーガーメニューが動かなくなった
対応方法
= stylesheet_link_tag "application", "hamburger", "data-turbo-track": "reload"
正しい CSS ファイル名を明示的に指定したら、結果として、ハンバーガーメニューも再び動作するようになった
3.Google Map JSエラー
⚠️ エラーメッセージ
ブラウザの検証 → Console 画面にて
InvalidValueError: Map: Expected mapDiv of type HTMLElement but was passed null
マップを描画する#mapが存在しないページでもJSが実行されている
原因
- JSが全ページで実行される仕様
-
#mapがないページでnew google.maps.Map()が呼ばれる
対応方法
// マップ要素の確認を最初に行う
const mapElement = document.getElementById("map");
if (!mapElement) {
return;
}
ページに #map がなければ JS 処理をスキップする
これでエラーが出なくなる
4.Renderでメモリ不足エラー
⚠️ エラーメッセージ
Instance failed: c2g7h
Ran out of memory (used over 512MB) while running your code.
原因
- Render 上のインスタンスが 512MB 以上のメモリを消費
- メモリ制限を超えた為、Render がプロセスを強制終了
つまり「サーバー側のメモリ不足」によるクラッシュ
対応方法
ActiveStorage 側でバリアント処理（サーバーで画像加工）してた為、バリアント処理をCloudinaryに移行
サーバーで画像加工せず、Cloudinary 側でリサイズ・変換を実施
その結果、Render のメモリ消費が減り、インスタンスが落ちなくなった
まとめ記事はこちら
おわりに
何時間もエラーにハマって、
もうなんで解決しないの…やり直そうかなって思いながら対応して、解決したエラーが、結局1行の追加だったときの虚無感と達成感は何とも言えないものがあります。
でも、この経験があったからこそ Rails8 の仕組みが少し理解できたと思います！
同じエラーで困っている方の参考になれば幸いです