初見から実務でReact NativeやったAndroidエンジニアが社内LTで所感を共有しました
こんにちは、React Nativeエンジニアの@kiriminです。去年の末くらいからReact Nativeでの開発案件に携わっていまして、ある程度形になってきたので、Webフロント開発の経験がないAndroidエンジニアがReact Native案件にいきなりJoinして感じた事やReact Nativeでの開発の雰囲気などについて週次で開催している社内LT会で共有しました。
ネイティブエンジニアチームによるReact Native開発案件の一例として共有したいと思います。
TL;DR
・React Nativeの学習コストはかなり低い
・最新のJavaScriptでの開発はそれなりに快適
・思ったよりはよく出来ていてAndroidとiOSをあまり意識せず同時に実装出来るのは本当
・ただしネイティブと遜色ないデザインを実現するにはかなりの努力が必要
・Reduxは面白いけど難しい
AndroidエンジニアがReact Nativeの実装が出来るようになるまで
React Nativeに関しては本当に初見でいきなり実戦投入という感じだったのですが、基本的にシンプルなフレームワークなので、それほど苦労せずにキャッチアップすることが出来ました。
特にReact Nativeに関する技術書を読んだりという事もなく、公式のチュートリアルを軽く眺めつつ、実際にIssueをこなしながら分からない事を随時ググり少しずつ理解していくスタイルで十分に対応可能でした。
これは元々プロジェクトの基盤が実装済みであった事が大きいと思うので、いきなり0から1人でプロジェクトを立ち上げていく場合はもう少し事前の学習が必要かもしれません。
React-Nativeで開発するために必要なスキル
React NativeはWeb技術ベースのシンプルなフレームワークでAndroidとiOSを同時に開発出来るというアドバンテージがある一方で、業務としてそれなりの品質/機能を持ったものを開発しようとすると幅広いスキルセットが必要になる印象です。
・ES2015以降のJavaScriptに関する基本的な知識
・CSSの基本的な知識
・npmやnodeなどWebフロントの環境構築やCUIに関する基本的な知識
・React-NativeやOSSのDocs、Issue、Stack Overflowなどの英語情報を抵抗なく読みに行けるレベルの英語力と検索力
・Android/iOS両プラットフォームの機能差分や開発プロジェクトの構造、実装手法の理解
これらのスキルセットを満たせるチーム、例えばAndroid/iOS開発経験のあるエンジニアがいる+フロントエンドエンジニアの割合が多い組織の場合や、プラットフォームに依存しないフルスタックなエンジニアが多く在籍している場合などで、AndroidとiOS別々にロジックを持ち実装するよりもチーム全員で一つのプロジェクトに全力でコミットした方が効率が良さそうだと思えるような体制であればReact-Nativeでの開発は向いてるかもしれません。
もしくは、個人開発やプロジェクトにリソースを割けるエンジニアが1人しかいない場合で、そのエンジニアがとても強い場合なども1人で両プラットフォームの実装をやるよりもReact Nativeを使った方が効率的なんじゃないかなぁと思います。
逆に、あまりスキルレベルの高くない組織で安易に「React-Nativeに移行すればリソースが半分で済んでお得!!!」みたいな気持ちで初めてしまうと辛い事になるような気がします。
開発環境まわりについて
スライドでは書き忘れましたが、React Nativeの辛いポイントとして、開発環境が非常に不安定であるという事があります。
何かというとエラーで起動出来なくなったりビルドに失敗したりするのですが、何が原因で落ちているのか読み取れない事が多く、「npm installとか全部やり直したら直った」「タスクをkillして実行し直したら直った」「コンソールを起動し直したら直った」「Macを再起動したら直った」みたいな事が頻繁に発生します。
また、JavaScriptという言語とReact Nativeのネイティブコードに変換するという性質上、アプリがクラッシュした時も何が原因なのか掴むまでに非常に時間が掛かる事がよくあります。
このあたりは徐々に改善されていくのではという気もしますが、現状では非常に環境が壊れやすいため、作業の工数が見積もりにくい、大人数での開発でトラブルが起きやすいなどの欠点を感じました。
Reduxについて
スライドの中でも言及していますが、React Nativeのキャッチアップで一番苦労したのがReact+Reduxの仕組みを理解することでした。
そこで、Reduxについて自分が理解するために読んで参考になったエントリの一覧を共有したいと思います。(一応順番に並べています)
「チュートリアルそれぞれ一周した!Reactは何とか理解できたが, Reduxがさっぱりわかんねぇ! 」 ぐらいの人向け。自分もまだ未熟なので理解の確認のために書いた。…qiita.com
Reactからの流れで、組み合わせての運用例の多いReduxを勉強してみました。 Fluxの概念、Reduxの基本機能、Reactとの連携について公式のドキュメントを中心にまとめています。…qiita.com
先日自社のエンジニアイベントで「KotlinとReduxを Android に導入したら」という話をしてきました。質疑応答や懇親会でいろんな質問をいただいたのでここに残しておきます。…muumuutech.hatenablog.com
問題 redux wayで書いていくと |_ containers |_ constants |_ reducers |_ actions とかって大量の登場人物が登場してきてうざい。わかるけど複雑になります。…qiita.com
Reduxにおけるreducer分割とcombineReducersについて - Qiita こちらの記事を読んで、私も(Redux は勉強し始めたばかりだけど)似たような感想を持っていて 最後のコメントに書かれていた reselect…qiita.com
概要 React + Redux のサンプルを使って、Reducer の作成と動作の確認をします。 準備 Action 編の続きに modal のクラスを追加したコード(tag/init_reducer)から行います。 ※…qiita.com
今後やっていきたいこと
今、自分の携わっているプロジェクトではある程度メンバーに知見が貯まってきたということもあり、大規模なリファクタを行う計画を立てています。
特にUIロジックやビジネスロジックをどう扱うかなどはAndroid開発での経験も踏まえてじっくり考えてみたいと思っています。
また、React NativeでモダンなAndroidのUIを遜色なく実現するためにどうすればいいのか、なども試行錯誤していきまた知見を共有出来たらなと思います。
We’re hiring!
AnyPayでは各種エンジニアを絶賛採用中です。皆様のご応募をお待ちしております!