なぜか画面が真っ黒に… Railsで「何も表示されない」ときに疑うべき原因

はじめに

現在スクール課題であるRailsでSNSアプリを開発している者です。開発中に「ヘッダーは表示されるのに、中身だけが真っ黒で何も表示されない」という現象に何度も遭遇しました。

エラー画面も出ないため原因の特定が難しく、かなり手こずりました。調査の結果、その原因は一つではなく、複数の問題が積み重なっていたことが分かりました。今回は、そのデバッグの道のりと、突き止めた原因を未来の自分への戒めとして共有します。

「何も表示されない」ときに疑うべき原因

1. CSS/SCSSの構文エラー

基本中の基本ですが、見落としがちです。私の場合は、SCSSファイル内の閉じ括弧}が一つ抜けていただけで、スタイルシート全体が読み込まれず、背景色だけが適用された「真っ黒な画面」が生まれました。

2. テンプレートエンジン(Slim)の罠

Slimはインデントに非常に厳しい言語です。コピー＆ペーストした際に、通常の半角スペースではなく、目に見えない特殊な空白文字（ノーブレークスペースなど）が混入することがあります。これが原因でSlimはHTMLの解析に失敗し、結果として何も描画されませんでした。 対策：エディタのインデント設定を「半角スペース」に統一し、怪しい箇所は手で打ち直す。

3. コントローラーのロジックミス

ビューに渡す**インスタンス変数（@tweetなど）がnil**の状態で、ビュー側でその変数を使おうとすると（例：@tweets.each）、エラーが発生して描画が止まります。 対策：「このビューが表示されるとき、コントローラーのアクションで必要なデータは全て揃っているか？」を必ず確認する。

4. ビューとパーシャルの関係性

• レイアウトとyield: application.html.slimのようなレイアウトファイルはただの器です。= yieldの部分に、各アクションに対応するビュー（home.html.slimなど）の中身が流し込まれます。ビューファイルが空だと、yieldも空になります。

• パーシャルの破損: 最も厄介だったのがこれです。ビューから呼び出されるパーシャル（_landing.html.slimなど）のファイル自体が、破損していたり空だったりするケースです。

一番効いたデバッグ方法：表示の単純化

問題が_landing.html.slimにあると突き止めた決定打は、ビューのコードを以下のように単純化したことでした。

app/views/static_pages/home.html.slim

- if user_signed_in?
  = render 'static_pages/timeline'
- else
  / = render 'static_pages/landing' を一時的にコメントアウト
  h1.text-white テスト表示

これで「テスト表示」が出たことで、問題が= render 'static_pages/landing'の行にあると確定できました。

まとめ

「何も表示されない」は、エラーメッセージが出ないだけで、裏では何かが確実に起きています。問題に遭遇したら、以下の順で一つずつ原因を切り分けていくのが解決への近道だと学びました。

1. CSSは正しく読み込まれているか？

2. レイアウトのyieldまでの構造は正しいか？

3. コントローラーはビューに必要なデータを渡しているか？

4. ビューから呼び出しているパーシャルは壊れていないか？ ← 単純な表示に置き換えてテスト！