アーカイブ

2015 年 10 月 のアーカイブ

パームレストを取り替えた。 このエントリーを含むはてなブックマーク はてなブックマーク - パームレストを取り替えた。

2015 年 10 月 29 日 Comments off

palm_rest

パームレスト(として使っているオキナのプロジェクトペーパー)が尽きたので新しいのを買いました。
もう10年以上このスタイルで、思いついたときにすぐ書き殴れるし、汚れたら1枚めくって捨てればいいしで便利です。

カテゴリー: 日記 タグ:

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 タグ: