(cache) 2週間半のReact Nativeアプリ開発を振り返る

ここ2週間ちょっとReact NativeでiOSアプリ書いてました。サーバサイドをメインでやってきた自分にとっ面白い技術で、今後も趣味で使ってみたいなと思えているのでTipsや所感を残しておきます。

選定理由

3人でとあるアプリを開発しているのですが、自分も含めてサーバエンジニア2人、iOSエンジニア(Webフロントとかもできる)1人の状態でした。開発期間が短いわりに画面数の多いアプリケーションの開発だったので、JS経験のある自分もネイティブに加われるようReact Nativeを検討。苦労しそうな部分は早い段階で、検証しておきました。

カメラ撮影
iOSライブラリとReact Nativeのブリッジが問題なく作れるか確認
- 画像のフィルタ処理(iOSのCIFilter)用ライブラリをReact Nativeから呼び出した
動画再生
APIクライアント(fetch apiが使える)
Firebase JavaScript SDK(Firebase Authenticationを使用)

開発を始めて強く思ったのは、やっぱりネイティブの知識があって気軽に質問できる人が近くにいないと大変だったなと思います。幸いiOSに詳しいチームメイトがReact NativeとiOSのブリッジを書いてくれて助かった。

一方で、アプリケーションのほとんどの画面はAPIを叩いてレスポンスを表示するだけだったりサーバに何か文字列を送るだけだったり、意外とJavascriptの範囲で出来ることが多くてサーバサイドばかりやってきた自分もがっつりiOSのアプリ開発が手伝えます。

普段あんまりネイティブアプリケーションの実装とかを意識することはなかったんですが、スマホのアプリを立ち上げるとコンポーネントの組み方を考えるようになったり、細かいアニメーションに意識がいくようになりました。

Tips

エラーハンドリング・状態管理

f:id:nwpct1:20170528191247g:plain

React Nativeのコンポーネントや状態管理の設計は、ReactでSPAを作るのと感覚的にかなり似ているのかなと思っています。今回は次のような手順で管理しました。

コンポーネントの状態を管理するStoreを用意このStoreでは、各ComponentIDに対して以下の4つの状態とエラーメッセージをFieldが存在する。

BEFORE_LOADING : データをフェッチする前(コンポーネント生成時に、この状態に設定するActionを発火)
LOADING : データをフェッチ中 (ぐるぐるのローディングアイコン表示)
COMPLETE : 無事にデータを読み込みできている状態
ERROR : データのフェッチ中に何かしらのエラーが発生している。コンポーネントはこの場合エラーを表示

各コンポーネントは次の手順で表示を変える。

constructorで自分自身を示すIDを生成
各Componentに上のStoreの情報を伝搬させる
componentWillMount で、自分自身のIDをstoreに登録(Storeでは BEFORE_LOADING にセット)
componentDidMount で、データのフェッチをするActionを発火。自分の状態を LOADING に設定するActionも発火
200番のレスポンスが帰ってきたら
- COMPLETE に設定するActionを発火
何か問題があったときは
- ERROR に設定するActionを発火
- エラーメッセージを登録する
- エラー情報を表示するModalアニメーションを表示するActionを発火
コンポーネントは自分自身の状態が ERROR ならエラーメッセージを表示、 COMPLETE なら受け取ったデータを表示

今回選んだ、エラーハンドリングや状態の管理方法はかなりうまく機能していた気がするので今後も積極的に使っていきたい。

入力欄をキーボードの出現に合わせて動かすアニメーション

書くか悩んだのですが、結構多くのアプリケーションで必要になる処理かなと思ったので載せておきます。必要になった際は参考にしてください。

f:id:nwpct1:20170528193253g:plain

次のようにkeyboardの入力に応じて高さの変わるコンポーネントを用意

import React, { Component } from "react";
import { Animated, Keyboard } from 'react-native';

const defaultHeight = 48;

export class AvoidableKeyboard extends Component {
    constructor(props, context) {
        super(props, context);

        this.state = {
            height: new Animated.Value(defaultHeight)
        };

        this.keyboardWillShow = this.keyboardWillShow.bind(this);
        this.keyboardWillHide = this.keyboardWillHide.bind(this);
    }

    componentDidMount() {
        Keyboard.addListener("keyboardWillShow", (e) => this.keyboardWillShow(e));
        Keyboard.addListener("keyboardWillHide", (e) => this.keyboardWillHide(e));
    }

    keyboardWillShow(e) {
        Animated.timing(this.state.height, {
            toValue: e.endCoordinates ? e.endCoordinates.height : e.end.height,
            duration: e.duration
        }).start();
    }

    keyboardWillHide(e) {
        Animated.timing(this.state.height, {
            toValue: defaultHeight,
            duration: e.duration
        }).start();
    }

    render() {
        return (
            <Animated.View style={{ flexBasis: this.state.height }}></Animated.View>
        );
    }
}

あとは flexGrow と flexBasis プロパティをうまく使って表示します。

(省略)

export class CommentListComponent extends Component {
    render() {
        (中略)
        return (
            <View style={{ flex: 1, backgroundColor: "#FFFFFF" }}>
                <ScrollView style={{ flexGrow: 2 }}>
                    {comments.map((c) => <CommentItemComponent key={c.id} comment={c} />)}
                </ScrollView>
                <View style={{ flexBasis: 50, flexDirection: "row", alignItems: "center", borderBottomColor: "#ddd", borderTopColor: "#ddd", borderBottomWidth: 1, borderTopWidth: 1 }}>
                    <TextInput
                        style={{ height: 50, flexGrow: 1, fontSize: 15, paddingLeft: 10 }}
                        onChangeText={(text) => this.setState({ text })}
                        value={this.state.text} />
                    <TouchableWithoutFeedback onPress={this.postComment} disabled={this.state.text.length === 0}>
                        <View>
                            <Text style={[{ fontSize: 15, fontWeight: "bold", paddingRight: 10 }, postTextStyle]}>投稿する</Text>
                        </View>
                    </TouchableWithoutFeedback>
                </View>
                <KeyboardSpace />
            </View>
        )
    }
}

今回使ったライブラリ

使ったライブラリも載せておきます。ライブラリ選定の際に参考にどうぞ。

react-native-focus-scroll

ScrollViewの中で今ディスプレイに表示されているアイテムを知る方法がなかったので作成・先ほど公開しました。

Vertical Scrolling	Horizontal Scrolling

今回はiOSアプリのみの開発だったので、公式の NavigatorIOS を最初つかっていたのですが、navigate時に渡したpropsが変化しても値が更新されないようです(NavigatorIOS optimizations break functional components · Issue #13539 · facebook/react-native · GitHub)。これだと困るシーンがあったのでreact-navigationを使用しました。react-navigaitonのscreenPropsでstoreの情報とかを伝播させています。

f:id:nwpct1:20170528184130p:plain

見た目もカスタマイズ出来る範囲がNavigatorIOSより多そうです。

react-native-vector-icons

TabBarIOSのItemに画像を入れようとすると、うまくリサイズできなくて困っていました。このライブラリはTabBarIOSに組み込むためのComponentも提供してくれています。

Usage with TabBarIOS

react-native-camera

カメラで使用。ここは全部チームメイトがやってくれて、自分は使い勝手がわからないのですが無事動いてくれています。

react-native-video

動画の再生で使用。解説は特にないのですが、muteやpauseもpropsで指定できて使いやすかったです。

firebase

認証はFireabase Authenticationを使用しました。 JS SDKが問題なく動きます。

Firebaseから取得したJWTは、サーバ側で検証するのですが、SDKはJavascriptとかPython用が提供されています。 Go用のSDKはないので、こちらの説明に従って自分で検証処理を書く必要があります。検証用のコードを公開したので、ご活用ください。

github.com

react-native-user-defaults

iOS限定ですが、JWTの保管はUser defaultsで行いました。

苦労したこと

スタックトレースについて

苦労した点はいくつかありますが、スタックトレースはReact Nativeを採用するか悩んでいる人の多くが心配しているかもしれません。実際スタックトレースから情報がなかなか読み取れずデバッグが大変なシーンはいくつかありました

実際に発生したエラーのスタックトレースを3つほど載せておきます。

エラー1	エラー2	エラー3

下のエラー1は、バンドル後のJSファイル jsBundle.js 内での行数が表示されてしまっているケース。エラー2とエラー3は、Objective-Cのブリッジ等の部分でエラーが起きてそちらのスタックトレースが表示されてしまうケース。自分の書いたJavaScript

再現性のないバグ

React Nativeに限らないかもしれませんが、再現性のないバグが比較的多く発生してしまた気がします。自分の実装がまずかった場合も多いかと思いますが、決して成熟しきった技術ではないので、フレームワークやライブラリのバグを疑う回数も多いです。

再現性の無いバグについては自分も理解できていないのであまり多くは紹介しませんが、文字通り時間が解決してしまったケースもあります。ほとんど参考にならないかとも思いますが、おかしな挙動に遭遇したときに自分がとりあえずやっていることを残しておきます。

git cleanでgitの管理対象外のファイルを消して、ビルドし直す
- git clean -x -d -f -e node_modules -e .idea
- 何か変更を加えてエラーが出たとき、戻してもまだビルドできないとかがたまにあります。開発序盤はとりあえずこれで乗り越えました
- 1週間もしてくるとだいたいどの辺に問題があるのか感覚的にわかってきて、git cleanを使う回数が自然と減ってきた気がします
自分が加えた変更が反映されずReloadしてもずっとエラーを吐き続ける場合 (実機Buildはうまくいくけど、Simulatorで動かない場合もある):
- iPhoneのSimulatorのCacheを消す。git cleanも実行
- Websocketサーバを一度止めてから react-native run-ios
- どこにキャッシュが残っているのか、これでも何故か以前のコードがSimulator上で実行されてしまうときがありましたが、気づいたら直っていてもう再現できないので自分もよくわかっていません

サーバサイドのアプリケーションを開発していると、多くのバグは掘り下げることで突き止めることができる気分になれますが、iOSは自分には知らないことが多すぎてとにかく色々手を動かして条件を変えてうまく動くことを祈ることが多かったです。

開発をやってみて

冒頭でも書きましたが、カメラやフィルター処理といったネイティブの機能をガリガリ使うところ以外は自分でもかなり開発に参加できます。また普段使っているスマートフォンのネイティブアプリケーションもネイティブの機能は使わずAPIの通信と表示のみで成り立っている画面も多いなと感じました。スマートフォンの細かいアニメーションにも意識がいくようになり、色々とこれまで感じることのなかった面白さがあったかなとおもいます。

また趣味で使ってみたいですね。終わり。

Learning React Native: Building Native Mobile Apps With Javascript

作者: Bonnie Eisenman
出版社/メーカー: Oreilly & Associates Inc
発売日: 2017/11/25
メディア: ペーパーバック
この商品を含むブログを見る

c-bata web

@c_bata_ のメモ。python多め

2週間半のReact Nativeアプリ開発を振り返る