RailsでcssファイルとJavascriptファイルをマニフェストファイルから読み込む

Railsアプリケーションで、cssファイルやJavascriptファイルを自作する場合、マニフェストファイルの仕組みを使います。

すごい基本的なことですが、Railsの勉強を始めた当初はよく分からなかったので、メモっておきます。

CSSファイルとJavascriptファイルを作成する

RailsではCSSファイルは、/assets/stylesheets配下に配置します。同様にJavascriptファイルは/assets/javascripts配下に配置します。

例えば、common.css、common.jsというファイルを作成したとします。

マニフェストファイルを設定する

マニフェストファイルというのは、どのCSSファイルやJavascriptファイルを呼び出すかを記載したファイルのことです。

/layouts/application.html.erbを見てもらうと、Railsのデフォルトで、head内に下記のような記述があります。ここにどのマニフェストファイルに従うかが記述されています。

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

stylesheet_link_tagとjavascript_include_tagで、どちらもapplicationを指定していますので、application.cssとapplication.jsをマニフェストファイルとして指定していることになります。

マニフェストファイルは、/assets/stylesheets配下と/assets/javascripts配下にありますので、/assets/stylesheets/application.cssと/assets/javascripts/application.jsがマニフェストファイルということになります。

application.cssを見ると、デフォルトでは

 *= require_tree .
 *= require_self

といった記述がありますが、これは、同階層のすべてのファイル(= require_tree .)と自分自身(= require_self)を読み込むという内容です。

application.jsには下記のような記述がありますが、application.cssと同様に「require_tree .」という記述があるため、同階層のファイルが読み込まれます。

//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require_tree .

つまり、冒頭に作成したcommon.css、common.jsが読み込まれることになります。

テンプレートごとに読み込むCSS/JSファイルを変える

以上のようなマニフェストファイルの仕組みを利用すると、テンプレートごとに読み込むCSS/JSファイルを変えるには、テンプレートごとに呼び出すマニフェストファイルを設定することになります。

マニフェストファイルを複数運用する場合は、フォルダを分けて運用すると便利です。例えば、/assets/stylesheets/admin/というフォルダを作成し、その中に、マニフェストファイルを作成することで、require_tree .で、adminフォルダ内のCSSファイルが読み込まれます。

慣れれば便利なので、是非覚えてください。

Ruby on Railsをこれから本格的に勉強したい人は「エンジニアになるための600時間のプログラミング学習に耐え抜くコツ」という記事がおすすめです。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする