Ruby on Railsを使っている方の中で、Ajaxを使って非同期通信をしたいという方は、多いのではないでしょうか？
というよりAjaxを知らなくても、非同期通信をやってみたいという方は、少なくともいるのではないでしょうか？
ページをリロードしなくても画面の描画が変わるというものは、一見地味ですがWeb系に携わっているうちに、やりたい場面が増えてくると思います。
そんな場面で大活躍するのが「Ajax」であり、さらに「jQuery」を使うとより便利に簡単に、非同期通信を実装できるというカラクリです。
そこで今回は、RailsでjQueryを使ってAjaxを実装する具体的な方法をまとめていきたいと思います。
また今回は、AjaxやjQueryについては詳しく説明しませんので、あしからず。
それでは、RailsでjQueryを使う為の準備から説明していきます。
もし、RailsでjQueryを使う準備ができている方は、準備の項は飛ばしてください。
目次
Ruby on RailsでjQueryを使うための準備
手順１：jQueryをbundle installする
Railsでは、jQueryを使える環境を自分で作る必要がある為、gemをインストールしましょう。
Gemfileに以下のような一行を追加しましょう。
そして、bundle installでgemを追加します。
手順２：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で非同期通信し、描画するというものです。
文だけだとわかりにくいと思いますので、画像も載せておきます。
完成イメージが確認できたところで、実装していきましょう。ビューとコントローラとルーティングを編集することで、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を使った非同期通信について説明してきましたが、いかがだったでしょうか。
「非同期通信」という字面をみると、極端に難しそうに思いますが、一度理解してしまえばそれほどでもないと感じる方もいるのでは？
もし現段階で難しいと感じた方でも、何度も触れることで慣れてくると思います。
また学習コストに比べて、技術を覚えることのメリットが大きいことに注目です。
ページをリロードせずに画面描画が変わるのは、ユーザビリティが高いと言えるでしょう。
スピーディな画面遷移は、ユーザのストレスを減らすこと・使いやすいサービスを作ることにとって大切な要素です。
ぜひ、頑張っていきましょう！最後まで読んでいただき、ありがとうございました。
コメントを残す