アーカイブ

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

JSXは気持ち悪いか否か。 このエントリーを含むはてなブックマーク はてなブックマーク - JSXは気持ち悪いか否か。

2015 年 11 月 28 日 Comments off

最初に見たときは「キモッ!」と思ったのですがいまはそう思っておらず自分で不思議だったので、なぜそうなったのかを思い出してみました。(あいまいな記憶を頼りにだいぶググった。)

reactjs – React.jsのComponentについて – Qiita

それに対して、React.jsの開発者であるPete Huntはそれは「関心の分離(Separation of concerns)」ではなくて「技術の分離(Separation of technologies)」だとしていて、マークアップとViewのロジックは密であるべきとしています。

きっかけはこちらで、ただ「既存の言語に似ていて、かつ短く書ける。」というだけではない根拠があり、自分はこれに納得できたので、「JavaScriptにXMLが混ざったのではなく、JSXという新しい言語」という解釈になって、そういうものなら気持ち悪くない、という結論にいたったのでした。Railsでリンクを置くときaタグ書かずにlink_to使う感覚です。

時々細かいことが気になって仕方がなくなるんですが、自分の中で明確な線引きが出来ると、途端に落ち着きます。

[2015-11-28 追記]
@koba04さんが書かれていた話の元スライドを@t_wadaさんに教えていただきました。(19枚目
ありがとうございます!

カテゴリー: JavaScript タグ:

esなんとかについて。 このエントリーを含むはてなブックマーク はてなブックマーク - esなんとかについて。

2015 年 11 月 4 日 Comments off

ES2015 preset · Babel

All you need to compile ES2015 to ES5

いままでes6って呼んでいたのですが、Babelがes2015って呼んでて、自分はどうすべきか気になってしまったので調べてみました。

At the June 17, 2015 Ecma General Assembly in Montreux, ECMA-262 6th edition – ECMAScript® 2015 Language Specification and ECMA-402 2nd edition – ECMAScript® 2015 Internationalization API have been adopted

ECMA-262 6th edition – ECMAScript® 2015 Language Specification

こう書いてあるってことは、ECMA-262としては6で、ECMAScriptとしては2015ってことなので、es(ECMAScript)は2015って呼ぶべきってことですかね。

[2015-11-05 追記] WEB+DB PRESSに特集を書かれたteppeisさんがかなり前に言及されていました。

ES6 or ES2015 ? 〜WEB+DB PRESS Vol.87 ES6特集に寄せて〜 – Cybozu Inside Out | サイボウズエンジニアのブログ

ES6の仕様書に「2015」という文字が名称に追加されたのは比較的最近で、今年1月のDraft Rev31からです。ES Discussでの議論やTwitterでのTC39メンバーの発言を見ると、やはりES2015が正式名称であり、来年以降のECMAScriptの策定やリリースのスタイルに名称を合わせるというのが理由のようです。

うん、es2015って呼んでいこう。

カテゴリー: JavaScript タグ:

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

WebStormでpower-assertが動くまで。 このエントリーを含むはてなブックマーク はてなブックマーク - WebStormでpower-assertが動くまで。

2015 年 9 月 5 日 Comments off

OSはWindows 7 Proの64bitです。
ランナーにKarmaを、フレームワークにMochaを、ブラウザにPhantomJSを使いました。

WebStorm: The Smartest JavaScript IDE

a lightweight yet powerful IDE,

power-assert-js/power-assert

Provides descriptive assertion messages through standard assert interface.

Karma – Spectacular Test Runner for Javascript

a test runner that fits all our needs.

Mocha – the fun, simple, flexible JavaScript test framework

a feature-rich JavaScript test framework running on Node.js and the browser,

PhantomJS | PhantomJS

a headless WebKit scriptable with a JavaScript API.

続きを読む…

カテゴリー: JavaScript タグ:

セミコロン省略について。 このエントリーを含むはてなブックマーク はてなブックマーク - セミコロン省略について。

2010 年 12 月 1 日 Comments off

[JavaScript][Ruby] 行末のセミコロン省略の違い

RubyもJavaScriptも、行末のセミコロンが省略できる。なんとなく同じようなものだろうと深く考えたことがなかったが、機能が全然違っていた。Rubyは、文(式)の終わりと解釈できればそうするが、JavaScriptは次の行と継続していると解釈できればそうする。デフォルトが真逆だったのだ。別の言い方をすると、Rubyは行末のセミコロンは常に省略できるが、JavaScriptの場合は省略できないことがかなりある。

なるほど!

ってことは、ActionScriptもそうなりますよね。これは気をつけないとなぁ。

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

Libronの埼玉県対応をしました。 このエントリーを含むはてなブックマーク はてなブックマーク - Libronの埼玉県対応をしました。

2009 年 11 月 2 日 Comments off

Libron – 無料で本が読めるライフハック

Libron は Amazon のページから最寄りの図書館(*)の蔵書を検索できる便利なツールです。

Amazonのページから最寄りの図書館の蔵書を検索できるLibron(引用まんまじゃないか)で地域対応が進められているのを見て埼玉県在住としてだまっておられん、ということでやらせていただきました。
少し探してみたら埼玉県にも図書館を横断検索できるシステムがあったのでここを利用しようとしたのですが、調べてみると予想外の仕様・・・。

ここで検索すると裏側で各施設にリクエストを投げなおして、返ってきた結果をキャッシュしてフレームのひとつにはめ込むという挙動みたい。その結果は各施設のページそのものなので、チェックをつけた施設によってフォーマットはばらばら、しかもフレーム内で数回遷移するので数回リクエストを投げないと結果をとれない。これでは各施設に個別にリクエストを投げるとの変わらない、というかそれ以上に複雑になってしまいます。
そもそも人がブラウザを通して使うように作られているので当然と言えば当然です。しかしこれではあまりにもあまりではないですか。

ということで埼玉県/推計人口で、市町村または施設の検索ページが用意されている単位にそれぞれ人口を調べ、多い順に5件の施設を対応しました。
こういう経緯でのチョイスなので、いつも使ってる図書館がないよって場合にはここにコメントをいただけると追加できるかもしれません。

といいつつ、いちばん先に対応するべきであろう「さいたま市図書館」はISBN指定ができない(!?)ために対応できないのですが・・・。

カテゴリー: JavaScript, インターネット タグ:

サイ本の新しいやつ。 このエントリーを含むはてなブックマーク はてなブックマーク - サイ本の新しいやつ。

2007 年 8 月 8 日 Comments off
JavaScript 第5版 JavaScript 第5版
オライリー・ジャパン(2007-08-14)

  • (著)David Flanagan
  • (翻訳)村上 列

オライリー・ジャパン
新品価格:¥ 4,410
ASIN:4873113296

Amazonで予約開始してたので注文。
JavaScript、いまひとつ「オレわかるぜー!」って言えない。

カテゴリー: JavaScript タグ:

JavaScriptをまるごと。 このエントリーを含むはてなブックマーク はてなブックマーク - JavaScriptをまるごと。

2007 年 2 月 2 日 Comments off
カテゴリー: JavaScript タグ: