React Nativeとflutterの両方を使うことになったので、いつも使っているrails APIにつなげることができるようにしました。
※React Nativeは割と綺麗に書きましたが、flutterは最後のリファクタリングを行っていないのであまり綺麗ではありませんのでご注意ください。
とりあえずイメージ↓
React Native
Github repo:
https://github.com/hiyashikyuri/event-app-client
flutter
Github repo:
https://github.com/hiyashikyuri/event_app_flutter
Rails devise token auth based API
Github repo:
https://github.com/hiyashikyuri/event-app-api
どちらを使うべきかの個人的感想
結論、flutter
Javaに近い文法でかなり学習コストが低い
昔、Android開発していたときにみたようなコードで、Javaやっていた人からするとかなり学習コスト低いと思います
|
1 |
@override<br>Widget build(BuildContext context) { |
UI全てをDartで記述可能
リファクタリングが簡単です
最初は読みにくいですが、1日もすれば慣れます。
全てDartでまとまっているので、loop部分や長くなってしまったファイルを簡単に分割することが可能です。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
return ListTile( title: Text(title), leading: CircleAvatar( backgroundImage: NetworkImage(imageUrl), ), trailing: Container( width: 100, child: Row( children: <Widget>[ IconButton( icon: Icon(Icons.edit), onPressed: () { Navigator.of(context).pushNamed(EditProductScreen.routeName, arguments: id); }, color: Theme.of(context).primaryColor, ), IconButton( icon: Icon(Icons.delete), onPressed: () async { try { await Provider.of<Products>(context, listen: false) .deleteProduct(id); } catch (error) { scaffold.showSnackBar( SnackBar( content: Text('削除に失敗しました', textAlign: TextAlign.center,), ), ); } }, color: Theme.of(context).errorColor, ), ], ), ), ); |
drawerなどのUI
drawer等のUI系が一撃で作れます
こちらがイメージとコードです
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
// drawerのクラス class AppDrawer extends StatelessWidget { @override Widget build(BuildContext context) { return Drawer( child: Column( children: <Widget>[ AppBar( title: Text('ナビゲーション'), automaticallyImplyLeading: false, ), Divider(), ListTile( leading: Icon(Icons.shop), title: Text('イベント一覧'), onTap: () { Navigator.of(context).pushReplacementNamed('/'); }, ), Divider(), ListTile( leading: Icon(Icons.edit), title: Text('自分の投稿一覧'), onTap: () { Navigator.of(context) .pushReplacementNamed(UserProductsScreen.routeName); }, ), Divider(), ListTile( leading: Icon(Icons.exit_to_app), title: Text('ログアウト'), onTap: () { Navigator.of(context).pop(); Navigator.of(context).pushReplacementNamed('/'); Provider.of<Auth>(context, listen: false).logout(); }, ), ], ), ); } } // drawerを入れる時のコード appBar: AppBar( title: Text(loadedProduct.title), ), drawer: AppDrawer(), // <= drawerに指定のクラスを入れるだけで作れる!! |
React NativeでDrawerを実装したときはライブラリを探したり、コードをぐちゃぐちゃにしながら頑張って入れたので、それと比較すると比べ用もないぐらい簡単に実装できます
型がしっかりしているので安心感が凄まじい
実行前にIDEが型チェックのエラーを教えてくれるので、いつ爆発するかわからない怖さから結構開放されるかと思います。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
class Products with ChangeNotifier { List<Product> _items = []; final String authToken; final int userId; Products(this.authToken, this.userId, this._items); List<Product> get items { return [..._items]; } List<Product> get myItems { if (userId == null) { return []; } return _items.where((prodItem) => prodItem.user.id == userId).toList(); } Product findById(int id) { return _items.firstWhere((prod) => prod.id == id); } Future<Map<String, String>> getAuthorization() async { final prefs = await SharedPreferences.getInstance(); if (!prefs.containsKey('userData')) { return {}; } final extractedUserData = json.decode(prefs.getString('userData')) as Map<String, Object>; return { 'access-token': extractedUserData['access-token'], 'client': extractedUserData['client'], 'uid': extractedUserData['uid'] }; } } |
navigation
Navigator.of(context).pushNamed(EditProductScreen.routeName, arguments: id);
こんな感じのコードを入れるだけでどこでもUIを遷移させることができます。
モジュールも入れる必要がないので、まじで上記のコードだけで実装できて、動いたときは簡単すぎて感動しました。
アイコンが標準搭載
アイコンや色の指定がめちゃくちゃ簡単です。
|
1 2 3 4 |
IconButton( icon: Icon(Icons.edit), color: Theme.of(context).primaryColor, ), |
ホットリロード
本当に冗談抜きで秒で変更点が反映されます。
ストレスを感じなく、開発できるのでこれはポイントがかなり高いです。
flutterがおすすめだけどReact Nativeを使った方が良い人
- スマホアプリを開発したことがない人
- Java/Swiftがかけない人
- Reactを使っている人
上記の方達はflutterよりもReact Nativeを利用した方がコストは低いと思います。
ただし、数ヶ月React Nativeを触った身からすると、
- Iconでエラーがでたりするのが困る
- nodeが重い
- ホットリロードはflutterの方が早い
- typescriptを利用しない場合は型チェックやメモリリークが怖い
など気になる点がそこそこあり、仮にJavaなどの静的言語を使ったことがなかったとしても勉強してからflutterを利用した方がメリットが多いのではないかな、と思っています。
まとめ
最終的にはプロジェクトの予算やチームのスキルセットによって選択されるFWも異なって来るかと思いますが、それでもflutterは書きやすくデザインセンスのない私でも簡単にそれっぽくできてしまうので、めちゃめちゃおすすめしたいです。
エラーとか指摘のポイントがあれば教えてください。
すぐに対応できるか分かりませんが、できるかぎり早めに修正します
