iOSDC 2017 Reject Conference days2での登壇資料になります。 https://iosdc-reject-conference.connpass.com/event/64236/ 平素はSwiftでiOSアプリの開発をしています。今年からReactNativeも多少嗜むようになり、その中で得た知見や実装の際で予め気をつけて置くと良いかと思うことや、UI構築の中での違いなどをざっくりとまとめたものになります。

1. SwiftとReactNativeで
似たようなUIを作った際の記録
2017/10/20
iOSDCRC day2 @ LODGE (Yahoo! JAPAN)
Fumiya Sakai

2. 自己紹介
・酒井 文也 （Fumiya Sakai）
・ever sense. inc エンジニア
・Designer → ServerSide Engineer → AppDeveloper
Accounts
・Facebook: https://www.facebook.com/fumiya.sakai.37
・Twitter: https://twitter.com/fumiyasac
・Github: https://github.com/fumiyasac
・Qiita: https://qiita.com/fumiyasac@github
Who are you?
Library (Personal)
Products (ever sense. inc)
祝！リニューアル

3. ReactNativeでUI構築の際に押さえておきたいポイント
SwiftからReactNativeに来た際に個人的に戸惑ったところ
その1. 遷移の管理と実装
その2. UI部品に関する考え方と実装について
その3. iOS / Androidでのクロスプラットフォームの対応
その他気をつけると良いトピックス
・Reduxの考え方
・UIComponentのライフサイクル
・データ永続化

4. その1. 遷移の管理と実装
ReactNativeはStoryboardがなく、遷移の実装は明確に違いが出る所
Swift ReactNative
・Storyboard & Segue
・push / pop (with UINavigationController)
・present / dismiss
・カスタムトランジション
・NavigatorIOS (iOS only)
・Redux & react-navigation
・Mobx
・参考資料（Mobx）: React Native with MobX — Getting Started
https://medium.com/react-native-training/react-native-with-mobx-getting-started-ba7e18d8ff44
・react-native-router-flux
・参考資料（Redux & react-navigation）: redux + react-navigation
https://qiita.com/kazuyuka76/items/6295e5ee282e5ba494a1
・参考資料（react-native-router-fluxのリポジトリ）: ※次ページに使用方法を解説
https://github.com/aksonov/react-native-router-flux

5. 例. react-native-router-fluxに関する解説
元になるComponentクラス（App.js等）に対応を記載してActionsを発火させる
※ 遷移の設計はSwiftでもReactNativeでも重要な部分
Reduxにどこまでロックインさせるかは要件次第
各コンテンツ用のコンポーネントクラス
との対応を記載しておく。
※ react-native-router-fluxは特にReduxを使わない
場合でも使用可能です。
各コンテンツ用のコンポーネントの中で、
進む：Actions.key名({ param1: xxx, … }) / 戻る： Actions.pop()
をonPress内に記載する。
・direction指定なし → push / pop
・direction=”vertical” → present / dismiss

6. その2. UI部品に関する考え方と実装
Storyboard・XibはないがWebのフロントエンド構築にイメージが近い印象
Swift ReactNative
・Storyboard & Xib
・UIViewController
・AutoLayout
・UIComponent
・Flexbox
・参考資料2: React Nativeを用いた初めてのiOSアプリ開発 : 選んだ理由と、開発で学んだこと
http://postd.cc/react-native-ios-app/
・参考資料1: ReactNativeのデバッグ方法
https://qiita.com/y_koh/items/3f2090e450269bc9f07c
→ 左に挙げたような見える場所やControllerがない
・HTML + CSSやAndroidのXMLでのレイアウト作成に近い
・見た目のデバッグはCmd + RやChrome Developer Tool使用
・Viewの重なりの順番が関わる際は少しわかりにくさも...
・Storyboard & Xibを活用して見た目を確認しながら調整
・Storyboard & XibやAutoLayoutでUI側のコードを追い出す
・Viewの重なりの順番が目でわかりやすい

7. 例1. 横方向にスライドするコンテンツがあるUI実装
横方向に一覧表示がされていて、縦方向に別のカテゴリの一覧を持つ
作成中のサンプル 実装のポイント
UITableViewCell + UICollectionView
ScrollView + FlatList
※今回のケースはサードパーティー製ライブラリは
使わない想定のものになります。
・FlatListはReactNative Ver0.43より追加
・iOSのUICollectionViewやAndroidのRecyclerViewに近しい
例. NETFLIX
Swift
ReactNative
※ReactNativeのScrollView, SectionList, FlatListは
SwiftのUIScrollView, TableView, CollectionView
同様に開発でよく使うもの

8. 例1. 横方向にスライドするコンテンツがあるUI実装
Swift及びReactNativeでのこのUI実装の組み立て方と設計
要素に分解
NavigationBar
（ポイント）UITableViewCell内にUICollectionViewを持つSwift
ReactNative
UITableView
UITableViewCell UICollectionView
View(Header相当) ScrollView
View(ScrollViewの中) FlatList
（ポイント）ScrollView内のViewにFlatListを展開
・参考資料2: FlatList (ReactNative official document)
https://facebook.github.io/react-native/docs/flatlist.html
・参考資料1: How to use the FlatList Component — React Native Basics
https://medium.com/react-native-development/how-to-use-the-flatlist-component-react-native-basics-92c482816fe6

9. 例2. メディアアプリであるような感じのUI実装
スクロールの位置の変化に応じてメイン画像やナビゲーションが動く
y = 0
実装のポイント
※今回のケースはサードパーティー製ライブラリ使 用
します。(ReactNative Ver0.48.3にて検証)
・使用ライブラリ：react-native-parallax-scroll-view
https://github.com/i6mi6/react-native-parallax-scroll-view
作成中のサンプル
ScrollViewDelegate + ダミーのHeader
パララックス表示のライブラリ
Swift
ReactNative
y < 0 y > 0
記事を表示するために下へスクロールすると画像が隠
れるタイミングに合わせてNavigationBarが出現
※ReactNativeのアニメーションはiOSのアニメー
ションとはかなり異なる部分（結構つらい...）

10. その3. iOS / Androidでのクロスプラットフォーム対応
iOS / Android間のアプリデザインの考え方による違いをどう埋めるか？
iOS Android
iOS Human Interface Guideline
https://developer.apple.com/ios/human-interface-g
uidelines/overview/themes/
Material Design
https://material.io/guidelines/
・Developing for Android vs. iOS: Material vs. Flat Design
https://medium.com/@jrejaud/developing-for-android-vs-ios-material-vs-flat-design
-fb341b05b0f0
一方でデバイスでデザインが異なるUIパーツでは用意されていないものもある
例）Header / Icon / ListView (UITableView) / Drawer / Spinner …
・xxx.ios.js / xxx.android.js とデバイス毎にデザインを分ける？
・両者のガイドラインの良いとこ取りをしたデザインにする？
デザイン的に両者の違いをどのようにして解決するか？
ReactNative純正のUIComponetでもAlertやProgressBar等は用意されている
https://facebook.github.io/react-native/docs/getting-started.html
iOS
Android
ヘッダーの違い

11. 例. よりネイティブアプリに近いUIをつくるもの
iOS / Androidのデザイン間の差異を良い感じでよしなにするもの
・参考資料:
NativeBaseをはじめとするUI関連のライブラリを活用してReactNativeでUIサンプルを作成した際の詳細解説
https://qiita.com/fumiyasac@github/items/12707f93f5c96fa3fc3f
NativeBase（ReactNativeのUIComponentを拡張してつくられている & ReactNative純正UIComponentと併用可）
UI Component Library参考：（iOS）
https://akveo.github.io/react-native-ui-kitten/#/home
UI Component Library参考：（Android）
http://react-native-material-design.github.io/
1つのコードでネイティブに近いデザインにできるメリット
デメリット スタイルの細かい微調整がしにくい場合がある
・公式ページ：https://nativebase.io/
・サンプル（KitchenSink）https://github.com/GeekyAnts/NativeBase-KitchenSink
公式ページの「Docs」内に実装例とデバイス毎の見た目例があります。
注意1：UI Component Libraryは併用しないように！
注意2：ライブラリでも難しい部分は自作するように！

12. その他気をつけると良いトピックス
Swiftでアプリ開発をする方がReactNativeを始める際に知っておくと良いもの
UIComponentのライフサイクル
Reduxの考え方
データ永続化
UIComponetクラスもライフサイクルを持つ。
iOS / Androidのネイティブのものとは異なるので注意！
・React component ライフサイクル図
https://qiita.com/kawachi/items/092bfc281f88e3a6e456
・iOSエンジニア必見！！iOSのレイアウトで押さえておきたいこと【総集編】
https://developers.eure.jp/tech/ios_layout_beginners/
アプリの状態管理をAction → Dispatcher → Store →
View の流れで1方向になるようにするArchitecture。
Swiftのライブラリでも「ReSwift」がある。
・Reduxの基本
http://developers.mobage.jp/blog/redux-basic
・ReSwift
https://github.com/ReSwift/ReSwift
データ永続化に関してもネイティブiOS同様様々
特にRealmが使用できるのは個人的に嬉しい。
・React Nativeにおけるローカルデータベースの考察
https://goo.gl/w4xHsh
・Realm (Javascript)
https://realm.io/docs/javascript/latest/

13. まとめ
UI実装に関してSwiftとReactNativeを比べると同じようでも違う部分が多い
UIの考え方がネイティブとかなり異なる部分があるが、近い UIを実現することは十分に可能
クロスプラットフォームならでは iOS / Android間のデザイン差異も考慮に入れる
アプリと相性を考える
※今回の資料のQiita詳細解説及びSwift版・ReactNative版は追って公開します（11月上旬見込み）
・UIComponentやライブラリ等をうまく活用することで良いUIが実現できる ※Animationは少し苦手
・遷移の考え方やUI構築の方法ががらりと異なる箇所もあるのでこの部分は注意が必要
・サーバーサイドが動きや振る舞いを決めてクライアントがそれに準ずるものなら相性は良いと思う。
・端末の機能をフル活用するもの（アプリ内課金・エクステンション・地図等）は結構大変になりそうな印象。
・iOS / Android両対応アプリを開発する際は、両者のデザインやUIの考え方を考慮すること
・デザインの差異が出やすいUIパーツの考慮を忘れずにすると良い

14. エバーセンスよりメッセージ
※お詫び：弊社はReactNativeでリリースしているプロダクトはありません。。。
弊社では現在、
「iOS / Androidエンジニア」
募集中です！
https://www.wantedly.com/projects/158484