Railsでjava scriptやCSSファイルを使用する場合、一般的には2つの方法があるそうです。(どっちを使えばいいの?と思いますが、初学者にはまだわかりません、、、)
1. CDNからの読み込み
外部のライブラリやフレームワークを使用する場合、そのファイルをCDNから直接読み込むことができます。これにより、アプリケーションのレスポンスタイムが改善され、ライブラリのバージョン管理や更新が簡素化されます。
※「CDN」はContent Delivery Networkの略で、インターネット経由でファイルを配信する仕組みのことです。
例 jQueryやBootstrapを読み込む場合
<!DOCTYPE html>
<html>
<head>
<title>sample</title>
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
</body>
</html>
2. アセットパイプラインを使用したローカルのファイル
アプリケーションで独自のコードを使用する場合、アセットパイプラインを介してローカルに保存したファイルを読み込むことができます。この場合、ファイルはapp/assets/javascriptsやapp/assets/stylesheetsディレクトリ内に配置されます。
そもそもアセットパイプラインて何、、、?って感じですよね。
アセットパイプラインについての解説(Railsガイド)
アセットパイプラインについてのわかりやすい解説記事
例 jQueryやBootstrapを読み込む場合
-
app/assets/stylesheetsにapplication.scssを作成します。application.scssに以下のように記述します
// Bootstrapのインポート @import "bootstrap";
- app/assets/javascripts/application.jsファイルに以下のように記述します
//= require jquery3 //= require bootstrap-sprockets
- RailsアプリケーションのレイアウトファイルでBootstrapのCSSとJavaScriptを使用するために、以下のように記述します
<!DOCTYPE html> <html> <head> <title>sample</title> <%= stylesheet_link_tag 'application' %> <%= javascript_include_tag 'application' %> </head> <body> </body> </html>