React NativeとFlutterでアプリを開発して見えた今と未来

React NativeとFlutterでアプリを開発、リリースを体験して感じたことやアーキテクチャ、開発体験、ツール、コミュニティなどの観点からそれぞれのフレームワークの現状と今後について話します。

Transcript

1. React NativeとFlutterで アプリを開発して見えた 今と未来 FUSIC TECHLIVE 株式会社Fusic 浦田　大貴
2. 自己紹介 浦田 大貴 Twitter: @daiki7nohe 出身: 青森県 福岡在住: 4年半 趣味: 個人アプリ開発 興味のある技術: Flutter/Firebase/Next.jsなど
3. 2015年頃 Titaniumに出会う 2018年頃 Ionicで 初めてアプリをリリース 2020年 React Nativeで アプリリリース 2021年 Flutterで アプリ2本リリース クロスプラットフォーム経歴
4. https://speakerdeck.com/7nohe/webkai-fa-zhe-falsetamefalsekurosupuratutohuomuapurikai-fa
5. 発表内容 React NativeとFlutterでアプリ を開発して見えた今と未来 それぞれのフレームワークについて 01 アーキテクチャの違い 02 開発における各フレームワークの特徴 03 これからのReact NativeとFlutter 04
6. 01 それぞれの フレームワーク について
7. React Native Facebook製 2015年3月リリース iOS/Android（Web/Desktop） Flutter Google製 2018年12月リリース iOS/Android/Web/Desktop/組み込みデバイス （スマートディスプレイなど） JavaScript（TypeScript） Dart
8. React Native 新規でアプリ全体をRNで作っても良いし、既存 のiOS/Androidアプリに少しだけでも使える （Flutterもできるが開発段階） JSで書いて、ネイティブUIとして描画される Flutter ビルトインのMaterial Designで表現豊かな美し いアプリができる ネイティブパフォーマンスを提供 Learn once, write anywhere Flutter is Google's UI toolkit for building beautiful, natively compiled applications for mobile, web, desktop, and embedded devices from a single codebase. Fast Refresh → Hot reload Fast development → Hot reload
9. スライドリンク: https://speakerdeck.com/chuganzy/react-native-matsuri-2021 ビジネスの成長速度に対して時間と人が足りない → React Nativeを採用
10. 引用元:「ReactNative とFlutter パフォーマンス比較」 https://recruit.gmo.jp/engineer/jisedai/blog/reactnative-vs-flutter-performance/ ビルド実行時間 アプリサイズ アプリ起動時間 メモリ使用量 React Native/Flutter/KotlinでHelloWorldアプリ（Android）の パフォーマンス比較
11. React Native Flutter
12. 02 アーキテクチャ の違い
13. JS Bridge Services （センサー、カメラなど） 画面表示 React Native JSON OEM Widges アプリ側 プラットフォーム側 （iOS/Android）
14. React Native の特徴 JS-Native間はBridge経由でJSONメ ッセージを非同期でやりとりしている Hermesを使うとパフォーマンスが良 くなる（JSがバイトコードにプリコ ンパイルされる） アプリサイズはネイティブよりも大き くなる
15. Native Code Widgets Services （センサー、カメラなど） 画面表示 Flutter Platform Channels アプリ側 プラットフォーム側 （iOS/Android）
16. Flutterの特徴 Skiaという独自の2Dレンダリングラ イブラリを使っている コンパイルされてネイティブコードで 動いている アプリサイズはネイティブよりは大き くなる
17. 共通の特徴 パフォーマンスはネイティブよりは劣り、 開発が進んでいくとより顕著に表れてくる ことがある ビルド後のアプリサイズもやはりネイティ ブに比べると大きくなる
18. 03 開発における 各フレームワーク の特徴
19. React Native JavaScript/TypeScript Hot reload Flutter Dart Hot reload VS Code/Android Studio and IntelliJ （Emacs） npm JSが書けるエディタならなんでもOK（公式はVS Code推奨） Pub typescriptlang.org/play dartpad.dev snack.expo.dev flutter.dev OS標準のデザイン マテリアルデザイン
20. 引数受け取り 状態管理 ボタンイベント 変数表示
21. React Native Android iOS
22. Flutter Android iOS
23. React Native で感じたこと Web開発で使い慣れた豊富なライブ ラリが使える安心感 TSの場合は型定義されてないライブ ラリがある デバッグはreact devtools使えるので Reactやってればすんなり開発できる
24. React Native で感じたこと ExpoのManaged workflowから外れ なければ割と簡単に開発できる ExpoのOTAが便利 Expo Goの開発体験が割と良い とにかくExpoを使うと色々と楽
25. Expoについて ExpoはReact Nativeアプリを効率よく開発するためのツールやサービスを 提供するフレームワーク&プラットフォーム Expo CLI Expo SDK Expo Go EAS (Expo Application Services) Snack
26. すでにストアで公開しているアプリ更新できる裏技 仕組みとしてはすでにアプリ起動時に裏で動いているJSコード を新しいコードをダウンロードしてきて差し替えるイメージ （ア◦パ◦マ◦が顔だけ交換するみたいな） 時間のかかる審査をスキップしてユーザーに気付かせることな くアップデートでき、まさにWebアプリの感覚 ただし制限はある（SDKバージョンをあげられない、アイコン やスプラッシュスクリーンが変更できないなど） ExpoのOTA(over-the-air)アップデート
27. Play Store/App StoreでダウンロードできるExpo提供 のアプリ Expo Goから開発しているアプリを動かせる（コード レス） Expo Goでは試せない機能などはある（プッシュ通知 など） Expo Go
28. Flutter で感じたこと Dart自体をしっかり学習せずとも使いな がら覚えていける（Java/C#に似てい る） コード繋いで開発は地味に不便 ライブラリは発展途上中のものもある Googleサービスのライブラリは充実 Androidのサポート早め Flutterのバージョン上がるの早め
31. Flutter で感じたこと なんとなくでも割と綺麗なアプリが作れ る flutter_hooksでReactっぽく書けたの がよかった ドキュメントがわかりやすく充実してい る パフォーマンスも良い感じ アニメーションもライブラリなしで簡単 に実現できた
32. flutter_hooksの例 useState
34. 両方 で感じたこと Hot reloadの開発体験が良い ネイティブ側の知識はやっぱり必要 （info.plist/Android.xml） プラットフォームによる分岐処理は発生 する 本家がアップデートするとライブラリ対 応を待たないといけない iOS/Androidどちらか一方の開発だけで も生産性は良さそう
35. 04 これからの React Nativeと Flutter
36. React Native 9.8万 stars (GitHub) 1869 Posts (dev.to) Flutter 13.1万 stars (GitHub) 2181 Posts (dev.to) 15.8万 Followers (Twitter) 106,367 questions (Stack Overflow) 12.2万 followers (Twitter) 103,150 questions (Stack Overflow) 8.3万 members (Reddit) 8万 members (Reddit) （2021/10/06時点）
37. 引用元: https://star-history.t9t.io/#flutter/flutter&facebook/react-native （2021/10/06時点）
39. Keisuke Honda選手も注目
40. React Native のこれから New Architecture TurboModules React Native Fabric React Native for VR React Native for Desktop
41. JS Bridge Services （センサー、カメラなど） 画面表示 React Native JSON OEM Widges アプリ側 プラットフォーム側 （iOS/Android） 非同期で 呼び出し
42. JS Fabric Services （センサー、カメラなど） 画面表示 OEM Widges TurboModules React Native アプリ側 プラットフォーム側 （iOS/Android） 同期的に 呼べる
43. スライドリンク: https://react-native-rearchitecture-2021.vercel.app/ アーキテクチャの現状と今後について詳しく解説されています
44. React Native for VR
45. React Native powers Video Calling in Messenger for Windows and macOS.
46. React Native のこれから 実績と積み重ねてきた技術があるのでま だまだ採用するところはありそう New ArchitectureでFlutterにまた追い つくかも！？ 日本でも技術カンファレンスが初開催さ れたりなど、コミュニティも盛り上がっ てる！
47. https://youtu.be/OGsR3O4qu6s
48. Flutter のこれから WebとDesktopをProductionクオリテ ィまで持って行く 組込デバイスサポートも進む！？
49. Flutter のこれから どんどんFlutterエンジニア増える スタートアップだけでなく大手企業にも 採用されていく事例が増えそう FlutterKaigiなど国内でもコミュニティ が加速している！
50. https://flutterkaigi.jp
51. React Nativeと Flutterでアプリを 開発して見えた今 スタートアップや新規サービスを始める場合は コミュニティ成長、生産性、デザイン、パフォ ーマンスの点からFlutterを採用しやすいかも 既存アプリに導入するならReact Nativeで部 分的に導入するのが今は良さそう WebエンジニアはReact Nativeが学習コスト は低いが、Flutterでもあまり大きな壁はない 感じがした React NativeもFlutterの勢いに負けずに確実 に成長している
52. React Nativeと Flutterでアプリを 開発して見えた未来 1ソースでモバイル、ウェブ、デスクトップ （VRと組込デバイスも）が開発できる未来が 近くまできている クロスプラットフォーム技術の成熟、デバイス スペックの向上により、ネイティブとの差は感 じられなくなる？ サービスの成長/要件に合わせてクロスプラッ トフォームとネイティブを選択、切り替えてい く未来にどんどんなっていくのではないか
53. ありがとうございました！