2016-04-21

Rails+Reactにbrowserifyを導入する

Rails React JavaScript

react-railsでReactを導入してるRailsアプリにbrowserifyを導入します！

JSのモダンな環境に関してはめちゃくちゃ素人なので調べた過程で読んでよかった！な記事を順番になるようにメモしておきます。

最初に読みたい記事

最初に読んでおいたらいいなと思った良記事。

qiita.com

browserifyとは

browserifyがどういうものか先ずわからないくらいのフロント音痴なのでまずはそこから調べてこう。

browserifyの公式サイトはこちら。

Browserify

Browserify lets you require('modules') in the browser by bundling up all of your dependencies.

そして他にもいくつか参考になったサイトから引用を上げさせてもらいます。

Browserifyの使い方について調べてみた - yutaponのブログ

Browserifyをざっくり説明すると、

ブラウザ上でもNode.js用モジュールを使えるようにするブラウザでもrequire()を使ったモジュール管理を使えるようにするという特徴があるようです。

browser（ブラウザ）+ fy（〜する）という単語からもNode.jsをブラウザ化するってニュアンスでしょうか。

なるほどなるほど。

browserify をはじめてみる - Please Sleep

CommonJS のモジュールの仕組み、つまり Node.js の require をブラウザ上でも使えるようにするもの、ということでいいみたい。Readme を読む限りは、npm にあるモジュールをブラウザ上にもっていくために作られ始めたような印象をうけるが、ちまたのエントリーをみていると AMD に代わりに CommonJS でフロントエンドの依存関係の管理をする (RequireJS ではなく、Node.js 感覚で require 関数をフロントエンドで使う) ためのツールとしても使っていいようだ。

以下のCookpadのtech blogの記事が非常に参考になります。

モダンJavaScript開発環境 on Rails - クックパッド開発者ブログ

ふむふむ。自分はRailsはrailsから外れていくほどつらみが増えていくと認識しているので同じく最後のbrowserify-railsを使う方針がベターかなと思いました。

フロントエンド開発の３ステップ（npmことはじめ） - Qiita

今までは、javascriptのライブラリを使う際、読み込みのためのhtmlタグを書く必要がありましたが、 browserifyを使うと、javascript上で直接ライブラリを参照することができます。普通の言語なら当たり前の機能ですが、ブラウザ上では今までできなかった、というわけです。 browserifyを使うと、node_modules内のライブラリを、直接参照することができます。また、ライブラリ同士の依存も自動で解決されます。ということは npm installでライブラリを持ってきて、何も考えずにrequireで読み込めるということを意味します。

browserifyでES6使えるようにする

ということでまずはES6を使えるようにしてみます。

以下で紹介されてるサンプルアプリを参考にさせていただきました。

techlife.cookpad.com

GitHub - hokaccha/browserify-rails-example

このcommitの差分が非常にわかりやすい。。。ありがたい。。。

browserify-rails setting · hokaccha/browserify-rails-example@4587691 · GitHub

ES6についてはとりあえずこれよんどく

Hello, ES6 ~これから迎えるJSのミライ~ - @yoshiko_pg

browserifyとReact Components

babelifyできたら次はReact Componentsを動かせるようにします。以下の記事を参考に設定しました。

qiita.com

2016-04-14

Webpay::Mockで決済周りのテストを書く

Rails RSpec

この記事

qiita.com

とかを参考にしながらWebpayでの決済機能は実現できたものの、テスト書くのどうしよ。。

と悩んでいたところでWebpay::Mockというものを用意してくださってくれていることに気付く。

決済周りの処理のテストを書く方法をメモしておきます。

gemのREADMEと一緒に、以下の記事も参考にさせていただきました。

engineering.webpay.co.jp

WebPayテスト環境のオブジェクトを削除するRakeタスク | EasyRamble

今回実装した環境は以下です。

$ bundle exec rails -v
4.2.6
$ cat .ruby-version
2.3.0

準備

まずはgemを追加してインストール。

# Gemfile
gem "webpay-mock"

$ bundle

そしたら、rails_helper.rbでrequireしてconfigも設定します。

# spec/rails_helper.rb
# ...
require "webpay/mock"
# ...
RSpec.configure do |config|
  # ...
  config.include WebPay::Mock::WebMockWrapper
end

テスト実装

ここまでくれば、specファイルで例えば以下のように使用することができます。

let(:params) { { amount: 1000, currency: 'jpy', card: 'tok_xxxxxxxxx', description: 'test charge' } }
let!(:response) { webpay_stub(:charges, :create, params: params) }

specify { expect(webpay.charge.create(params).id).to eq response['id'] }

他のtest casesはコチラに。

github.com

2016-04-12

全アクション共通メソッドを利用してナビゲーションバーに検索フォームを配置する

Rails Rails5 Cofwa

検索フォームをナビゲーションバーのような共通viewファイルに置くにはどうしたらいいのか、一瞬迷ったのでメモ。

今回は、以下で作成した検索フォームをnavigation barに配置したいと思います。

totutotu.hatenablog.com

実装

Railsでは、全てのControllerがApplicationControllerクラスを継承しています。

なので、このApplicatoinControllerクラスでbefore_actionを設定してやります。ransackでは、検索フォームのヘルパーメソッドに検索クエリを食わせてやる必要があるので、以下のようにして全てのアクションで@qを仕込めるようにします。

class ApplicationController < ActionController::Base
  # Prevent CSRF attacks by raising an exception.
  # For APIs, you may want to use :null_session instead.
  protect_from_forgery with: :exception
  before_action :set_search_query

  def set_search_query
    @q = Bean.search(params[:q])
  end
end

これであとはViewアフィルにフォームを差し込めばいいだけです。

  %body
    %nav
      - # ...
      = search_form_for @q do |f|
        = f.label :id_cont, "id"
        = f.search_field :id_cont
        %br
        = f.label :origin_name_cont, "オリジン"
        = f.search_field :origin_name_cont
        %br
        = f.label :origin_name_or_bean_variety_name_or_bean_cultivar_name_cont, "オリジン or 種 or 品種"
        = f.search_field :origin_name_or_bean_variety_name_or_bean_cultivar_name_cont
        %br
        = f.submit
      %hr

    = yield