RailsでJavaScriptが読み込まれない時の対処方法を現役エンジニアが解説【初心者向け】

初心者向けにRailsでJavaScriptが読み込まれない時の対処方法について現役エンジニアが解説しています。RailsのJavaScript読み込みの設定を確認します。RailsでJavaScriptが読み込まれない原因や対処法として、ファイルの記載方法、値の指定方法、ファイル名や読み込みの順番を解説します。

TechAcademyマガジンは受講者数No.1のオンラインプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。

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配下のファイルが対象となっているためです。これ以外の場所やファイルを指定したい場合に有効化して指定します。

[PR] JavaScript・jQueryで挫折しない学習方法を動画で公開中

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ファイルの確認をし、不要であれば削除しましょう。

 

まとめ

基本的にRailsの構成に従っていれば、JavaScriptが読み込まれないことは滅多にないかと思います。

しかし、jQueryなどを追加したり、プロジェクトの方針でフォルダ構成を検討しないといけない場合などは、今回の記事をもとに確認してみてください。

筆者プロフィール

小宮山晃史(こみやまこうじ)

現在はOracle系システムの導入コンサルに勤め、仕事でコーディングをする機会は少なくなくなっているが、ライフワークで数多くの言語を勉強中。

iphoneのアプリ開発やWEBサーバの構築など幅広く挑戦しています。

 

大石ゆかり

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

田島悠介

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

大石ゆかり

分かりました。ありがとうございます!

 

TechAcademyでは、初心者でも最短4週間で、JavaScript・jQueryを使ったWebサービス公開を習得できる、オンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。