Rails Diary

プログラミングの学習記録です。

AdminLTEとマニフェストファイルの読み込みについて

マニフェストファイル アセットパイプライン AdminLTE

マニフェストファイルとは

どのファイルを読み込むのか取りまとめたファイルのこと。

  • HTMLでは、そのページで必要となる読み込みファイルを<head></head>内で読み込んでいる。
  • CSSファイル、JSファイルはそれぞれ
    stylesheet_link_tag、
    javascrippt_includee_tag
    というヘルパーメソッドを用いて読み込みファイルを読み込む

↓こんな感じ

<!-- ファイルの拡張子は省略可 -->
<!-- stylesheetはhead内で読み込んでいた -->
<%= stylesheet_link_tag ‘application’, media: ‘all’ %>


<!-- JSファイルはbody内の下部辺りで読み込まれていた -->
<%= javascript_include_tag ‘application’ %>

↑に記載の通り、layout/application.html.erbの<head></head>内でデフォルトで読み込んでいるのは　application.cssとapplication.jsという２種類

２種類のファイル内にはそれぞれ以下の記載がされている。

application.css

＊= require_self (自分自身を読み込む)
＊= require_tree . (同階層に存在している全てのファイルを読み込む)

↓拡張子をscssに置き換えた場合は@import "○○";のように記載する

@import "bootstrap";
@import "tasks";

application.js

//= require_tree .

「//=」で始まる行は、アセットパイプラインに指示を伝えるための行

アセットパイプラインって何だっけ？😕

JavaScriptやCSS、画像などのリソース（アセットと呼ぶ）を効率的に扱う仕組みのこと。sprockets-rails gemによって提供されるSprocketsの機能、デフォルトで有効になっている。スプロケットは自転車のチェーンを送る歯車のことを言うらしい。

ある一つのパイプライン処理に通すことで、難しい言語を分かりやすくしたり、ファイルを連結したり、改行・コメントアウト・スペースを消して通信量を節約したり、ファイルを最適化してくれる処理のこと。（正確な説明ではないと思われ）

読み込みファイルを読み込む流れ（まとめ）

  1. <head>や<body>に記載されたapplication.css/application.jsの読み込み

  2. application.css/application.js各ファイル内でどのファイルを読み込むか取りまとめる (初期段階では同階層全てのファイルと自身を読み込むように定義されている)

という流れを経て、必要なファイルが読み込まれている。 このapplication.css/application.jsのように、どのファイルを読み込むのかを取りまとめたファイルをマニフェストファイルと呼ぶ。

どうやって見た目を作っていくのか

yarnでAdminLTEをインストール後、node_modules配下にadmin_lte/というディレクトリが作成されるので、この中から必要な箇所をマニフェストファイルに記載して読み込みたい。

コピペしたとしても、マニフェストファイルからの読み込み設定がされていなければビューに反映されないので、確認しつつができなくて困った。

どうすべきだったのか

admin_lte/ディレクトリ配下にあるテンプレートをブラウザで表示させ、検証を用いて<head>や<body>内にどのような記載がされているのか確認する。

例えば、今回指定の管理画面はAdminLTEのstarter.htmlが完成形だったため、そのまま参考にすれば良いだけの話だった。（とはいえ、それを自力で発想できる気はしなかった。。）

https://adminlte.io/themes/v3/starter.html
↑つまり、このサンプルHTMLで使用されているJavaScriptとCSSと同じものを適用させれば、自作の管理画面もサンプルと同じような挙動をしてくれる。

AdminLTE3のインストール

俺たちは雰囲気でAdminLTEを使っている - Qiita

AdminLTE（Bootstrapベースで作られたCSSフレームワーク）という公開ライブラリを使用して、管理画面用のCSSやJavascriptを適用する。

yarn add admin-lte@^3.0

Introduction | AdminLTE 3 Documentation
↑他にもgit cloneやnpm,composerなどの読み込み方法がある。

★上記のコマンドを使用後、git statusに表示されているファイルがpackege.jsonとyarn.lockだけだったため、node_modulesが作られていることに気が付かなかった。.gitignoreの中にnode_modulesの記載があったので、自動的にgitで追跡しない設定にされているっぽい🤔

このnode_modules内にテンプレートが記載されている。コピペして作りたいビューを作成する、とのこと。

★ポイント★

AdminLTEにstarter.htmlのサンプルが用意されているので、検証でHTMLの情報を確認し、何が読み込まれているのか参考にする。

ここは元々ヒントがあったものの、どういう意味なのか理解することができなかった。。

AdminLTE 3 | Starter

【検証】
https://i.gyazo.com/19ce62f3b01cba115370556f06fec8f0.png

AdminLTEはインストールしただけではブラウザでCSS・JSを読み込むことはできないので、上記を参考にマニフェストファイルに読み込みたいファイルを記載して使用する。

JavaScriptは<body>内にREQUIRED SCRIPTSというまとまりで定義されている

f:id:okmt_Aya_26:20220306220635p:plain
↑自分で調べた画面は<!-- REQUIRED SCRIPTD -->というコメントアウトが記載されていなくて探すのに物凄く時間がかかってしまったけど、シンプルにscriptを探せば良かった。

<script src="plugins/jquery/jquery.min.js"></script>
<script src="plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="dist/js/adminlte.min.js?v=3.2.0"></script>
マニフェストファイルでの読み込み方

app/assets/javascript/admin.jsに

//= require admin-lte/dist/js/adminlte.min

のように記載することで下記のファイルを読み込んでいる。JSのマニフェストファイルなので.js拡張子は省略可能

https://i.gyazo.com/8e219cc2f79b1c999fe31f85ccdf4657.png

CSSは<head>内に読み込んでいる記載がある

https://i.gyazo.com/54913049c67dedbdddd0a49b06c72ace.png

app/assets/stylesheets/admin.scss

@import 'admin-lte/dist/css/admin.min';

読み込む際にnode_modules/から記載しなくて良い理由

なぜnode_modules/配下のファイルなのに、記載が要らないのか

自分はここに疑問すら持たなかった（苦笑）

Rails.application.config.assets.pathsという設定が関係している。RailsコンソールでRails.application.config.assets.pathsとコマンド入力してみると、大量にパスが出現する。その中にnode_modulesの設定もあるので

#<Pathname:/Users/user_name/workspace/runteq/rails_2/5118_user_name_runteq_curriculum_normal/node_modules>

これらの出力されたパスの先頭から順に検索していくらしい？？

config/initializers/assets.rb内の

Rails.application.config.assets.paths << Rails.root.join('node_modules')

という記載でパスが追加されているそうな。

//= require_tree .の記載について

app/assets/javascripts/application.jsで//= require_tree .の記載を消す

require_treeの特徴

  • 指定したディレクトリ以下の全てのJSファイルを読み込む
    →require_tree .では.(ドット)が指定されているので同じ階層以下の全てのJSファイルを読み込んでいる

  • 読み込む順序を指定できないので、利用しているJSファイルが特定の読み込み順に依存している場合に不都合が生じる

f:id:okmt_Aya_26:20220307181033p:plain
↑
app/assets/javascripts/application.jsと同じ階層に、
app/assets/javascripts/admin.jsを作っている

app/assets/javascripts/application.jsでrequire_tree .してしまうと、
app/assets/javascripts/application.jsでapp/assets/javascripts/admin.jsを読み込んでしまう。

つまり？

admin系は管理画面でしか使わないのに、共通のapplication.jsで読み込んでしまうのはよろしくないので、require_tree .を使わず、必要なファイルを個別に必要な順序で読み込む。

感想

今回の課題、何をすべきかは分かっていた気がするけど、どうすべきかが全く分からなかった。課題自体も進めている内に何をしたら良いか段々と分からなってきてかなり大変だった。Sorcery並みに大パニックだった...笑