Railsでcssファイルの使用法について質問

Question

Rails(バージョン6.0)でcssファイルを使用するため、次の処理をしました。

1.次のコマンドで、動作確認用の新規アプリケーションの作成をする。

rails new css2 --webpack

2.次のコマンドで、コントローラの作成をする。

rails generate controller headtest2 index

3.「app/views/layouts/application.html.erb」を次のように変更する。

<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
		↓
<%= stylesheet_pack_tag 'application' %>

この修正がないと、Web画面で次のエラーが発生する。

We're sorry, but something went wrong.
If you are the application owner check the logs for more information.

4.「app/views/headtest2/index.html.erb」には、htmlの定義をする。

5.「app/assets/stylesheets/headtest2.css」には、cssの定義をする。

こうした後、サーバーを起動して、Web画面を表示すると、cssの表示がされせんでした。

皆さんにお聞きしますが、CSSの表示をするためには、どこが足りていないのでしょうか？

Answer 1

KTOHさん そして m.ts10806さん、ありがとうございます。

確かに情報が少なくてすみませんでした。

私は、rails（Ver6.0.0）でjavascriptのプロジェクトを作成しようとしていました。
初めに試したことは、
1.「app/views/hellojs2/index.html.erb」を次の通りとする。

<script> document.write("Hello, World(javascript)!"); </script>

こうした後、サーバーを起動すると、画面に「Hello, World(javascript)!」の表示がされました。
これが、私の思っていた通りのことです。

次にjsファイルを作成する方法を試してみようとしました。(これが上記とおなじです)
1.「app/views/hellojs2/index.html.erb」を次の通りとする。
<%= javascript_include_tag "hellojs2.js" %>

2.「app/views/hellojs2/index.html.erb」を次の通りとして保存する。
<%= javascript_include_tag "hellojs2.js" %>

3.「app/assets/javascripts」のパスを作成し、そのパスに「hellojs2.js」のファイルを次の通り作成する。
document.write("Hello, World(javascript)!");

ここまでの処理で、サーバーを起動すると、画面にエラーメッセージが表示されました。
ログを見ると、次のようなメッセージが表示されました。(画面エラーの内容もこれとほぼ同じ)

ActionView::Template::Error (Asset hellojs2.js was not declared to be precompiled in production.
Declare links to your assets in app/assets/config/manifest.js.

//= link hellojs2.js
and restart your server):
1: <%= javascript_include_tag "hellojs2.js" %>

app/views/hellojs2/index.html.erb:1
Started GET "/hellojs2/index" for 127.0.0.1 at 2019-11-14 11:05:35 +0900
 (0.3ms) SELECT sqlite_version(*)
Processing by Hellojs2Controller#index as HTML
Rendering hellojs2/index.html.erb within layouts/application
Rendered hellojs2/index.html.erb within layouts/application (Duration: 56.9ms | Allocations: 11512)
Completed 500 Internal Server Error in 80ms (ActiveRecord: 0.0ms | Allocations: 13445)

ここで、このメッセージにあるように次の修正をしました。

1.「app/assets/config/manifest.js」のファイルに次の行を追加する。
//= link hellojs2.js
(ワイルドカード(*)は使用できない)

こうした後、サーバーを起動すると、画面に「Hello, World(javascript)!」の表示がされました。
これが、私の思っていた通りのことです。

私が疑問に起こったことは、
「なぜくなったかの理由がはっきりしないし、HPには、この方法が記載されていない。」ということです。
だから、これでいいのか、という質問をしました。

尚、もう少し調べたところ、次のことがわかりました。
1.エラーの原因は、「プリコンパイルできていない」ということである。
2.プリコンパイルする方法として、次の方法もある。

「config/initializers/assets.rb」のファイルに次の行を追加する。
Rails.application.config.assets.precompile += %w( hellojs2.js )
(ワイルドカード(*)は使用できない)

こうした後、サーバーを起動すると、画面に「Hello, World(javascript)!」の表示がされました。
これが、私の思っていた通りのことです。

Comments

[Osat.Kaso]

自己回答するのを間違っていましたすみません

Answer 2

Railsに詳しいわけではないですが

皆さんにお聞きしますが、CSSの表示をするためには、どこが足りていないのでしょうか？

CSSを表示させるさせない以前に、前の質問と含めると色々と足りてないことが多すぎます。前提知識ですね。

• ドキュメントを読むこと

そもそも日本人が作者なのでドキュメントを読むのは苦ではないはず

• エラーを読むこと

エラーメッセージの読み方と対処, 検索や質問の原則
せっかく何が悪いか、改善点　を教えてくれるので読まないのは損をしている

• それぞれの概念をきちんと学ぶこと

「CSSを表示」など本来の役割に関係のない表現をしている。
CSSを例にとるとあくまで表示された画面を装飾するものであり、表示そのものではない

コードも手順をメインではなく実際の問題が起きているコードをメインとしたほうが見やすいですし、そのあたりの工夫とか。

まあひとまずエラーとドキュメント読むところから始めてください。