React Native: Up and Running

About Me

Leverages 新卒1年目(27)

内定者インターン時から

teratail 開発チーム

大学在学時に

暗号理論・機械学習

言語処理の研究に従事

アルバイトで
フロントエンドを中心に

開発経験を積む

 

React Native初めてみたきっかけ

  • Androidの複数APIレベル・デバイス対応がむずいので楽になればと
  • swiftでやってもいいけどAndroidと協調開発するの難しそう
  • WebからもAPIを共通化したいという要件があり、処理をReactのロジックに転用できそうだという(結果として淡かった)期待

iOSで陥る罠

  • iosでは、パッケージやファイルの参照情報などがxcodeのプロジェクトファイルに紐づく(チームで参照場所やパッケージ管理のやり方をルール化する必要がある)
  • 最新版だとPodfile設定にだいぶ変更があり、DLLのリンクなどを自分で修正を加える必要がある。(つまりネイティブの知識が必要になる)

Firebase設定時の

参照ファイルの位置を

ちゃんとチームで統一する

Androidで陥る罠

  • build.gradleの設定をちゃんと理解する必要がある。(つまりちゃんとネイティブの知識が必要なる)
  • 最新版のreact-native対応事例がほとんどないので、頑張って見つけてきて参考にするしかない。(https://github.com/ueno-llc/react-native-starter)
buildscript {
    repositories {
        jcenter()
        google()
    }
    dependencies {
        classpath 'com.android.tools.build:gradle:3.1.0-alpha09'
        classpath 'com.google.gms:google-services:3.1.2'
        classpath 'com.palantir:jacoco-coverage:0.4.0'

最新版のgradleへの設定更新

WEBで陥る罠

  • Javascriptの転用はできるが、コンポーネントはReactNativeと、Reactでほぼ別物。スタイリング方法も全然違う。
  • なので、バックエンドの共通化のみで、クライアントの方は、moduleを上手く作れないと、再実装過程が多くなる
    (https://facebook.github.io/react-native/docs/components-and-apis.html)

Native Moduleの追加

APIに登録されていないUIはReactNativeから呼び出せるWrapperを作って対応できる(つまり、ネイティブの知識がい(ry)

  @ReactMethod public void show(String message, int duration) {  

  Toast.makeText(getReactApplicationContext(), message, duration).show();

   }

 

Java MethodをReact Nativeから呼べるようにする設定

Pros.

  • Webブラウザのデバッグツール、HMRが使えるので超デバッグがやりやすい。
  • テストもJestというフレームワークが入っているため、簡単にテストを作れる。特にUIの変更が正しいかどうかの検証などちょっと変わったテストもできる。
  • ViewのライブラリがReactNativeのお作法どうりであれば、かつnpm iで共通化してインストール出来る形で公開されていると、転用がとてもやりやすい。(ネイティブのラッパーパッケージ作るのは大変なので作ってくれた人に感謝)(NativeBase: https://nativebase.io/)
  • 初期学習コストはかかるが、JSとネイティブアプリ両方に慣れてる人からすると、両方のネイティブアプリを書くより、遥かに早く実装が出来ることは確か(ただし、フレームワークより高度なことをやろうとすると結局ネイティブの知識が必要)。
  • fastlaneが使えるので、デプロイアカウントが共通化できる。

結論

  • 入門から始めるとマルチプラットフォーム開発の手間とそんなに変わらなくない?
  • Viewのフォーマットが共通なのは、Android開発者からするとマルチデバイスAPIレベルの開発の手間が省けて、楽にはなりそう。
  • API以外の処理を実装しようとすると途端に深淵が広がる。
    (メリデメがちゃんとある)
  • ノウハウを一度身に付けると転用がしやすく早く作れそうな雰囲気をつかめてきた。けど、Reactしかかけない人が簡単にネイティブを書けるようになるようになるわけでもなく、早くマルチプラットフォームで作れるようになるには、Nativeの知識が必要になる玄人向けのフレームワークであることを実感。
  • Nativeを全く触ったことない人がNativeを一気に理解するためにチャレンジして深堀していく用途であれば、割と楽しめます。

deck

By tkow

deck

  • 533