Fin_IT

FinanceとITに関する記事をメインに。

RailsでjQueryが機能する仕組み

IT

本記事ではRails newで作成したアプリ中にて
jQueryを機能させる方法およびその仕組みについて以下の題目にてお話を進めたいと思います
・jQueryの使い方
・jQuery機能するまでの流れ

・jQueryの使い方
今回jQueryの対象とするファイル内容は以下の通りです
app/views/home/index.html.erb

<div id="test">
    Hello World
</div>

ブラウザ上
f:id:stock_study:20200328170823p:plain
jQueryを使いたい方は結論から申し上げますと
app/assets/javascript/application.js (デフォルトで存在）
もしくは
app/assets/javascript/~~~.js（自作する)
中のどちらかに記述しましょう
今回は自作したapp/assets/javascript/test.js
にて以下のコードを記述しました

$(document).ready(function() {
$("p").text("Hello jQuery");
});

これで以下のようにjQueryが反映されました
f:id:stock_study:20200328194707p:plain

以下ではなぜファイル指定等もしていないのに機能しているのかについてお話ししたいと思います
・Rails中でjQueryが機能するまでの流れ
流れを理解するためには下記2点の理解が必要になります
viewが表示される仕組み
application.jsの役割
個々について詳細に説明していきます


viewが表示される仕組みrailsでは全てのviewファイルは、app/views/layouts/application.html.erb 中の 

 <%= yield %>

に組み込まれます

app/views/layouts/application.html.erb　の全容は以下の通りです

<!DOCTYPE html>
<html>
  <head>
    <title>SampleApp</title>
    <%= csrf_meta_tags %>

    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
  </head>

  <body>
    <%= yield %>
  </body>
</html>

ですので本記事のapp/views/home/index.html.erb　にて作成したviewファイルは

<div id="test">
    Hello World
</div>

ですが実際には下記のようなファイルとしてブラウザ上で読み取られます

<!DOCTYPE html>
<html>
  <head>
    <title>SampleApp</title>
    <%= csrf_meta_tags %>

    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
  </head>

  <body>
<div id="test">
    Hello World
</div>
  </body>
</html>

これを見るとjavascriptのリンク先が以下のように記述されていることが分かります

  <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>

このコードによってjavascriptはapplication.jsにて書いているという指定をしています
それではapplication.jsとはどのようなファイルなのでしょうか？


application.jsの役割
applicaton.jsファイルはrails new にてアプリの作成を行った際にデフォルトで作成されます
ファイル内容は以下の通り
app/assets/javascripts/application.js

// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.

// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
// or any plugin's vendor/assets/javascripts directory can be referenced here using a relative path.

// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file. JavaScript code in this file should be added after the last require_* statement.

// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
// about supported directives.

// = require jquery
// = require jquery_ujs
// = require turbolinks
// = require_tree .

ファイルの上部はこのファイルについての説明書きで大事なのは以下の4文のみです

// = require jquery
// = require jquery_ujs
// = require turbolinks
// = require_tree .

この4文はコメントアウト化されているように見えますが、これはdirectiveと呼ばれ、Ruby on Railsがapp/assets を管理する際に用いられる記法です。
それぞれの意味についてですが

// = require jquery

はjQueryのライブラリを読み込む為のコードで

// = require jquery_ujs

はrailsでjQueryの機能を動作させるためのライブラリを読み込む為のコードで

// = require turbolinks

は、今回は関係ないのですがページ遷移の際の高速化を実現する機能動作させるためのライブラリを読み込む為のコードで

// = require_tree .

はrequire_tree 以下のフォルダ配下のファイルを全て読み込むためのコードです
今回であれば　.(カレントディレクトリ）が用いられている為　app/assets/javascript/　配下にあるapp/assets/javascript/test.js　も読み込まれるため機能が実行されました


以上がRailsでjQueryが機能する仕組みです
参考になれば幸いです

Twitterにても情報発信を行っているので良ければフォローの方お待ちしております