※非同期通信の手順をjQueryから全て確認したい方のまとめはこちら
#導入準備
パッケージ管理システムを使用してjQueryの導入をしていく。
今回使用するパッケージ管理システム（パッケージマネージャー）は「yarn」
インストールする。
% yarn install
#jQueryを導入
JavaScriptのライブラリの一つであるjQueryを導入
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'」を９行目に追加。
!!!
%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行目に記述する。
//= link_tree ../images
//= link_directory ../javascripts .js
//= link_directory ../stylesheets .css
これでJavaScriptが読み込まれているはず！
#JavaScriptが正常に読み込まれているか確認する
application.jsに以下の記述をする。
コンソールログで確認。
console.log("JavaScriptは正常に読み込まれています");
ページをリロードして、
コンソールに「JavaScriptは正常に読み込まれています」と出ればオッケー。
正常なのが確認できたら、先ほど記述した
application.jsの中の「console.log("JavaScriptは正常に読み込まれています");」を削除しておく。
#jQueryを使えるようにする
以下の2行をapplication.jsに追記。
jquery-railsという先ほど記載したgemを使うための記述。
//= require jquery
//= require rails-ujs
jQueryの読み込み・・・//= require jquery
RailsでJavaScriptを使用する・・・//= require rails-ujs
###備考
この後application.js直下にJavaScriptのファイルを作成して記述してく際は
application.jsが存在するディレクトリのJavaScriptファイルを全て読み込む必要が出てくるので「//= require_tree .」を最後に追加する
//= 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のファイル内に以下を記述する。
$(function(){
console.log("jQueryは正しく使えます")
});
記述できたら、
またページをリロードして「jQueryは正しく使えます」とコンソールに出ていれば正常に動いています。
確認できたらsample1.jsの中身は削除する。
このファイルを使用する際は名前を変えてつかう。
#Memo
jQueryを導入する際に、パッケージ管理システム「yarn」を使用しています。
hamlで記載しています。
パッケージ管理システムを利用しないとどのようになるのかまた調べたいです。
#最後にひとこと
非同期通信を実装するために、
JavaScriptを読み込み、jQueryを導入する必要がありました。
JavaScriptはjQueryというライブラリを使用することでコードがシンプルにかけます。
上記で書いたコードはjQueryがなければかなり長くなります。
ライブラリのことやそれぞれの単語が何なのか。
また、yarnのようなパッケージ管理システムが何をしてくれているのか理解したいので、
また調べて記事にできたらと思います。
この後、非同期通信を実装するためにAjaxというのに入っていくのですが
こうして導入単体の記事にしたのは他に応用できるのかもという期待からです。
この段階から別の実装ができるのかはまだわかっていないけど、
もっと他のこともやってみたいと思いました。
#関連リンク
非同期通信の流れをjQueryの導入から全て記載しているのはこちら