生半可な気持ちでプログラマになった男日記

日々地獄の中をさまよっている糞雑魚プログラマの技術ブログ。テニスが好きです。

Osaka Mix Leap Study #23 - React Native 勉強会に参加してきました

9月19日に Yahoo! JAPAN の大阪オフィスで開催された Osaka Mix Leap Study #23 - React Native 勉強会に参加しました。

yahoo-osaka.connpass.com

確か台風の影響かなんかで振替開催された勉強会です。

参加してみて

正直今の段階で React Native を使うのはちょっとこわいなーって感じがしました。

主にそう感じた部分は以下の点。

  • ネイティブ側のビルドでこけたらデバッグがめちゃめちゃつらい
  • ネイティブ側の実装を触りたい場合はブリッジという機能を使うらしいが、 ネイティブ側のプログラミングができる人じゃないときつい
  • React Native はネイティブ実装と同等のことを実現するのが難しい場合がある(React Native パッケージの API の都合)
    • ある程度仕様をコントロールできる案件でないときつい

自分はネイティブのプログラムはあまりやったこと無いので、ネイティブ側でコケた場合は確実にハマる自信がある。

社内でネイティブエンジニアがいる場合は相談とかできるしいいかもしれないですね。

あと一番重要だと思ったのは、仕様をコントロールできる案件でないときついというところ。

今自分が働いてる職場でも React Native で制作しているアプリ案件があるのですが、仕様のコントロールが完全に先方なのでかなり苦労してました。

先方)ここの機能追加してくれー → 弊社)React Native で実装するのきついなぁ → 先方)知らんやん、やれ → 絶望

上記みたいなパターンのやりとりが弊社でも発生しててほんとしんどそうでした。

実際、ネイティブエンジニア総出でやってたりしてたのできつそうなイメージしかなかったです。

結果

Web サービスの体験を良くするためにアプリとして作りたいというなら採用してもいいかもと思いました。

たとえばシンプルなアプリ(ニュースアプリや掲示板アプリ)とか。反面、ネイティブの機能をよく使うアプリはどうかなと思います。カメラアプリとか。

WEBエンジニアの知識で iOS/Android の開発ができるところはとても魅力的ですが、 React Native の頻度の高いバージョンアップへの対応と、採用しているプラグインのバージョンアップ対応が追いつかなかったりするところが採用にブレーキをかけてしまう原因となってます。

ネイティブ周りの人材が豊富な企業などはネイティブでアプリ制作するのが無難かなーと思いました。

議事録

19:05-19:25 「React Nativeでモバイルアプリ開発をはじめよう!」 藤本 卓哉(株式会社Gemcook)

  • 代表兼エンジニア
  • AWS大好き

  • 対象の人

    • Reactわからん
    • ReactNativeが難しそうで取っ付けない人
    • 最近入門した人
  • ゴール

    • ReactNative でアプリ作りたいって思わせる
  • React復習

    • React ってなに? - UI構築のJSライブラリ(Angular/vueと同じ土俵)
    • 設計思想
      • 宣言的
        • jqueryは命令的、状態が合ってそれをどうするかっていうのがReact
      • コンポーネントベース
        • DOM + 処理で部品と考える
        • 状態管理が便利
      • 一度学べばどこでもかける
        • WEB/VR/アプリ 何でもかけるよ、これが一押しなんやで
      • 使う理由
        • 状態持った部品として使える
        • 仮想DOM の高速レンダリング
        • ライブラリの充実
        • ReactNative の存在、これがあるから Gemcook が使ってる理由
          • 好きな会社が使っている
          • Facebook製だから
  • ReactNativeとは
    • RN = ReactNativeのことだよ
    • ネイティブモバイルを構築するためのJSライブラリ
    • インスタ/スカイプ/ピンタレスト/ウーバーが使ってるよ
    • iOS/Android 一度にかけることが激アツ
    • ReactNative 使えばエンジニアの人材不足を回避できるよ〜
    • フロントエンド無双できるよ〜フルスタックなれるよ〜
    • ライバル
      • angular + native script
      • vue + weax
      • なんで ReactNative 選んだか
        • Facebook の歴史にあり
          • ハイブリットアプリの時代があった
          • 重すぎて株価暴落、でもHTML5 は悪くないよーてCEOがいってた
          • ReactNativeの開発スピードはすごい早いよ
          • ReactNativeのバージョンあがるとめちゃめちゃビルドこけるよ
            • 俺もつらかったからみんな記事あげてな
        • ビルドスピード早いからサクサク開発できる
        • 全体の学習コストを低下できる(各言語)
        • iOS/Android 両方ビルドされるからリリースまでの時間短縮できる
        • UI/UXの開発に時間さける
        • 有名企業が扱ってる安心感
        • デメリット
          • Native側のビルドでこけたらデバッグがめちゃめちゃつらい
          • 検索してもでてこないとかあったで
          • つまずくとしたらこのポイント
          • iOS/Android に新機能追加したらReactNativeの開発まちになる
          • bridge?という昨日を使えば回避できるらしいがしんどい
    • airbnb のソース見るとかなり勉強になるしわかりやすいよ〜
    • airbnb の撤退はマイナス的な撤退じゃないよ
      • RNの選択肢は最高だった
      • airbnbの成長がReactNativeの成長を上回っただけ
      • 人材確保の面などをふくめて

19:25-19:45 「WebエンジニアがReact Nativeで開発した気づき」 言上 和也(ヤフー株式会社)

  • アジェンダ
    • 導入の経緯
      • 開発案件
        • 訪日外国人向けのアプリ作りたい
        • 構造はシンプル・ニュースサイトだった
        • 4ヶ月ほどの開発期間
        • iOS/Android 両方ほしい
      • 俺Webしかやったことない・・社内にアプリ開発の知見もない・・・悲しい
      • 上司が ReactNative を提案
      • バージョン0.Xだったから導入にすごく不安だったけど学習コストの面考えて採用した
      • learn once,write anywhere の体現がよかった
      • 短期間でのJava/Swiftをやること考えるとまだましだった
      • 1ヶ月で企画・学習
      • 1ヶ月半でiOSリリース
      • 1ヶ月でAndroidリリース
    • 実装できた理由・辛かったとこ

      • 自分が優秀だったから実装できたわけではない
      • ポイント
        • learn once,write anywhere の体現
          • ReactとReactNativeのライフサイクルが同じ
          • iOS/Androidの違いなし
          • OSSが使用できる
            • 特にデータフロー周りが充実してた
              • redux,redux-saga,redux-loggerなど
        • WEBの知見がいかせる

          • npm 使えることの楽さ
          • DOM操作以外のOSSは基本使える
            • fetch,date-util,dotenv,loadash
          • レイアウトがCSSで調整できる、flexboxでレイアウトされてるよ
          • ReactNativeの足りない部分は簡単に使えるように外国人がライブラリ作ってくれてる
        • OSSを使った効率向上

          • 体感的に7~8割共通化出来た
          • 画面周り以外は共通化できる
    • WEBエンジニアから見たReactnative

      • 想像以上にコードの共通化できる
      • ホットリロードが便利
      • web知見活かせる
      • react知ってるとだいたいできる
    • 手放しにおすすめはできません
      • はまるとやばい、抜け出せない
      • モバイルの知見は必須(ネイティブ皮がもってる昨日など)
      • 各モバイルの開発環境は必要
      • deploy周り(React の知識では補えない)
      • UXの違い
      • 凝った開発するとネイティブすぐさわらなあかん
      • バージョンアップがすごいはやい間隔でされる
      • 公式のバージョンアップでライブラリ開発者がおいつけずOSSの更新とまっちゃう
      • OSSライブラリでiOSちゃんと動いてるけどAndroidが弱かったり、その逆もしかり。。。ということがようある
      • とにかく deploy まわりがつらすぎた
      • ReactNativeのバージョンアップがつらすぎる
      • ドキュメントが英語
      • エラーログで探しても情報が出てこない
      • ある程度仕様をコントロールできないとつらい、代理店様様ではやばい
    • ReactNativeに合う案件
      • こだわり<スピード
      • 要件シンプル
      • ミニマム機能で早くリリースしたい
      • iOS/Androidの開発が必要

19:45-20:05 「Gemcookで使うReact Nativeで絶対使えるライブラリ」 西野 竣亮(株式会社Gemcook)

  • アジェンダ
    • ライブラリとは・何ができる?どこまでできるの?部分
      • React単体では動かないからCreateReactAppを実行するよ
        • Reactを立ち上げるための準備を一通りしてくれるよ
      • 自分らがつくってるものはライブラリの寄せ集め
    • 使えるライブラリ
      • ReactNativeのライブラリの特徴
        • ルーティング(画面制御系)
          • ReactNavigation
            • 細かいとこまで作り込めるよ
            • StackNavigator
              • 画面の重なりを表現するルーティング、iOSでよくあるやつ
            • TabNavigator
              • よくあるやつ、ただのタブ
            • DrawerNavigator
              • 開発途中で安定してないので今は使わないほうが良いよ
            • Fluid Transitions for React Navigation
              • かっこええ演出つくれそうやで
          • react-native-router-flux
            • めちゃめちゃ簡単やからひとまずルーティングしたいだけならこれも使えるよ(案件ではおすすめできないかも)
        • Native機能系(カメラとか)
          • react-native-splash-screen
            • componentdidmountでスプラッシュスクリーンの制御できる、簡単に使えるよ
          • react native camera
            • カメラ使いたい時はとりあえずこれ
            • 写真・動画・顔認証・バーコードスキャン機能あるよ
          • react-native-maps
            • propsを流し込むだけで、Mapを表示できる
            • 導入部分で挫折する人多いけど、高機能だからとてもおすすめだよ
            • MAP使ったアプリを作る時はおすすめ
            • テーマも選択できるよ(ダークとか)
        • UI系(今回紹介するのは簡単なやつやで)
          • NativeBase
            • ReactNative界のBootstrap
            • Androidはマテリアル
          • react-native-vector-icons
            • とりあえずいれとけ
          • react native blur
            • 画像系?
          • react-native-lightbox
            • ページ遷移なしで画像拡大機能あるよ
          • lottie for react native
          • react-native-app-intro
            • オンボーディングを構築できるライブラリ
            • 鬼簡単に実装できる
            • おすすめやで
    • 自社OSSの紹介(githubでも公開してるよ)
      • ESLint-config-gemcook
      • gemcook/table
      • gemcook/pagination