Webアプリつくってみよう 3日目 / 全5回

gaji-staff

こんにちは、Gaji-Labo エンジニアの山崎です。
この記事は Gaji-Labo AdventCalendar 2015 12日目の記事です。

前回はAPIの実装をご紹介しました。
今回はUI側の実装を進めていくのですが、前提としてAPIは未実装という設定です。

URLパラメータ、JSON形式は予め決まっていますのでそれに沿った実装を行います。

Rails + Backbone で動かそう

まずはライブラリなどを gem 経由でインストールしましょう。
今回使用するライブラリは、

  • CoffeeScript
  • jQuery
  • Underscore
  • Backbone

の4つです。

Gemfile に以下を追記します。


source 'https://rails-assets.org'

gem 'coffee-rails', '~> 4.1.0' gem 'jquery-rails' gem 'rails-assets-underscore' gem 'rails-assets-backbone'

次に、app/assets/javascripts/application.js に以下を追記します。


//= require jquery
//= require underscore
//= require backbone
//= require_tree .

underscorebackbone の前提なので気をつけましょう。

あとは、JSを読み込むだけですね。
app/views/layouts/application.html.erb に以下を追記します。
閉じbodyの上あたりが良いと思います。


<%= javascript_include_tag="" 'application'="" %="">

さあ後はJavaScriptを組み込んでいくだけです。

Viewの実装

本来であればModelも実装してViewと結合ということも考えられるのですが、
今回は大きな処理は無いので(Backboneである必要も無いですが)割愛します。

app/assets/javascripts/postcode.js.coffee に View の処理を記述していきます。


$ ->
  view = Backbone.View.extend
    el: 'body'
    events:
      "click .submit": "onSubmit"
    onSubmit: ->
      postcode = $("#postcode").val()
      if postcode.length > 0
        $.getJSON "/search/#{postcode}", (data) ->
          if data.message
            $(".address").html data.message
          else
            $(".address").html """
              #{data.prefecture}
              #{data.city}
              #{data.address}
            """
  new view()

はい、APIが無いので動かないですね(白目)

jquery-mockjaxの出番

jquery-mockjax は jQuery.ajax の振る舞いをモックに差し替えるプラグインです。
登録したURLへのajax通信はすべてmockjaxの方へ流れてきますので検証が楽ちんですね。

まずはインストールします。
Gemfileに以下を追記し、


gem 'rails-assets-jquery-mockjax'

$ bundle insatll

を実行します。

次に、app/assets/javascripts/application.js


//= require jquery-mockjax

を追記します。

これでmockjaxを使う準備が整いました。
app/assets/javascripts/mockjax.js.coffee というファイルを作成しましょう。


$.mockjax
  url: "/search/*"
  response: (settings) ->
    postcode = _.last settings.url.split("/")
    if /d/.test(postcode)
      this.responseText = {
        "prefecture": "東京都"
        "city": "渋谷区"
        "address": "千駄ヶ谷"
      }
    else
      this.responseText = { "message": "not found."}

検索クエリに数字が含まれる場合のみ正常にレスポンスを行い、
文字列のみの場合などはエラーメッセージを返すように設定しました。

この状態で操作してみると、ちゃんとajax通信がモックの方へ来ていることが確認できます。

3日目まとめ

主に jquery-mockjax の記事になってしまいましたが、
便利なプラグインなのでオススメです。

タイムアウトやランタイムエラー時の振る舞いも設定できますので、
APIと連携するUIを実装する場合は是非導入してみてください。

次回はAPIとの結合、仕様変更の対応をご紹介します。

関連リンク


gaji-staff

投稿者 Gaji-Labo Staff

卒業したスタッフの過去記事は、Gajiおじさんがここにまとめて記録しています。ときどきGajiおじさん自身も記事を書くかもしれません。