Ruby on Rails でjQueryを使用する方法

###前提・実現したいこと
rails上でjQueryを使用できるようにしたいのですが、どのファイルにどのように記述して良いのかわかりません。
railsのバージョンは、4.2.1ですので、デフォルトでGemfileに記述されインストールされるため、準備等は不要だと思っていたのですが...

app/assets/javascript 内に「home.js」のようなファイルを作成し、

javascript
1$(function(){
2  $(".test").fadeOut();
3}

のように記述しても何も起こりませんでした。

rails上でjQueryを使用するにはどうすれば良いのでしょうか？
わかりにくい質問だとは思いますが何か回答をいただけると助かります(_ _)

###追記
具体的にどのようなことをやっているかというと、
app/views/layouts/application.html.erb に、

html
1<!DOCTYPE html>
2<html>
3<head>
4  <title>TEST</title>
5  <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
6  <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
7  <%= csrf_meta_tags %>
8</head>
9<body>
10  <header class="navbar">
11    <div class="container">
12      <div class="test">
13        TEST
14      </div>
15    </div>
16  </header>
17  <div class="container-yield">
18    <%= yield %>
19  </div>
20  <footer>
21  </footer>
22</body>
23</html>

のように記述し、
app/assets/javascript 内に「home.js」を作成し、その中で、

javascript
1$(function(){
2  $(".test").fadeOut();
3}

のように記述しています。

以上のようにしてページを更新しても、特に何も起きません（エラーメッセージ等も表示されません）。

何か根本的な間違っているのかもしれませんが、回答を頂けるとるます(_ _)

maisumakun

2016/02/19 00:25

まず1つ試して欲しいのですが、目的とするページを開いたあとにリロードしたあとにはどんな挙動を示しますか？

tarotarosu

2016/02/19 12:49

回答ありがとうございます。リロードしても特に何も起きませんでした。（エラーメッセージ等も表示されません）

行動規範の内容に同意します

回答1件

app/assets/javascript/application.jsに下記の「コメント」を追記してみてください。

js
1// 
2//= require jquery 
3//= require jquery_ujs 
4//= require_tree .
5//= require_self 
6//

このコメントは他の.jsファイルを読み込むための記述です。
それぞれのコメントの意味としては

require jquery jQueryを読み込む
require jquery_ujs Rails 用の jQuery の機能を読み込む
require_tree . app/assets/javascripts以下の全てのjsを読み込む(ここでhome.jsが読み込まれます。)
require_self 自分自身=application.jsを読み込む

投稿2016/02/19 00:40

編集2016/02/19 00:42

退会済みユーザー

総合スコア0

tarotarosu

2016/02/19 12:56

回答ありがとうございます。回答にありますように、application.js内に記述してみたのですが、やはり何も起こりませんでした。エラーメッセージも表示されず、どこを修正して良いのか...

退会済みユーザー

2016/02/21 06:44 編集

では順番にどこまでが読み込まれて、どこで止まっているのかを調べると良いと思います。それを確認するためにapplication.js, home.js に下記のように記述してみてください。 ```application.js /* * // require文など */ // 設定をいじっていなければ必ず読まれているはず。 // これが読み込まれていなければRailsの設定がおかしくなっている。 console.log('application.jsが読み込まれたことを確認'); // ・・・① ``` ```home.js // ここも設定をいじっていなければ問題なく出力されるはず。 // ①が表示されていてここが表示されなければ、 // require文のタイポ(打ち間違い)などが考えられる。 console.log('home.jsが読み込まれたことを確認'); // ・・・② $(function(){ // ②が表示されているのに、ここが出力されない場合は // うまくjQueryが読み込まれていないことが考えられる。 console.log('jqueryのイベントが発火したことを確認'); // ・・・③ // 逆に①, ②, ③の全てがきちんと表示された場合は // $('.test').fadeOut();の記述が間違っている // おそらくクラス名のタイポではないでしょうか？ }); ``` 上記の実行結果次第では、不具合の原因が変わってきますので、ぜひ試してみて結果を書いていただけると

tarotarosu

2016/02/24 09:44

回答ありがとうございます。上記のように試してみたのですが、①の段階で表示されませんでした。 Railsの設定がおかしくなっているようです。特に設定をいじった記憶もないのですが...

行動規範の内容に同意します