React Native 2016 年の動き #JavaScript

React Native とは ?

一発目なので簡単な紹介から。 React.js と同様、仮想 DOM で UI を記述できるモバイルアプリ作成用の JavaScript フレームワーク。特徴としては次のようなものがある。

EcmaScript 2015
宣言的
コンポーネント指向
CSS ライクなスタイル指定
flow による型チェックサポート

公式で取り上げられている使用例は次にまとめられている。

思想は次のページで説明されている。これは去年の記事。

重要だと思う点をとりあげる。

keep development velocity: 開発速度を落とさない

One of the most painful things about our transition to mobile, though, is how much it's slowed down our development velocity.
When building on the web, we can simply save our files and reload the browser to see the result of our changes. On native, however, we need to recompile after every change, even if we just want to shift text a few pixels over on the screen. As a result, engineers end up working a lot more slowly, especially in a large codebase where compilation is especially burdensome.

モバイル開発への移行にあたって一番苦痛だったのは開発速度がどの程度落ちたのかということだった。
Web 開発では、単純にファイルを保存しブラウザーでリロードすれば結果が見えた。しかしネイティブではテキストの表示位置を数ピクセル変えるだけの変更であっても、そのたびに再コンパイルが必要になった。結果として、エンジニアの仕事速度は大幅に落ちた。特に大きなコードベースではその影響が大きかった。

learn once, write anywhere: 一度学んだらどこでも書ける

It's worth noting that we're not chasing “write once, run anywhere.” Different platforms have different looks, feels, and capabilities, and as such, we should still be developing discrete apps for each platform, but the same set of engineers should be able to build applications for whatever platform they choose, without needing to learn a fundamentally different set of technologies for each. We call this approach “learn once, write anywhere.”

我々は「一度書いたらどこでも動く」ということに価値があると思っていない。異なるプラットフォームは異なる外見、手触り、能力を持つ。そのため、まだプラットフォームごとに個々のアプリを開発すべきだと考えている。が、同じチームが、選んだプラットフォームすべてで、基礎的な技術の違いを学ぶことなしにアプリケーションを作成できなければならない。我々はこのアプローチを「一度学んだらどこでも書ける」と呼んでいる。

ニュース

4 月の Facebook の開発者向けイベント F8 で Microsoft の協力を得て Windows を、 Samsung の協力を得て Tizen をサポートすることを発表した。

が、現時点の状況が何も発表されていないので、来年に持ち越しかも。同じく F8 で発表するということもありうる。

今年の変更点

主に semver でいうマイナーバージョンが上がるが、まだメジャーバージョンが 0 なので breaking change 上等のアップデートが多い。

2 週間を目処にアップデートされている。たまに数日ずれる。

プラットフォームに依存しない各バージョンの変更点を大雑把に見ていく。 Android / iOS におけるエンハンスは着実に進んでいる。

プラットフォームごとの変更は他プラットフォームではサポートされていたコンポーネント、 props 、 API をサポートした、ブリッジを書きやすくした、パフォーマンスが向上した、などが多い。

0.18.0

2016/01/19 リリース。

react npm package に直接依存するようになった
- これまでは react-haste というものへの依存で一段かましていた

0.19.0

2016/01/30 リリース。

scrollTo メソッドが ListView に追加された
iOS9.2 / Xcode 7.2 へ環境移行された
テキストノードを除いて背景色の継承がなくなった

0.20.0

2016/02/16 リリース。

WebSocket の Origin その他のリクエストヘッダーを変更可能になった
カメラロール関連を Promise を使って処理できるようになった
テキストフィールドのオートリサイジングが追加された
Babel preset が定義された
画像以外のアセットをバンドルできるようになった

0.21.0

2016/03/02 リリース。

NavigationExperimental が追加された
- 既存の Navigator は状態を持ってしまっていたので、状態を持たずに redux などで一元管理可能なナビゲーション用のコンポーネント
- https://facebook.github.io/react-native/docs/navigation.html#navigationexperimental
dataSource が更新されたときに自動的に表示が更新されないよう変更された
色に数値を指定できるようになった
- 0x1a2b3c など
Navigator コンポーネントの onWillFocus / onDidFocus を使っても警告が出ないようになった
NetInfo にリスナーを登録した際、解除する関数を返すよう変更された
require ではなく import を使うようドキュメントに明示された

0.22.0

2016/03/21 リリース。

hot reloading 対応
- https://facebook.github.io/react-native/blog/2016/03/24/introducing-hot-reloading.html
ListView にカスタムした ScrollView を渡せるようになった
- 横スクロールする ListView などはこれで実現する
Touchable 系コンポーネントに disabled prop が追加された

0.23.0

2016/04/07 リリース。

bundle 時にログを出力しないためのオプション silent が追加された
何らかの Promise が reject された場合 console.error もしくは赤い背景でエラー表示するようになった
NavigationExperimental を用いて Navigator が実装された

0.24.0

2016/04/19 リリース。

いくつか iOS のタッチ / スクロールイベントが拾えていなかった点を修正
NavigationExperimental が改良された
- ページャーにアニメーションとジェスチャーがついた

0.25.1

2016/05/05 リリース。

react-native からではなく、 react から React API を import するよう変更になった
- View などコンポーネントは引き続き react-native から import する
- 本家 React.js の API が使えるため Learn once, write anywhere が徹底された
- 引き続き react-native からも import 可能
Chrome Developer Tools 以外の JavaScript デバッガーを使えるようになった
- REACT_DEBUGGER という環境変数に使いたいデバッガーの起動コマンドをセットしておくと使えるようになる
Image コンポーネントに prefetch メソッドが追加された
- あらかじめ画像をキャッシュしておくためのもの
- https://facebook.github.io/react-native/docs/image.html#prefetch
XMLHttpRequest の ontimeout と onerror をサポートした
- が、 fetch を使うのが推奨されている
- https://facebook.github.io/react-native/releases/next/docs/network.html

0.26.0

2016/05/19 リリース。

react-native から React API を import できなくなった
- react からでないと import できない 0.25.1 での変更が強制された
React 15.0.2 へアップグレードした
WebSocket でバイナリーデータを送受信できるようになった
react-native コマンドに --version オプションが追加された
react-native bundle サブコマンドに --reset-cache オプションが追加された
- 通常バンドルされたソースはキャッシュされるが、そのキャッシュを削除するオプション

0.27.0

2016/06/06 リリース。

ソフトウェアキーボード関連のイベントハンドラーの登録に DeviceEventEmitter を使っていたのを Keyboard を使うようになった
- https://facebook.github.io/react-native/releases/next/docs/keyboard.html
インスペクターから対応コンポーネントのソースファイルが開けるようになった
rnpm を取り込んだ

0.28.0

2016/06/22 リリース。

PullToRefreshView が廃止になり、 onRefreshStart / endRefreshing を使うよう変更になった
- 現在は ListView の onRefresh イベントを使う
- https://facebook.github.io/react-native/docs/refreshcontrol.html
パフォーマンスの問題から flexWrap: 'wrap' と alignItems: 'stretch' を同時に指定できなくなった
- alignItems は 'stretch' がデフォルトなので flexWrap: 'wrap' を使いたい場合他のものに設定する必要がある

0.29.0

2016/07/06 リリース。

Android ソースが変更
- MainApplication.java が追加になった
- 手動でのアップグレード方法は↑に書いてある
Android で password prop ではなく secureTextEntry prop のみを使えるように変更された
Android で Profiler Option が開発用メニューから削除された
StatusBarIOS が削除、 StatusBar に統一された
react-native コマンドにログを表示するためのサブコマンド log-ios / log-android が追加された
警告の黄色い表示にスタックトレースを表示するようになった
react npm package の依存が ^ から ~ に変更された
KeyboardAvoidingView が追加された
- https://facebook.github.io/react-native/releases/next/docs/keyboardavoidingview.html
カメラロールから動画を選択できるようになった
ソースをリロードするときにデバッグコンソールを消去するようになった
InteractionManager のタスクをキャンセル可能になった
- https://facebook.github.io/react-native/releases/next/docs/interactionmanager.html
flexbox で flexDirection に 'row-reverse' / 'column-reverse' を指定できるようになった
Text に lineBreakMode を指定可能になった
- 現在は ellipsizeMode
- https://facebook.github.io/react-native/releases/next/docs/text.html#ellipsizemode

0.30.0

2016/07/21 リリース。

VSCode をエディターとして使えるようになった
react-native コマンドから iOS シミュレーターのバージョンを指定できるようなった
zIndex が使えるようになった
- http://facebook.github.io/react-native/releases/next/docs/layout-props.html#zindex

0.31.0

2016/08/08 リリース。

rnpm の取り込みが完了した
- react-native link で rnpm 相当のことができる
enqueueJSCall に呼び出し完了時のコールバックを指定できるようになった
TextInput に onContentSizeChange が追加された
fetch で空ボディが返ってきたときのエラーメッセージがマシなものに変更された
Navigator が RTL をサポートするようになった
警告の黄色い表示のファイル名と行数をタップするとそのファイルを開くようになった

0.32.0

2016/08/21 リリース。

別ユーザーへの送信や SNS への投稿をするための Share API が追加された
ActivityIndicator コンポーネントに size prop が追加された
インスペクターにネットワーク通信の中身を表示する UI が追加された
- XMLHttpRequest や WebSocket の情報も表示可能となった
Navigator コンポーネントに popN メソッドが追加された
TextInput コンポーネントに dataDetectorTypes メソッドが追加された
- 入力内容のうち、電話番号やリンクなどを検出してジャンプできるようにする
React Native Packager のシンボリックリンクサポートが部分的に追加された
React Native Packager が動いていないときのメッセージがわかりやすく変更された

0.33.0

2016/09/09 リリース。

react-native コマンドに rn-cli.config.js のパスを渡す --config オプションが追加された
flex-grow, flex-shrink, flex-basis がスタイルに指定可能なプロパティとして追加された
単純なファイル変更の際のリロード時間が短縮された
スタイル指定時の flow による型チェックが厳密化された
複数のデバイスに対して run-android する際、すべてのデバイスに対して adb reverse するように変更された
アニメーション設定に onComplete が追加された

0.34.0

2016/09/23 リリース。パフォーマンス向上のための変更が多数なされている

RCT_NO_LAUNCH_PACKAGER 環境変数が設定されていると React Native Packager を立ち上げないよう変更された
タイマーがより精度の高いものに変更された
Jest メジャーバージョンが 15 に変更された
ポート番号がすでに塞がっているときにエラーコード 11 で終了するよう変更された

0.35.0

2016/10/11 リリース。

PushFromLeft アニメーションが Navigator に追加された
react-native init 時に Jest がインストールされるようになった
- skip-jest オプションでインストールさせないことも可能
package.json の browser に false を指定すると何もしないよう変更された

0.36.0

2016/10/25 リリース。

ScrollView に flexShrink: 1 がデフォルトで指定されるよう変更された
Keyboard API に dismiss メソッドが追加された

0.37.0

2016/11/08 リリース。

非推奨コンポーネントがいくつか削除された

削除	代替
AppStateIOS	AppState
ActivityIndicatorIOS	ActivityIndicator
IntentAndroid, LinkingIOS	Linking
SliderIOS	Slider
SwitchAndroid, SwitchIOS	Switch

Clipboard, NetInfo のコールバックインターフェイスが削除、 Promise で代替するように変更された
Button コンポーネントが追加された
- えっ、いまさら… ?
HorizontalSwipeJumpFromLeft アニメーションが Navigator に追加された

0.38.0

2016/11/23 リリース。ドキュメントのアップデートなどが同時になされている。

MapView を非推奨にし、 https://github.com/airbnb/react-native-maps を使うよう変更された
yarn 0.16.0 以上がインストールされている場合、 react-native init 時に yarn を使うように変更された