RailsでJavaScriptが読み込まれない時の対処方法を現役エンジニアが解説【初心者向け】
初心者向けにRailsでJavaScriptが読み込まれない時の対処方法について現役エンジニアが解説しています。RailsのJavaScript読み込みの設定を確認します。RailsでJavaScriptが読み込まれない原因や対処法として、ファイルの記載方法、値の指定方法、ファイル名や読み込みの順番を解説します。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元:GMOリサーチ株式会社 調査期間:2021年8月12日~8月16日 調査対象:2020年8月以降にプログラミングスクールを受講した18~80歳の男女1,000名 調査手法:インターネット調査
RailsでJavaScriptが読み込まれない時の対処方法について、TechAcademyのメンター(現役エンジニア)が実際のコードを使って初心者向けに解説します。
JavaScriptについてそもそもよく分からないという方は、JavaScriptとは何なのか解説した記事をまずご覧ください。
なお本記事は、TechAcademyのオンラインブートキャンプ、JavaScript/jQuery講座の内容をもとにしています。

今回は、JavaScriptに関する内容だね!

どういう内容でしょうか?

RailsでJavaScriptが読み込まれない時の対処方法について詳しく説明していくね!

お願いします!
目次
RailsでJavaScriptを読み込む方法
まず、普通にRailsをインストールしてアプリケーションを作成すれば、JavaScriptを読み込むことが出来るようになります。その為、あまりその仕組みを意識することはないと思います。
では、すこしその仕組み(設定場所)を確認してみたいと思います。
まず、「/app/views/application.html.erb」の”head”の位置に
<%= javascript_include_tag 'application' %>
と記載され、JavaScriptを自動的に読み込むように設定されています。上記の場合、「/app/javascripts/application.js」を読み込む設定です。「/app/javascripts/application.js」ないでは
//= require_tree .
と記載され、Rails配下のJavaScriptを自動で読込み出来るように設定されています。または、
//= require jquery
の様に個別の読込みの設定も出来ます。最後に、JavaScriptをRailsを扱えるように「/config/initializers/assets.rb」内に
# Rails.application.config.assets.precompile += %w( admin.js admin.css )
と記載されているのですが、コメントアウトされています。これは、デフォルトでapplication.js、application.css、app/assets配下のファイルが対象となっているためです。これ以外の場所やファイルを指定したい場合に有効化して指定します。
JavaScriptが読み込まれない時の主な原因
仕組みが分かったところで、JavaScriptが読み込まれない原因を見てみると
- *.html.erbのJavaScript読込の指定で”javascript_include_tag”と記載されていない
- /app/javascripts/application.jsの記載で「//= require_tree .」,「//= require jquery」(個別)の記載が誤っている
- 個別のJSを利用する際に、/config/initializers/assets.rbの「assets.precompile」の指定を行ていない
また、それ以外によくあるのが「同名のcoffeeファイルが存在する」というものです。RailsではJavaScriptのかわりにcoffeeScriptがデフォルトで使用できるのですが、同名のjsファイルがある場合はcoffeeファイルが優先せれ、jsファイルが読み込まれません
JavaScriptが読み込まれない時の主な対処方法
それぞれの対応方法について考えていきます
“javascript_include_tag”
Railsデフォルトの設定でJavaScriptを利用する場合は、良いのですがオリジナルのディレクトリ構成など利用数場合は、HTMLないでJSファイルを指定する必要があります。
例えば「/app/assets/javascripts/test/test1.js.erb」を読み込みたい場合は、
<%= javascript_include_tag 'test/test1' %>
と書きます。
「application.js」の記載
Railsのデフォルト構成内にJSファイルを配置する場合は、
//= require_tree .
特定のライブラリーを追加した場合は
//= require jquery
の記載を確認して、ない場合は追記します。
「assets.precompile」の記載
特定のJSファイルをインクルードしたい場合は
Rails.application.config.assets.precompile += %w( original.js )
と記載をします。
coffeeファイルが存在する
今までのは、大抵がオリジナルの構成やJSファイルを追加した時の対応になるのですが、デフォルトで作業しているにも関わらず、うまく読込が出来な場合は、coffeeファイルの確認をし、不要であれば削除しましょう。
実は私も!?独学で損する人の特徴
「スクールは高いから独学で成功する」という気持ちの方は多いと思います。
もちろんその方が金額は低く抑えられるでしょう。
ただ
独学には向き不向きがあり、実はスクールが向いている人も大勢います。
そんな方のために参考として、
テックアカデミー卒業生がスクールを選んだ理由
をご紹介します。
- ・困って挫折しそうなときに、質問や相談できる相手がいる環境で学んでいきたいなと思った
- ・わかった気になっているだけだったので、自分を追い込む環境に置いた方がいいと感じた
- ・スクールのカリキュラムで市場に求められるスキルを学ぶべきと思った

少しでも当てはまる部分があれば、
スクールが向いているかもしれません。
お試しのつもりで、まずは一度
無料相談
に参加してみませんか?
現役エンジニア・デザイナーに何でも気軽に相談できる30分
を
すべて無料で
できます。
無理な勧誘は一切ない
ので、お気軽にご参加ください。
まとめ
基本的にRailsの構成に従っていれば、JavaScriptが読み込まれないことは滅多にないかと思います。
しかし、jQueryなどを追加したり、プロジェクトの方針でフォルダ構成を検討しないといけない場合などは、今回の記事をもとに確認してみてください。
筆者プロフィール
小宮山晃史(こみやまこうじ)
現在はOracle系システムの導入コンサルに勤め、仕事でコーディングをする機会は少なくなくなっているが、ライフワークで数多くの言語を勉強中。 iphoneのアプリ開発やWEBサーバの構築など幅広く挑戦しています。 |

内容分かりやすくて良かったです!

ゆかりちゃんも分からないことがあったら質問してね!

分かりました。ありがとうございます!
TechAcademyでは、初心者でも、JavaScript・jQueryを使ったWebサービス公開を習得できる、オンラインブートキャンプを開催しています。
また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。

プログラミングを独学していて、このように感じた経験はないでしょうか?
- ・調べてもほしい情報が見つからない
- ・独学のスキルが実際の業務で通用するのか不安
- ・目標への学習プランがわからず、迷子になりそう
テックアカデミーでは、このような
学習に不安を抱えている方へ、現役エンジニア講師とマンツーマンで相談できる機会を無料で提供
しています。
30分間、オンラインでどんなことでも質問し放題です。
「受けてよかった」と感じていただけるよう
厳しい試験を通過した講師
があなたの相談に真摯に向き合います。
「ただ気になることを相談したい」
「漠然としているがプロの話を聞いてみたい」
こんな気持ちでも大丈夫です。
無理な勧誘は一切ありません
ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。(1週間限定)