Debuginfo

思考とアウトプット

GW (self)Hackathon - Day1

May 2, 2015

今年のGolden Weekは長いので技術力のブラッシュアップのために一人ハッカソンを開始します。

ReactivecocoaとReactive Nativeのどちらをターゲットにしようか迷いましたが、React Nativeにすることにしました。理由はReactivecocoaのswift版がβ版でドキュメントがないので、初学者は絶対はまると思ったからです。React Nativeはまだまだβ版的要素が多いですが、先週少し触ったReactjsのようにこれから主流になりうる技術の習得ができると考えたからです。あとはReact Nativeの可能性を肌で感じたいと思ったからです。

またSublimeからAtomに乗り換え中なのでAtomも触りつつ進めてます。 Nuclide早く使いたい!

React Native

ドキュメントをやる。

Get Started section

ドキュメント通りで問題なし。エディタAtomにreactとjshintパッケージを入れました。

Tutorial

Fetchのところでもそうですが、ES6のArrow Functionが出てきて慣れてませんでした。

(row1, row2) => row1 !== row2,

これは

function(row1, row2){ return row1 !== row2 }

ですね。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

またListViewのdatasourceにcloneWithRowsなどが生えててドキュメントにないのもはまりそうです。とりあえず、こういうものだと思ってコーディングしていきます。ソースはgithubにありますね。Array<any>とか読めん。。

https://github.com/facebook/react-native/blob/master/Libraries/CustomComponents/ListView/ListViewDataSource.js

ES6 syntaxをみてみる

ES6の文法が普通に出てきます。下記のサイトでFeatureを復習しておきましょう。

https://github.com/lukehoban/es6features

React native + Flux

明らかにindex.ios.jsに全てを書こうとすると破綻しそうです。 awsome-react-nativeにあるgithub repoを眺めているとAppディレクトリで階層を作って入れています。その中身はFluxのcomponentsになってるようにも思います。

やってみないとわからないので、とりあえずやってみることにします。 ざっと見た感じで下記のレポジトリが良さげなので真似します。

https://github.com/mikkoj/NortalTechDay

分解していくとはできたのですが、watchをナイーブに実装していて初学者の私には少し辛いです。 なので、Flux implementationを調べるとたくさんあります。この世はFlux実装戦国時代ですね。

github.com

その中でもalt(alt.js.org)がドキュメントが充実してて良さそうです。 明日やってみることにします。(altって名前がいけてないですね。AltjsってAltertative JSのことをさしたり、altjsっていうライブラリもありますし。。)

React Native with CSS Framwork

これも1時間ぐらい試行錯誤してできるのか試してみました。ググっても何もでてこないので、初stackoverflowに聞いてみました。明日に持ち越し。

http://stackoverflow.com/questions/29999964/react-native-with-css-framework