［アラフォプログラミング未経験］Railsで非同期通信「Ajex」を動かしてみました

以前作成していましたpictweetに非同期通信「Ajex」を組み込むカリキュラムに突入しました。

少し前に「Ajex」(エイジャックス？アジャックス？)についてやってみましたが、

まあ例によってよくわかってないわ、覚えてないわ、

で、もう一度復習しながら、進めていくといういつも感じでやっております。。。

目次

APIを作成する

非同期通信によって処理を行う場合はAPIが必要となります。

APIとは

Railsでアプリケーションを開発していると、

Ajaxを使って操作性の高いページを作ることが多くなります。

通常、Railsは必要なHTMLを組み立てて返すのが仕事ですが、

JavaScriptから便利に扱えるようにJSON形式でデータを返すようにすることもできます。

このようにHTMLだけではなく、必要なデータだけをJSONなどの形式で返すサーバの仕組みのことを

API、もしくはJSON APIと呼びます。

５回ぐらい読み直して、ようやく意味が頭に入ってきた気がする。

APIの作り方

APIの機能をRailsに追加する時には、大きく分けると以下の3つの方式があります。

HTMLを返すためのコントローラーを共用してAPIとして使えるようにする

手軽にAPIを追加できる

API専用のコントローラーを作成する

APIの機能が大きくなるとコントローラを分けてコードの見通しを良くしたくなる

APIを作成するためのgemを利用する

HTMLとAPIのロジックが大きく異なる場合やAPIの分量が大きい場合は専用のgemを使うと便利
それぞれメリットがありますが、今回はAPIの機能が大きくないので
HTMLと同じコントローラーを共用する方式を選んで進めていきます。

コントローラーでの振り分け

HTMLを返す時にはERBやHAMLを使ったビューを利用して必要なページを生成しました。

しかし、APIとしてJSONを返す場合には、HTMLほどのロジックが無いため、

ビューを使わずにデータを生成することができます。

Railsには、1つのコントローラーのアクションの中でHTMLとJSONといったフォーマット毎に条件分岐できる仕組みがあります。

pictweetに実装

ひと通りおさらいしたので、早速pictweetに実装していきます。

Gemfileの記述を確認しよう

Gemfileにjquery-railsが記載されているか確認しましょう。

pictweet/Gemfile
>|javascript|
...
（中略）
...
# Use jquery as the JavaScript library
gem 'jquery-rails'
...
（中略）
...
|

記載されてにない場合は最下部に記載し、bundle installしてください。

確認すると記載されていたので、改めてbundleってみました。

application.jsの記述を確認しよう

application.jsに

//= require jquery
//= require jquery_ujs

の記載がされているか確認しましょう。

application.js

  ...
  （中略）
  ...
//= require jquery
//= require jquery_ujs
  ...
  （中略）
  ...

記載がない場合は、上記を参考に記載してください。

おまけ

上記の作業後にスルスル先に進めてみると、

うん？

Ajexせずにいちいち更新してんじゃん！非同期してないじゃん！

ってことに気づき、consoleで止めてみてみると、

・Uncaught ReferenceError: $ is not defined

ってエラーが出て、怒られてました。

色々、ググって悪戦苦闘して１時間半、ようやく下記のサイトに辿り着いて解決。

→//= require_tree .を最後に読み込むようにして解決

https://qiita.com/bambis13s/items/0b0030578ecf7fd0af05

まじか、そんなことかー！！

ファーーーーー！！

でも、とりあえず解決してもやが晴れてよかった。。。