Ruby on RailsでJavaScript/CSSファイルを読み込む方法を現役エンジニアが解説【初心者向け】
初心者向けにRuby on RailsでJavaScript/CSSファイルを読み込む方法について解説しています。Railsでフォルダが作成される場所やエラーが起きる主な原因と対処法を説明します。Railsの構成の基本を覚えましょう。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
Ruby on RailsでJavaScript/CSSファイルを読み込む方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。
そもそもRubyについてよく分からないという方は、Rubyとは何なのか解説した記事を読むとさらに理解が深まるでしょう。
なお本記事は、TechAcademyのオンラインブートキャンプRuby講座の内容をもとに紹介しています。
今回は、Rubyに関する内容だね！
どういう内容でしょうか？
Ruby on RailsでJavaScript/CSSファイルを読み込む方法について詳しく説明していくね！
お願いします！
目次
RailsでJavaScript/CSSファイルを読み込む方法
RailsでJacaScriptを読み込む場合を想定すると、Ruby on RailsにはもともとJacaScriptフォルダが存在しています。
Railsを読み込んだ際には、アプリ名の下にフォルダapp,bin,config,db,lib,log,public,test,tmp,vedorが自動作成されるでしょう。
appのフォルダの下には、config,images,javascripts,stylesheetsとさらに別のフォルダがあります。
JacaScriptフォルダの中に拡張子を「.js」としたファイルを作成し、記述によって読み込まれる仕組みです。
同様にcssを読み込ませたい場合は、stylesheetsフォルダの中に拡張子を「.scss」としてファイルを作成しましょう。
そのファイルに記述することで読み込まれるようになります。
Scssとはcssを記述しやすくしたもので、変数や入れ子構造が使えるなどcssと少し記述の仕方が変わる点に注意しましょう。
しかし、Railsではこのファイルにscssで記述をすることで、自動的にcssにコンパイルされます。
[PR] Rubyのプログラミングで挫折しない学習方法を動画で公開中
読み込みエラーの原因と解決法
エラーとなる原因は数多く考えられます。
JavaScriptファイルやCSSファイルの読み込みの際に発生するエラーとして多いのは、アセットのプリコンパイルができていない点です。
Railsには開発環境と本番環境があり、本番環境ではプリコンパイルをしましょう。
アセットパイプラインと呼ばれるフレームワークを使用して、JavaScriptやCSSのアセットを最小化し、素早く読み込まれるようにしていきます。
また、このフレームワークを使用してSCSSなどの高級言語をCSSに変換させたり、他の機能と連結できます。
JavaScriptファイルやCSSファイルを読み込ませる場合には、先程のconfigフォルダの下にあるinitializersフォルダの更に下にあるassets.rbを編集していきましょう。
(アプリ名/config/initializers/assets.rb)
# Be sure to restart your server when you modify this file.
# Version of your assets, change this if you want to expire all your assets.
Rails.application.config.assets.version = '1.0'
# Add additional assets to the asset load path.
# Rails.application.config.assets.paths << Emoji.images_path
# Add Yarn node_modules folder to the asset load path.
Rails.application.config.assets.paths << Rails.root.join('node_modules')
# Precompile additional assets.
# application.js, application.css, and all non-JS/CSS in the app/assets
# folder are already added.
# Rails.application.config.assets.precompile += %w( admin.js admin.css )
ファイルの中の一番下の行のコメントアウトを外し、編集しましょう。
Rails.application.config.assets.precompile += %w( admin.js admin.css )
adminとある記載のある部分は、読み込ませたいファイル名に変換をすることでプリコンパイルできるようになります。
執筆してくれたメンター
| 木村勇土
TechAcademyの現役メンター。 現在は行政書士事務所を運営しており、お客様にはプログラマーやフリーランサーも多い。 WordPressを中心とした自社のWebサイトの修正などを行なっている。 |
Ruby on RailsでJavaScript/CSSファイルを読み込む方法がよく分かったので良かったです！
ゆかりちゃん、これからも分からないことがあったら質問してね！
分かりました。ありがとうございます！
TechAcademyでは、初心者でもRuby on Railsを使ったプログラミングを習得できるオンラインブートキャンプRuby講座を開催しています。
挫折しない学習方法を知れる説明動画や現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。
プログラミングを独学で学習していて、このように感じた経験はないでしょうか？
- ・調べてもほしい情報が見つからない
- ・独学のスキルが実際の業務で通用するのか不安
- ・目標への学習プランがわからず、迷子になりそう
テックアカデミーでは、このような
学習に不安を抱えている方へ、マンツーマンで相談できる機会を無料で提供
しています。
30分間、オンラインでどんなことでも質問し放題です。
「受けてよかった」と感じていただけるよう
カウンセラーやエンジニア・デザイナー
があなたの相談に真摯に向き合います。
「自分に合っているか診断してほしい」
「漠然としているが話を聞いてみたい」
こんなささいな悩みでも大丈夫です。
無理な勧誘は一切ありません
ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）
