React Native経験者がFlutterをさわってみた

 はじめに

はじめまして、アプリチームの伊藤です。

オクトでは複数のアプリをリリースしていますが、その中でもReact Nativeを使っていたりFlutterを使っていたりと、同じクロスプラットフォーム開発ツールでも複数の技術が使われています。アプリチーム内でもよくこの話題があがっていたりして、もりあがっているテーマです。

そんな中、個人的にはReact Nativeか、Flutterかどちらかに注力して、ナレッジを蓄積したり、開発できるエンジニアを増やしたりすることも必要なのではないかと感じることがあります。そこで自分は前職でReact Nativeを使った開発をしていたこともあり、今回はFlutterをさわりながらその違いを学びつつ、今後の開発方針の検討材料にしていこうと思いました。 

2つのツールを比較する

まず、よくある2つのクロスプラットフォーム開発ツールのざっくりとした比較をまとめていきたいと思います。

x-plat tool	React Native	Flutter
開発者	Facebook	Google
主な開発言語	JavaScript	Dart
初版	2015年3月	2017年5月
IDE	VS Code, Nuclide	Android Studio, IntelliJ, VS Code
描画方式	ネイティブコンポーネントを使用	独自レンダリング

どちらも大手IT企業により開発されたツールですし、開発も活発なため今後のサポートに期待が持てます。開発言語や使えるIDEによってエンジニアの好みが分かれそうです。描画方式の違いはネイティブに近いアプリを作りたいか、プラットフォームが違っても差異が少ないUIで提供したいかなどでデザインの要望が関わってきそうです。

トレンドを見る

React NativeとFlutterのトレンド

Google Trendsで日本での過去3年の動向をみてみました。React Nativeはあまり変化がないですが、Flutterは昨年の5月くらいから急上昇しています。Google IOのタイミングですね。人気というところではFlutterに軍配があがるようです。

サンプルを作って動かしてみる

技術は実際に自分の手で動かして確認することを信条としてますので、サンプルアプリを作りながら使い勝手などを試していきたいと思います。

CLIでプロジェクト作成・アプリ起動

環境構築については完了していることを前提とします。プロジェクト作成はIDEから行うやり方もありますが、シンプルなCLI操作による場合で両者を比較します。環境構築さえ済んでいれば、プロジェクト作成からシミュレータでのアプリ起動までスムーズに行えます。

React Native

$ npx react-native init react_native_sample_app
$ cd react_native_sample_app
$ npx react-native run-ios
または
$ npx react-native run-android

Flutter

$ flutter create flutter_sample_app
$ cd flutter_sample_app
$ flutter run

画像とテキストを表示するサンプルコード

アプリ起動の確認ができたら試し簡単なコードを書いてみます。React NativeではHTML・CSSライクなJSXで記述します。FlutterではWidgetツリーと呼ばれる階層構造で記述します。

React Native

import { AppRegistry, View, Image, Text, StyleSheet, } from 'react-native';
import React from 'react'; 
import {name as appName} from './app.json'; 

AppRegistry.registerComponent(appName, () => MyApp);

class MyApp extends React.Component {
  render() {
    return (
     <View style={styles.container}>
        <Image 
          style={styles.image}
          source={{uri: "http://bit.ly/39f0IkW"}}
        />
        <Text>明日から使えるカンタン施工管理アプリ</Text>
        <Text>by React Native</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center'
  },
  image: {
    width: 250, 
    height: 50
  }
});

Flutter

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      backgroundColor: Colors.white,
      body: Container(
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <widget>[
              Image.network(
                "http://bit.ly/39f0IkW",
                width: 250,
                height: 50,
              ),
              Text("明日から使えるカンタン施工管理アプリ"),
              Text("by Flutter"),
            ]
          )
        )
      )
    )
  ));
}

結果

簡単なアプリなので見た目はほぼ同じです。

補足

ここまで書いてアレですが、Flutterの公式サイトではReact Nativeとの違いについて丁寧なドキュメントを用意してくれておりとてもわかりやすいです。こういうところはとても好感が持てますね！

flutter.dev

さわってみての感想

• FlutterはReactにインスパイアされて開発されたと言われているが、実際使ってみても共通する部分が多く、React Nativeでの開発経験がツール理解の助けになった。
• 宣言的UIで記述し、かたやComponentを積み重ねて、かたやWidgetを積み重ねる。それぞれ用意されたコンポーネントの種類や使い方を覚える必要があって、肝心なハードウェアに近い部分はネイティブコードで記述し連携できる。
• 後発のFlutterの方が洗練されているように感じた。JSXよりもWidgetツリーの方がスッキリしていて、CLI操作、静的型付け対応、IDEのバリエーション等から優れいている。
• React NativeもTypeScript等を駆使してより良い環境を構築できるが、このあたりはWebフロント開発に慣れているエンジニアのみが力を発揮できる領域になる。

さいごに

 まだまだFlutterの勉強をはじめたばかりで、React Nativeに関しても経験豊富というわけでもない自分ですが、現在の印象としてはエンジニアの好みでどちらを使っても良いのかなと思いました。開発コストとしては大差なく、言語の普及率や学習コストなど勘案してもどちらが良いかの選択はエンジニアによってまちまちではないでしょうか。

アプリエンジニア(iOS/Android)ならFlutter、フロントエンドエンジニアならReact Nativeを選びそうです（バックエンドエンジニアならどちらだろう？）。

とはいえはじめに提起した課題の解消に向け、今後アプリチームでよく議論していくつもりです！