【Rails入門説明書】 jQueryの導入方法について解説

2024.01.29
「Rails」入門の説明書

はじめに

Railsアプリケーションのユーザーインターフェイスで、ユーザーの操作(マウスやカーソルの動き)に合わせて画面が反応するなどのインタラクティブなものも多数あります。

そういったUI上の動きについては、JavaScriptが大きく貢献しています。

しかし、慣れていない人にとって、JavaScriptは少し癖のあるプログラムで分かりにくいかもしれません。

そんなときに役に立つのが、HTMLの構造から直感的にJavaScriptを利用できるjQueryです。

ただし、デフォルトではRailsにjQueryは導入されていませんので、ここでは導入方法から説明します。

また、後半では、jQueryを扱うためのセレクタやメソッド、イベントと呼ばれるものを消化していますので、jQuery初心者も、少し慣れている人も、ぜひ一読ください。

jQueryとは

冒頭でも説明したとおり、jQueryというのは、JavaScriptでのプログラムを直感的にできるようにしてくれるものです。

jQueryを使えば、HTML上のタグに対して、どんな動きを付与するのか、どんな条件で変化させるのか、などを容易にプログラムすることができるようになります。

例えば、「test」というクラス属性を持っているdivタグを青くするという動きをさせるとしましょう。

JavaScriptでは次のようになります。

<script type=”text/javascript”> var targets = document.getElementsByTagName(“div”); for(i=0; targets.length; i++){ if(targets[i].className === “test”){ target.style.color = “blue”; } } </script>

しかし、jQueryを使えば、たった1行です。

$(“p.test”).css( “color”, “blue” );

ここまで違うと、JavaScriptを使うのが、ちょっと面倒になるかもしれません。

「Query」で検索してきた方へ

本記事は、上述のようにJavaScriptのコードを平易にするjQueryの解説記事です。

もし、「Query」という文言で検索されてきたのであれば、意味合いが違いますので、ご注意ください。

Query(クエリ)は、データベースの操作に使われる命令のことで、代表的なものとしてSQLがあります。

また、Railsの場合は、ActiveRecordのクエリメソッド(whereメソッドやjoinsメソッドなど)を示すこともあります。(クエリメソッドからSQLを生成してデータベースへアクセスしています)

そのため、jQueryが知りたいのであれば、「【Rails入門説明書】joinsについて解説」を参照してみてください!

非公開: コツコツ独学×スクールで実践。未経験からエンジニアに転職!【WebCamp卒業生インタビュー】

jQueryを導入する

では、さっそくjQueryを導入してみましょう。

導入そのものは、以下の手順を進めるだけですので、難しくありません。

環境構築

まずは、jQueryを導入するRails環境を構築します。すでに環境がある人は飛ばしてください。

[bash] rails new jquery_test cd jquery_test rails generate scaffold Item title:string price:integer rake db:migrate rails c Item.create(title:”book”, price:2500) Item.create(title:”note”, price:100) Item.create(title:”pen”, price:500) exit [/bash]

「localhost:3000/items」にアクセスして、以下の画面が表示されれば、環境構築完了です。

Gemfileの確認

まずはGemfileの内容を確認してください。

そして、以下の記載がなければ、追加していただく必要があります。

gem ‘jquery-rails’

gemの追加(jQueryのインストール)

Gemfileに追記した場合は、インストールのため、コマンドプロンプトで以下のコマンドを実行します。
※追記していなければ、不要です。

[bash] bundle install
[/bash]

最終的に「Bundle complete!」で始まる文章が表示されれば、インストール完了です。

jQueryを有効にする

最後に、JavaScriptにjQueryのライブラリを読み込ませるように、設定ファイルに追記して、jQueryを有効にします。

JavaScriptの設定ファイルは「app/assets/javascripts/application.js」ですので、「//= require jquery」という1行を追加してください。
(app/assets/javascripts/application.js)

: // about supported directives. // // ↓を追加 //= require jquery //= require rails-ujs //= require activestorage //= require turbolinks //= require_tree .

これで、jQueryを使用する準備は完了です。

jQueryを使ってみる

では、簡単ですがjQueryを使ってみましょう。

お試し版で簡単な動作確認を行った後、あるべき場所に実装します。

お試し版

jQueryはViewファイルに実装するのが、もっとも簡単です。

ここでは、「app/views/items/index.html.erb」に追加しましょう。

以下のjQueryのコードを、index.html.erbの末尾に追加してください。

<script type=”text/javascript”> $(“h1”).css(“color”, “red”); </script>

これは、h1タグの文字色を赤(red)に設定するjQueryのプログラムです。

ブラウザで読み込み直して、以下のようにタイトルが赤文字になっていれば、jQueryが正しく動作しています。

なお、一般的に、jQueryのプログラムコードはヘッダなどに記載されることが多いです。しかし、そうなると、Webサイトの本体が読み込まれる前にjQueryのプログラムコードが実行されてしまいます。
※HTMLは上から順に解釈されてページが作られていくため

そのため、ファイルの先頭やヘッダなど、操作したいタグよりも上にjQueryを設置したい場合は、以下のように「$(document).ready」(もしくは省略形の$())を使用して、読み込まれるのを待ってから動作するような仕組みを入れます

※以下は同じ意味です。

<script type=”text/javascript”> $(document).ready(function() { $(“h1”).css(“color”, “red”); }); </script>

<script type=”text/javascript”> $(function() { $(“h1”).css(“color”, “red”); }); </script>

本来は別ファイルで

ここからは、少し実践に即した形でjQueryを使っていきましょう。

プログラムを作るときには、「変更したときに何カ所も同時に変更しなければいけないようなプログラムにしてはいけない(DRY:Don’t Repeat Yourself)」のは、当然です。

しかし、それ以外にも、メンテナンス性(メンテナンスのしやすさ)や可読性(プログラムの読みやすさ)も考慮しておかなければ、不具合が多く、かつ原因が見つけにくいプログラムになってしまうでしょう。

じつは、前項で行ったViewファイルに直接jQueryのプログラムコードを埋め込む方法は、DRYもメンテナンス性も可読性も破ってしまうため、あまりおすすめできない手法と言えます。

そのため、jQueryのプログラムコードは別のファイルに記載しておくのが一般的です。

では、前述のjQueryのプログラムを別のファイルに記載する方法に変更してみましょう。

まず、jQueryのプログラムコードを保存するファイルを作成します。

JavaScriptのプログラムコードは、環境構築の最後でアクセスした「app/assets/javascripts/」に保存されています。

jQueryのプログラムコードを記載するファイルも、同じ場所に作成します。そして、ファイルの拡張子は、「.js」です。

では、「test.js」というファイルを作成しましょう。そして、先ほどViewファイルに追加したプログラムコードを記載して保存してください。
(app/assets/javascripts/test.js)

$(function() { $(“h1”).css(“color”, “green”); });

※分かりやすくするため、ここでは色を「green」に変更しています

このファイルに記載するプログラムコードは、タグが不要です。ファイルそのものがJavaScriptであることを表しているので、必要ないと考えて差し支えありません。

また、自動で読み込まれるため、意図的に読み込まれる箇所を指定できませんので、「$(document).ready」(もしくは省略形の$())を使っておきましょう。

先ほどViewファイルに追記したjQueryのプログラムコードを削除して、改めて「localhost:3000/items」にアクセスしてみましょう。

なお、環境構築の最後に追記したファイル「app/assets/javascripts/application.js」の最終行にある「//= require_tree .」が「app/assets/javascripts/」配下の「.js」ファイルを読み込む処理になります。そのため、別ファイルのjQueryのプログラムコードが、Viewファイルに適用されるのです。

また、jQueryのプログラムを別ファイルにしている場合、Viewファイルを指定していませんので、他のページのh1タグでも適用されます。例えば、「localhost:3000/items/new」にアクセスしてみると、以下のようになります。

turbolinksの弊害

ただし、ここで「Back」をクリックして一覧画面に戻ると、タイトルは黒文字に戻っています。

これは、「turbolinks」という高速化の仕組みによる弊害です。

turbolinksは、ヘッダなどの基本的には変更されることが少ない部分の再読込を抑止して、画面遷移などを高速化する効果があります。

そして、じつは、JavaScriptも再読込を抑止される対象になってしまっているのです。そのため、最初のアクセスのときだけ動作し、その後は再読込されない(処理が行われない)ため、リンクをクリックした画面遷移では、jQueryが適用されていないわけです。

じつは、Railsでは、このturbolinksがデフォルトで設定されています。
(app/assets/javascripts/application.js)

: //= require jquery //= require rails-ujs //= require activestorage //= require turbolinks //= require_tree .

上記の「//= require turbolinks」を削除すれば、「Back」や「New Item」などをクリックしても、jQueryが動くようになります。

非公開: 未経験から上京し、エンジニアとしてチームラボグループに転職!【WebCampPro卒業生インタビュー】

jQueryリファレンス

ここからは、jQueryを使用するに当たっての基本的な情報を集めました。すぐに憶える必要はありませんが、必要なときに参考になりましたら幸いです。

jQueryの基本構文

jQueryでの変数は、#を利用します。

・pタグを変数に格納して使用する場合

var #ptag = $(“p”); $ptag.css(“color”, “red”);

上記の$はjQueryの処理であることを示しており、次のように、「$」の代わりに「jQuery」と記載しても同じ意味になります。

var #ptag = jQuery(“p”);

また、イベント(マウスクリックや文字入力などのユーザー操作)が発生した要素は「$(this)」に格納されますので、要素の種類を指定しない汎用的な処理を記載することができます。

複数の要素に対しては、eachメソッドを使って繰り返し処理を行うことができます。

$(“セレクタ”).each(function(){処理});

セレクタ

セレクタは、操作や変更したい要素を指定するための書式です。ほとんどの場合、CSSのセレクタと同じものが利用できるようになっています。

基本的な構文は以下です。

$(“セレクタ”)

セレクタには、以下の3種類があります。

基本セレクタ

属性の指定する基本となるセレクタです

基本セレクタ説明構文
要素セレクタ特定のHTML要素$(“要素名”)
IDセレクタ特定のid属性を持つ要素$(“#ID名”)
クラスセレクタ特定のclass属性を持つ要素$(“.クラス名”)
ユニバーサルセレクタすべての要素$(“*”)
属性セレクタ特定の属性を持つ要素$(“[属性名]”)
グループセレクタ複数のセレクタをまとめて指定する$(“要素1, 要素2”)

階層セレクタ

HTMLのDOM構造をたどって指定するセレクタです。

階層セレクタ説明構文
子孫セレクタ特定の要素の内側にある要素$(“要素1 要素2”)
子セレクタ特定の要素の直下の子要素$(“親要素 > 子要素”)
隣接セレクタ特定の要素の次の要素$(“要素1 + 要素2”)
間接セレクタ特定の要素の後に出現する要素$(“要素1~要素2”)
否定擬似セレクタ特定の要素内で指定した要素以外の要素$(“要素1:not(要素2)”)
empty擬似セレクタ子要素やテキストを含まない要素$(“要素:empty”)

フィルタ

HTMLのDOM構造の位置などで指定するセレクタです。

フィルタ説明構文
firstフィルタ指定した要素の最初の要素$(“要素:first”)
lastフィルタ指定した要素の最後の要素$(“要素:last”)
evenフィルタ指定した要素の偶数番目の要素$(“要素:even”)
oddフィルタ指定した要素の奇数番目の要素$(“要素:odd”)
oddフィルタ指定した要素の奇数番目の要素$(“要素:odd”)
eqフィルタ指定した番号の要素$(“要素:eq(番号)”)
gtフィルタ指定した番号より後の要素$(“要素:gt(番号)”)
ltフィルタ指定した番号より前の要素$(“要素:lt”)
headerフィルタh1からh6までのheader要素$(“要素:header”)
containsフィルタ特定の文字列が含まれている要素$(“要素:contains(文字列)”)
hasフィルタ特定の要素が含まれている要素$(“要素1:has(要素2)”)
parentフィルタ子要素やテキストを含む要素$(“要素:parent”)

メソッド

セレクタで指定した要素に対して、メソッドで指定した処理を行います。

基本的には、以下のような構文になっています。

$(“セレクタ”).メソッド(引数);

また、どっと(.)でつなげることで、処理結果に対して操作をすることができます。この手法をメソッドチェーンと呼びます。

$(“セレクタ”).メソッド1.メソッド2;

なお、メソッドは、大きく分けて以下の4種類があります。

CSSや属性に関するメソッド

CSSや属性に対して取得や設定などを行います。

CSSや属性に関するメソッド説明構文
テキストの取得(text)テキストを取得する$(“セレクタ”).text()
テキストの変更(text)テキストを変更する$(“セレクタ”).text(“変更後のテキスト”)
HTMLの取得(html)HTMLを取得する$(“セレクタ”).html()
HTMLの変更(html)HTMLを変更する$(“セレクタ”).html(“変更後のHTML”)
指定したCSSプロパティの値を設定(css)css(プロパティ名, 値)$(“セレクタ”).css(プロパティ名, 値)
指定したCSSプロパティの値を取得(css)指定したCSSプロパティの値を取得する$(“セレクタ”).css(プロパティ名)

エフェクト系メソッド

コンテンツに動き(フェード表示やスライドなど)つけるものです。

エフェクト系メソッド説明構文
表示の切り替え表示されているものを隠したり、非表示のものを表示したりする$(“セレクタ”).toggle()
フェードインフェードインさせて表示する$(“セレクタ”).fadeIn()
フェードアウトフォードアウトさせて非表示にする$(“セレクタ”).fadeOut()
要素を表示要素を表示する$(“セレクタ”).show()
要素を隠す要素を隠す$(“セレクタ”).hide()

トラバース系メソッド

HTMLのDOMツリー内から、指定条件に合うものを選択、検索します。

トラバース系メソッド説明構文
検索条件に合うものと検索する$(“セレクタ”).find()
初めの要素初めの要素$(“セレクタ”).first()
最後の要素最後の要素$(“セレクタ”).last()
次の要素次の要素$(“セレクタ”).next()

マニュピレーション系メソッド

要素を追加、削除します。

マニュピレーション系メソッド説明構文
先頭にHTMLの挿入先頭にHTMLを挿入する$(“セレクタ”).prepend(“挿入するHTML”)
最後にHTMLの挿入最後にHTMLを挿入する$(“セレクタ”).append(“挿入するHTML”)
要素の前にHTMLの挿入属性の前にHTMLを挿入する$(“セレクタ”).before(“挿入するHTML”)
要素の後にHTMLの挿入要素の後にHTMLを挿入する$(“セレクタ”).after(“挿入するHTML”)
先頭に要素を移動他の要素内の先頭に要素を移動する$(“セレクタ”).prependTo(移動先のセレクタ)
最後に要素を移動他の要素内の最後に要素を移動する$(“セレクタ”).appendTo(移動先のセレクタ)
前に要素を移動他の要素の前に要素を移動する$(“セレクタ”).insertBefore(移動先のセレクタ)
後に要素を移動他の要素の後に要素を移動する$(“セレクタ”).insertAfter(移動先のセレクタ)
他の要素で包む要素を他の要素で包む$(“セレクタ”).wrap(<要素名></要素名>)
まとめて他の要素で包む要素をまとめて他の要素で包む$(“セレクタ”).wrarpAll(<要素名></要素名>)
子要素のテキストを他の要素で包む子要素のテキストを他の要素で包む$(“セレクタ”).wrapInner(<要素名></要素名>)
他の要素に置き換える要素を他の要素に置き換える$(“セレクタ”).replaceWith(置換後の要素)
要素を削除要素を削除する$(“セレクタ”).remove()
指定した属性の値を変更指定した属性の値を変更する$(“セレクタ”).attr(属性名, 属性値)
指定した属性の値を取得指定した属性の値を取得する$(“セレクタ”).attr(属性名)
指定した属性を削除指定した属性を削除する$(“セレクタ”).removeAttr(属性名)
class属性を追加class属性を追加する$(“セレクタ”).addClass(class属性値)
class属性を削除class属性を削除する$(“セレクタ”).removeClass(class属性値)

イベント

ブラウザ上でのユーザー操作によって動作を行う場合に、そのトリガーとなる操作が行われた場合にイベントで定義した処理が実行されます。

イベント説明構文
クリックイベント特定の要素がクリックされたとき$(“セレクタ”).click(function(){処理});
ダブルクリックイベント特定の要素がダブルクリックされたとき$(“セレクタ”).dblclick(function(){処理});
マウスダウンイベント特定の要素の上でマウスのボタンを押されたとき$(“セレクタ”).mousedown(function(){処理});
マウスアップイベント特定の要素の上でマウスのボタンを放したとき$(“セレクタ”).mouseup(function(){処理});
クリックされるたびに異なるイベントクリックするたびに異なる処理を実行するとき$(“セレクタ”).toggle(function(){処理});
マウスオーバー特定の要素の上にマウスが重なったとき$(“セレクタ”).mouseover(function(){処理});
マウスアウト特定の要素の上からマウスが離れたとき$(“セレクタ”).mousout(function(){処理});
マウスムーブ特定の要素の上でカーソルが動いたとき$(“セレクタ”).mousemove(function(){処理});
イベントを取り消す設定されているイベントを取り消す$(“セレクタ”).unbind(“条件”);
1度だけ実行指定した要素に対して、イベントを1度だけ実行する$(“セレクタ”).one(“条件”, function(){処理});
要素を更新(load)要素を更新する$(“セレクタ”).load(ファイル名)

フォーム

フォームの情報取得や操作を行います。

フォームについても、以下のような分類ができます。

フォームの値を取得・変更

フォームの入力値などを取得、操作するための処理です。

フォームの値を取得・変更説明構文
フォームの入力値を変更(val)フォームの入力値(val ue属性の値)を変更する$(“セレクタ”).val(“入力値”)
フォームの入力値を取得(val)フォームの入力値(val ue属性の値)を取得する$(“セレクタ”).val()

フォームのイベント

フォームに対して発生する操作によって実行される処理を定義します。

フォームのイベント説明構文
フォーカスの取得フォームが選択された状態のとき$(“セレクタ”).focue(function(){処理});
フォーカスが外れたことの検知フォームが外れたことを知る$(“セレクタ”).blur(function(){処理});
フォームの変更検知フォームが変更されたことを知る$(“セレクタ”).change(function(){処理});
フォームの送信を検知フォームの送信ボタンが押されたとき$(“セレクタ”).submit(function(){処理});

フォームのセレクタ

フォームを指定する場合に使用します。

フォームのセレクタ説明構文
すべてのフォームを一括指定すべてのフォームを一括で指定する$(“:input”)
テキストフォームの指定テキストフォームを指定する$(“:text”)
パスワードフォームの指定パスワードフォームを指定する$(“:password”)
ラジオボタンの指定ラジオボタンを指定する$(“:radio”)
チェックボックスの指定チェックボックスを指定する$(“:checkbox”)
送信ボタンの指定送信ボタンを指定する$(“:submit”)
イメージボタンの指定イメージボタンを指定する$(“:image”)
リセットボタンの指定リセットボタンを指定する$(“:reset”)
ボタンの指定ボタンを指定する$(“:button”)
ファイル選択フォームの指定ファイル選択フォームを指定する$(“:file”)
チェックされているフォームの指定ラジオボタンやチェックボックスのチェックされているフォームを指定する$(“:checked”)
選択されているフォームの指定セレクトボックスで選択されているフォームを指定する$(“:selecred”)

まとめ

jQueryの説明と、Railsの環境へjQueryを導入する手順、jQueryの簡単な使い方を説明しました。

JavaScriptはWebアプリケーションの豊かな表現を実現するのに最適な手段であり、Railsアプリケーションでも積極的に採用されています。

jQueryは、そんなJavaScriptをより簡単にシンプルに実装することができる優れたライブラリです。もちろん、JavaScriptでなければ表現できないようなこともありますが、多くのことがjQueryで対応できます。

そうすることで開発効率を上げ、よりビジネスコード(サービスの肝となる部分のプログラム)の検討に時間を使うことができます。

便利に使えるものは使って開発するのも、現代のプログラマーには必須のスキルと言えますので、ぜひjQueryも活用して、効率よく品質の高いプログラムを作れるようになりましょう。

・jQueryはJavaScriptを容易に利用できるようにしてくれるツール
・jQueryの導入はgemを使う
・jQueryを読み込むため、「application.js」へ「//= require jquery」を追加する必要がある場合がある
・「app/assets/javascripts/」に「.js」ファイルとして保存することで、jQueryは自動で読み込まれる
・turbolinksが有効なままでは、最初のアクセス時しか、jQueryが動作しない

【インタビュー】1ヶ月でRubyをゼロから学び、Webエンジニアとして転職!

ブラジルから帰国し技術をつけようとRubyエンジニアを目指してWebCampでRubyを学び、見事Webエンジニアとして転職を果たした田中さんにお話を伺いました。

Rubyの学習がしたい。基礎をしっかりと理解したい

転職のサポートがほしい

と考えている方はぜひお読み下さい。

https://web-camp.io/magazine/archives/8535

\プログラミングスクールを比較/

DMM WEBCAMP

COACHTECH

RUNTEQ

DMM WEBCAMP COACHTECH RUNTEQ
目指せる姿 WEBエンジニアへの転職
フリーランスエンジニア WEBエンジニアへの転職
分割払い
補助金 ×
転職保証 × ×
受講期間 12週間〜 3ヶ月〜 5ヶ月〜
特徴 【IT業界の転職を一番に考えたい方向け】
大手DMMが運営のプログラミングスクール
転職成功率98.8%
豊富なキャンペーンや補助金制度あり
【フリーランスを目指したい方向け】
フリーランスのエンジニアを最短で目指す
エンジニアと共に実際の案件開発を担当
【とことん勉強してから転職したい方向け】
1,000時間(約9カ月)のカリキュラムでしっかり勉強
企業の求める即戦力のWEBエンジニアを目指す
料金 329,350円〜
※給付金適用後
42万9,000円~ 55万円

公式HP

公式HP

公式HP

関連記事

資料請求

  • 短期集中で最速エンジニア転職を実現-転職成功者インタビュー一覧

    DMM WEBCAMPでは転職成功率98%を実現しています。本資料では、元警察官や元ラーメン屋など様々なバックグラウンドを持つ卒業生の声をお届けします。

    資料をダウンロードする
  • IT技術がもたらす3つの変化と身につけるべきスキル

    IT技術の発展により、今後10~20年程度で47%の仕事がなくなると言われています。どのような変化が訪れ、私達はどのようなスキルを身につけるべきかを解説します。

    資料をダウンロードする
  • 未経験がフリーランスエンジニアになる方法-年収アップで自由な働き方を手に入れる

    働き方改革やリモートワークの影響でフリーランスという働き方の人気は高まりつつあります。フリーランスエンジニアとして活躍するために必要な情報をお届けします。

    資料をダウンロードする

© 2024 WEBCAMP MEDIA Powered by AFFINGER5