※非同期通信の手順をjQueryから全て確認したい方のまとめはこちら

導入準備

パッケージ管理システムを使用してjQueryの導入をしていく。
今回使用するパッケージ管理システム（パッケージマネージャー）は「yarn」
インストールする。

ターミナル

% yarn install

jQueryを導入

JavaScriptのライブラリの一つであるjQueryを導入
　

Gemfileの中に記述する。

Gemfile

gem 'jquery-rails'
# 最後尾に記入する

gemを記述したら忘れずバンドルインストールをする。

ターミナル

% bundle install

gemを反映させたらサーバを再起動する。
　

JavaScriptを読み込む準備

JavaScriptを記述するディレクトリを作成

assetsフォルダの中に「javascripts」という名前のファイルを作成する

app
　　 assets
　　　　 config
　　　　 images
　　　　 javascripts
　　　　 stylesheets

JavaScriptを記述するファイルを作成

javascriptsフォルダの中にapplication.jsを作成する

app
　　 assets
　　　　 config
　　　　 images
　　　　 javascripts
　　　　　　application.js
　　　　 stylesheets

JavaScriptを読み込む

JavaScriptのファイルをビューファイルから呼び出してあげる必要がある。
cssと同じ容量。
「= javascript_include_tag 'application'」を９行目に追加。

app/views/layouts/application.html.haml

!!!
%html
  %head
    %meta{:content => "text/html; charset=UTF-8", "http-equiv" => "Content-Type"}/
    %title Sample app
    = csrf_meta_tags
    = csp_meta_tag
    = stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload'
    = javascript_include_tag 'application'
    -# = javascript_pack_tag 'application', 'data-turbolinks-track': 'reload'
    -# 上の行はWebpackerという技術に関する記述。不要なら削除。
  %body
    = yield

application.jsのファイルを呼び出せるようにする。

「//= link_directory ../javascripts .js」を2行目に記述する。

app/assets/config/manifest.js

//= link_tree ../images
//= link_directory ../javascripts .js
//= link_directory ../stylesheets .css

これでJavaScriptが読み込まれているはず！
　

JavaScriptが正常に読み込まれているか確認する

application.jsに以下の記述をする。
コンソールログで確認。

app/assets/javascripts/application.js

console.log("JavaScriptは正常に読み込まれています");

ページをリロードして、
コンソールに「JavaScriptは正常に読み込まれています」と出ればオッケー。

正常なのが確認できたら、先ほど記述した
application.jsの中の「console.log("JavaScriptは正常に読み込まれています");」を削除しておく。
　

jQueryを使えるようにする

以下の2行をapplication.jsに追記。
jquery-railsという先ほど記載したgemを使うための記述。

app/assets/javascripts/application.js

//= require jquery
//= require rails-ujs

jQueryの読み込み・・・//= require jquery
RailsでJavaScriptを使用する・・・//= require rails-ujs

備考

この後application.js直下にJavaScriptのファイルを作成して記述してく際は
application.jsが存在するディレクトリのJavaScriptファイルを全て読み込む必要が出てくるので「//= require_tree .」を最後に追加する

app/assets/javascripts/application.js

//= require jquery
//= require rails-ujs
//= require_tree .

例えば sample1.js sample2.js sample3.jsというJavaScriptのファイルを
application.js直下に作成すれば
先ほどの記述で全て読み込んでくれるということです。

app
　　 assets
　　　　 config
　　　　 images
　　　　 javascripts
　　　　　　 application.js
　　　　　　 sample1.js
　　　　　　 sample2.js
　　　　　　 sample3.js
　　　　 stylesheets

jQueryが動くか確認する

動作テスト用に先ほどの例のようにapplication.jsの直下に
sample1.jsのみ実際にファイルを作成する。
次作成するファイル名が決まっていればその名前でも大丈夫。

sample1.jsのファイル内に以下を記述する。

app/assets/javascripts/sample1.js

$(function(){
  console.log("jQueryは正しく使えます")
});

記述できたら、
またページをリロードして「jQueryは正しく使えます」とコンソールに出ていれば正常に動いています。

確認できたらsample1.jsの中身は削除する。
このファイルを使用する際は名前を変えてつかう。

Memo

jQueryを導入する際に、パッケージ管理システム「yarn」を使用しています。
hamlで記載しています。

パッケージ管理システムを利用しないとどのようになるのかまた調べたいです。

最後にひとこと

非同期通信を実装するために、
JavaScriptを読み込み、jQueryを導入する必要がありました。
JavaScriptはjQueryというライブラリを使用することでコードがシンプルにかけます。
上記で書いたコードはjQueryがなければかなり長くなります。

ライブラリのことやそれぞれの単語が何なのか。
また、yarnのようなパッケージ管理システムが何をしてくれているのか理解したいので、
また調べて記事にできたらと思います。

この後、非同期通信を実装するためにAjaxというのに入っていくのですが
こうして導入単体の記事にしたのは他に応用できるのかもという期待からです。
この段階から別の実装ができるのかはまだわかっていないけど、
もっと他のこともやってみたいと思いました。

関連リンク

非同期通信の流れをjQueryの導入から全て記載しているのはこちら