【Railsで非同期通信】RailsでAjaxを利用する時にjQueryを使う方法

Not image

Ruby on Railsを使っている方の中で、Ajaxを使って非同期通信をしたいという方は、多いのではないでしょうか?

というよりAjaxを知らなくても、非同期通信をやってみたいという方は、少なくともいるのではないでしょうか?

ページをリロードしなくても画面の描画が変わるというものは、一見地味ですがWeb系に携わっているうちに、やりたい場面が増えてくると思います。

そんな場面で大活躍するのが「Ajax」であり、さらに「jQuery」を使うとより便利に簡単に、非同期通信を実装できるというカラクリです。

そこで今回は、RailsでjQueryを使ってAjaxを実装する具体的な方法をまとめていきたいと思います。

また今回は、AjaxやjQueryについては詳しく説明しませんので、あしからず。

それでは、RailsでjQueryを使う為の準備から説明していきます。

もし、RailsでjQueryを使う準備ができている方は、準備の項は飛ばしてください。

Ruby on RailsでjQueryを使うための準備

手順1:jQueryをbundle installする

Railsでは、jQueryを使える環境を自分で作る必要がある為、gemをインストールしましょう。

Gemfileに以下のような一行を追加しましょう。

そして、bundle installでgemを追加します。

手順2:jQueryを使えるようにファイルの設定を追加する

gemをインストールしたところで、次は各種ファイルを編集していきます。

編集するファイル

  • app/assets/javascripts/application.js
  • app/views/layouts/application.html.erb

上記二つのファイルを以下のように編集しましょう。

これで、RailsでjQueryを使う準備ができました。

Railsで「rails s」コマンド実行中の方は、もう一度やり直すことが必要です。

gemをインストールしたので必要な操作です。意外と忘れてしまって、なぜかjQueryが使えないという事態が起きがちです。

RailsでjQueryを使いAjaxを実装する手順

さてjQueryの準備ができたところで、Ajaxを実装していきたいと思います。

今回作るものを軽く説明すると、マイナーなフルーツ3つにradioボタンをつけて、選択したフルーツの説明をAjaxで非同期通信し、描画するというものです。

文だけだとわかりにくいと思いますので、画像も載せておきます。

Not image

完成イメージが確認できたところで、実装していきましょう。ビューとコントローラとルーティングを編集することで、jQueryによる非同期通信を実現していきます。

事前準備として、コントローラとモデルとビューの作成が必要です。

Viewの編集

まず、fruits/index.html.erbに以下のようなコードを書きます。

HTMLの部分は、単なるradioボタンとラベルのコードです。

jQueryのコードの部分に注目すると、radioボタンが押された時に関数が呼ばれて、Ajaxが実行されるという流れになっています。

GETリクエストで、contentアクションに処理を投げています。

Controllerの編集

次にfruits_controller.rbを編集していきます。

idにマッチするcontentを取得して、viewに値を返します。

ルーティングの設定

最後は、ルーティングの設定です。

contentアクションは、CRUDに乗っ取ったアクションではないので、ルーティングの設定でcollectionを使ってcontentアクションを設定していきます。

これで設定は完了です。

最後にrails serverコマンドを実行し、試してみましょう。

最初に想定した動きができれば、終了です!お疲れ様でした。

まとめ

ここまでjQueryを使った非同期通信について説明してきましたが、いかがだったでしょうか。

「非同期通信」という字面をみると、極端に難しそうに思いますが、一度理解してしまえばそれほどでもないと感じる方もいるのでは?

もし現段階で難しいと感じた方でも、何度も触れることで慣れてくると思います。

また学習コストに比べて、技術を覚えることのメリットが大きいことに注目です。

ページをリロードせずに画面描画が変わるのは、ユーザビリティが高いと言えるでしょう。

スピーディな画面遷移は、ユーザのストレスを減らすこと・使いやすいサービスを作ることにとって大切な要素です。

ぜひ、頑張っていきましょう!最後まで読んでいただき、ありがとうございました。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です