アーカイブ

‘Rails’ カテゴリーのアーカイブ

react-railsとbrowserify-railsを併用することにした。 このエントリーを含むはてなブックマーク はてなブックマーク - react-railsとbrowserify-railsを併用することにした。

2015 年 10 月 13 日 Comments off

サイキョウライン

現時点ではreact-railsのやり方に寄せてモジュールのソースを取り込むことにしました。

やっぱりnodeモジュールの管理はnpmに任せることにしました。

reactjs/react-rails

place the following in your application.js:

//= require react
//= require react_ujs
//= require components

react-railsのインストール時に追記するこれをそのまま使って、埋まっているreactはこんなファイルを置いて置き換えています。(その後のreact_ujsでエラーが出るのを防ぐため)
app/assets/javascripts/react.js

if (typeof window !== 'undefined' && window !== null) {
  window.React = require('react');
}

windowの存在判定はCoffeeScriptの「window?」のコンパイル結果をパクりました。
副作用がでちゃったりイカしたやり方を見つけたらバリバリ変えていく所存です。

カテゴリー: JavaScript, Rails タグ:

react-railsを使ったアプリでnodeモジュールを使う。 このエントリーを含むはてなブックマーク はてなブックマーク - react-railsを使ったアプリでnodeモジュールを使う。

2015 年 10 月 7 日 Comments off

react-railsでは実行環境に合わせて、

react-rails/asset_variant.rb at master · reactjs/react-rails

@react_directory = GEM_ROOT.join(‘lib/assets/react-source/’).join(@react_build).to_s

react-rails/railtie.rb at master · reactjs/react-rails

app.config.assets.paths << asset_variant.react_directory

こんな感じでgemに含んでいるreact.jsを使っています。ということは、npmの管理下にありません。
そうなると困るのが、他のnodeモジュールを使いたい場合にどうするかで、だいぶググってあちこちでソースを読んで悩んだのですが、現時点ではreact-railsのやり方に寄せてモジュールのソースを取り込むことにしました。
それぞれこんな感じです。(コードは抜粋)

app/assets/javascripts/application.js

//= require modules

app/assets/javascripts/modules.js

//= require_tree ./modules

js/gulpfile.babel.js

let paths = {
  module_sources: [
    './node_modules/react-redux/dist/react-redux.min.js',
    './node_modules/redux/dist/redux.min.js'
  ],
  modules_dir: '../app/assets/javascripts/modules/'
};
gulp.task('copy_modules', () => {
  gulp.src(paths.module_sources)
    .pipe(gulp.dest(paths.modules_dir));
});

js/package.json

{
  "devDependencies": {
    "react-redux": "^3.1.0",
    "redux": "^3.0.2"
  }
}

※jsディレクトリについてはこちら。

react-railsを使ったアプリでコンポーネントのテストを走らせてみた。 » サイキョウライン

Rails.rootの下に「js」というディレクトリを掘ってjs部屋

nodeモジュールはnpmで一括管理するのが相応しいと思っているのですが、肝心のreactがreact-railsの中にいるので、これだけ例外になるのが気持ち悪く感じています。
実際にreact-railsを使ってアプリを書いている方はどの様な方法でこの問題を解決しているでしょうか。
そもそもreact-railsを使わずにbrowserify-railsを使って汎用的(かな?)な方法で管理するべきなんですかね。

カテゴリー: JavaScript, Rails タグ:

react-railsを使ったアプリでコンポーネントのテストを走らせてみた。 このエントリーを含むはてなブックマーク はてなブックマーク - react-railsを使ったアプリでコンポーネントのテストを走らせてみた。

2015 年 10 月 1 日 Comments off

いままでNode.jsをまともに触ったことがなく、JavaScriptはほぼjQueryを使うための言語だった程度のへっぽこもいいところからのスタートです。

まずは一人React.js Advent Calendar 2014入門 Reactをひと通り読みました。
つぎにreact-railsを使ってReactのチュートリアルをやってみたらなんとなく動いた(ほぼコピペ)んですが、react-railsで使われているReactはこんな感じでgemに含まれていてnpmでは管理されておらず、その他のnodeモジュールを使ったりコンポーネントのテストをどう書いたらいいのか分からず進めなくなってしまいました。

そこで、分からないなりに試行錯誤してなんとかテストを走らせることが出来るまでのもろもろです。
結論から言うと、Rails.rootの下に「js」というディレクトリを掘ってjs部屋とし、そこにコンポーネントのソースをコピーしてテストを走らせています。
このディレクトリ構成はmizchiさんの記事にあったサンプルソースを参考にさせていただきました。
その他もググりまくって書いたり消したり方々から拝借してきたのですが、方々過ぎて分からなくなってしまいました。(ごめんなさい…)

ソースはここにあります。

だいぶ右往左往したのですが、ほぼ2週間に渡る試行錯誤の経緯はこんな感じです。
1.gulpってのを使って処理をまとめるのがいまの普通みたいなので、gulpタスク内でテストを走らせることを目指す。
2.gulp自体やプラグインの使い方を調べながらひたすらタスクを書く。
3.なんとか出来たところで、ReactのTestUtilsがDOMを必要としていることに気が付く。(※1)
4.前覚えたKarmaを使えばいいのでは?と思いつく。(※2)
5.Karmaを使ってPhantomJSに走らせてもらう。
6.動いた!(とりあえず!)

※1

Test Utilities | React

Render a component into a detached DOM node in the document. This function requires a DOM.

※2

WebStormでpower-assertが動くまで。 » サイキョウライン

ランナーにKarmaを、フレームワークにMochaを、ブラウザにPhantomJSを使いました。

テストが走るまでの概要
・assetsの下からコンポーネントのソース(*.coffee)をコピー
・coffee→jsの変換
・jsx→jsの変換
・テストのjsをespowerして(日本語合ってる?)mochaで実行
・ここで「ReferenceError: document is not defined」と怒られる
・espowerした(日本語合ってる?)テストKarmaで実行

コードについて考えたこと
・コンポーネントのソースはcoffeeで書くが、使うのはES5までに留める。
ES6の機能を持ち込む(とくにarrow関数)とコンパイル結果が予測できず混乱してしまった。
ブラウザが読む(外に出る)部分なので、ブラウザ依存のような躓きは防ぎたい。
・テストのソースはjsで書いてES6の機能を出来るだけ使っていく。
正式公開されているので、実際に使って慣れていきたい
外に出ない部分なので、なにかあっても対策がしやすい。

テスト対象で対策をしたこと
コンポーネントのソースはブラウザでもNode.jsでも走るので、両方に向けて依存解決のためのコードを埋めた。

Foo = {}

if module?.exports
  `var $ = require('jquery')` unless $?
  `var React = require('react')` unless React?
  module.exports = Foo
else
  `var $ = this.$` unless $?
  `var React = this.React` unless React?
  @Foo = Foo

Foo.MessageBox = React.createClass

ビューではreact-railsのメソッドを通してこんな感じで使ってます。

= react_component('Foo.MessageBox', url: 'http://example.com/messages')

残っている問題
・アプリ内で使っているReactとテストで使っているReactのソースが異なる。
・動いてはいるがいろいろ普通ではない、気がとてもしている。

その他思ったこと
こういう時、昼メシついでになんとなく聞けるような同僚がいない、ぼっち系個人事業主つらい。

カテゴリー: JavaScript, Rails タグ:

belongs_toにrequiredが付いてた。 このエントリーを含むはてなブックマーク はてなブックマーク - belongs_toにrequiredが付いてた。

2014 年 12 月 25 日 Comments off

えっ、てことで確認したら付いてました。

Add a `required` option to singular associations · 00f5551 · rails/rails

belongs_to :account
validates_presence_of :account

これだいぶ気持ち悪かったのでスッキリできて嬉しい。

カテゴリー: Rails タグ:

Time.nowとTime.currentの違い。 このエントリーを含むはてなブックマーク はてなブックマーク - Time.nowとTime.currentの違い。

2014 年 12 月 8 日 Comments off

RubyとRailsにおけるTime, Date, DateTime, TimeWithZoneの違い – Qiita

基本的に Time.current や Time.zone.xxx、xxx.in_time_zone 等のメソッドを使うと、TimeWithZoneクラスのインスタンスが返却され、application.rbのタイムゾーンが使用されるようです。 Time.now や Time.parse など、Timeクラスから元から存在しているメソッドはRuby標準の挙動と同じく、環境変数のタイムゾーンを使用しています。

Time.currentを知らなかったー。いままではTime.nowを使っていたのですが、これからはTime.currentに寄せていこうと思います。

カテゴリー: Rails, Ruby タグ:

トークンで認証する。 このエントリーを含むはてなブックマーク はてなブックマーク - トークンで認証する。

2014 年 4 月 3 日 Comments off

deviseを使ったアプリでトークン認証をしようとしていて、過去に機能があったものの3.1から廃止されているのを知りました。

Devise 3.1: Now with more secure defaults | Plataformatec Blog

Since the usage of the authenticatable token can vary considerably in between applications, each requiring different safety guarantees, we have decided to remove TokenAuthenticatable from Devise, allowing users to pick the best option.

アプリごとに要求されるセキュリティレベルが違うはずで、ライブラリの標準機能として画一的にするのはやはり問題なので各々実装してくださいね、という感じ。

そしてこのエントリから代替案としてリンクされているのがこちらのページです。
This gist describes two of the available solutions.

1番はトークンのみで認証して、2番はトークンの他にもうひとつ(メールアドレス)を組み合わせる方法になっています。
いろいろ議論が交わされているのですが、gonzalo-bulnesさんがまとめてgem作ったよ、てのが最新ステータス。

simple_token_authentication | RubyGems.org | your community gem host

Simple (but safe) token authentication for Rails apps or API with Devise.

2番のメールアドレスとトークンを使用する方法で、クエリーパラメータだけでなくリクエストヘッダでの認証にも対応しているようです。
ソースを読んだところ大きくなく、なにかあっても自分で実装して回避したりプルリク投げたりできそうなので、使わせていただくことにしました。

カテゴリー: Rails, Ruby タグ:

日時をよしなに解釈する。 このエントリーを含むはてなブックマーク はてなブックマーク - 日時をよしなに解釈する。

2014 年 3 月 5 日 Comments off

javan/whenever · GitHub

Whenever is a Ruby gem that provides a clear syntax for writing and deploying cron jobs.

とあるRailsアプリでcronを管理するためにwheneverを使い始めたのですが(便利ですね!これ)、時間指定のところで「4:30 am」や「12pm」、「12:20am」など、いろいろな記法を受け入れていて、どんな実装になっているんだろうとソースを見たらchronicというgemを使っていました。

https://github.com/javan/whenever/blob/master/lib/whenever/cron.rb#L15

mojombo/chronic · GitHub

Chronic is a natural language date/time parser written in pure Ruby. See below for the wide variety of formats Chronic will parse.

こちらも便利で、ありがたい。

カテゴリー: Rails, Ruby タグ:

except(:order)とunscope(:order)の違い。 このエントリーを含むはてなブックマーク はてなブックマーク - except(:order)とunscope(:order)の違い。

2014 年 1 月 23 日 Comments off

ActiveRecord::QueryMethods

Note that this method is more generalized than ActiveRecord::SpawnMethods#except because except will only affect a particular relation’s values. It won’t wipe the order, grouping, etc. when that relation is merged.

マージされた場合に、exceptでは指定されたところ以外は残るけど、unscopeではそれすらもキャンセルされるみたい。へえぇ。

カテゴリー: Rails, Ruby タグ:

Springは直に入れ、なくても問題なくなったみたい。 このエントリーを含むはてなブックマーク はてなブックマーク - Springは直に入れ、なくても問題なくなったみたい。

2013 年 11 月 28 日 Comments off

消えているっていうのは、まぁそういうことってことですよ・・・ね?

Revise readme · 9aea281 · jonleighton/spring

-Install the `spring` gem. You can add it to your Gemfile if you like but
-it’s optional. You now have a `spring` command. Don’t use it with
-`bundle exec` or it will be extremely slow.

[ref.] Springは直に入れよう。 » サイキョウライン

カテゴリー: Rails, Ruby タグ:

Springは直に入れよう。 このエントリーを含むはてなブックマーク はてなブックマーク - Springは直に入れよう。

2013 年 10 月 5 日 Comments off

jonleighton/spring

Install the spring gem. You can add it to your Gemfile if you like but it’s optional. You now have a spring command. Don’t use it with bundle exec or it will be extremely slow.

いままでGemfileに書いてました。なるほどなるほど、なるほどですねー。

カテゴリー: Rails, Ruby タグ: