1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

railsでjava scriptやcssを使用するには?

Posted at

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>
    
1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?