React経験者はFlutterを技術習得しやすいと思った話

Posted by HirayamaKeigo |2021.11.10 |スマートフォンアプリ,システム開発

スパイスファクトリー株式会社でエンジニアとして働いている平川です。
現在は主に TypeScript, React, PHP 等を用いてWebアプリやモバイルアプリの開発を担当しています。
弊社の詳しいサービスはをご覧ください。

最近 Flutter を数カ月間利用してモバイルアプリ開発を行う機会がありました。Flutterを扱うのは初めてでしたが、私のようなReact 経験者にとって Flutter は習得しやすいと感じました。

その理由を考察してみたいと思います。

Contents

1 Flutterとは
- 1.1 Flutter習得をしてみて
2 FlutterとReactの類似点
3 React経験者には「React Native」の方がいいのではないか?
4 Web開発者でもFlutterならアプリ開発にスムーズに入れる可能性が高い

Flutterとは

Flutter とは、近年注目を集めている Google 製クロスプラットフォームUI開発ツールキットです。
公式サイトには下記のような記載があります。

Flutter is Google’s UI toolkit for building beautiful, natively compiled applications for mobile, web, desktop, and embedded devices from a single codebase.

Google翻訳

Flutter は、単一のコードベースからモバイル、ウェブ、デスクトップ、組み込みデバイス向けにネイティブにコンパイルされた美しいアプリケーションを構築するためのGoogleのUIツールキットです。

コードを1つ書けば、AndroidとiOS、更にwebアプリもFlutterが作ってくれるという事なので、とても簡単そうです。

実際、Webアプリと全く同じ感覚でアプリを作る事が可能です。

$ flutter create myapp
$ cd myapp
$ flutter run

これだけでエミューレーター又はUSBで接続した物理端末でアプリが立ち上がります。（下の画像。2021年7月現在）

更にソースコードを編集した際にはホットリロードによって変更が即座に反映できるなど、Web開発に近い、良好な開発体験です。

もちろん実際には事前に Flutter 本体と最低でも「Android Studio」をインストールする必要がありますが、一度セットアップしてしまえば上記のように手軽に開発を始めることができます。未体験の方は公式ドキュメントを参照して Android Studio と Flutter をインストールし、ひとまず試してみるのも良いでしょう。

ちなみに、Android StudioやXcodeはビルド時にSDKが必須であるだけで付属のIDE自体は必ずしも使用する必要はありません。
好みに応じて使い慣れたエディタ(但しLSP (Language Server Protocol)対応は必須)とFlutter CLIだけで快適に開発できるのもWebエンジニアとして持っている経験を大きく活用できる点で嬉しいところです。

Flutter習得をしてみて

個人的な感想になりますが、私は Flutter の習得は比較的スムーズに進めることができました。
理由は当時私が React をメインに開発していて、かつ Flutter のUIコードが React と似ていたことだと思っています。

このあとは、 Flutter と React が似ていると思ったポイントを考察していきたいと思います。

具体的には、以下の点について触れていきます。

Flutter のUI表現構造が JSX と似ている。そもそも HTML とも似ている
Dart と JavaScript (ES6以降) の文法が似ている
「状態管理」や「イベント・ドリブン」など重要な概念が共通している

FlutterとReactの類似点

先述した Flutter と React の類似点についてそれぞれ説明していきます。

1. UIの表現構造

まずは Flutter のコード構造がJSXが似ている点ですが、下記の Flutter コードを御覧ください。

Center(
  child: Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: [
      Text(
        'You have pushed the button this many times:',
      ),
      Text(
        '$_counter',
        style: Theme.of(context).textTheme.headline4,
      ),
    ],
  ),
);

React に慣れている方であれば Flutter を知らなくても、しばらく眺めていれば出力がどうなるか想像できるかもしれません。

上記のFlutterコードをJSXで書いてみると下記のようになります。
(<Center>, <Column> , <Text>等はどこか他の場所で定義してあるとします。)

<Center>
  <Column style="align-items: center">
    <Text>You have pushed the button this many times:</Text>
    <Text class="headline4">{counter}</Text>
  </Column>
</Center>

上記の Flutter とJSXを見比べてみると、記法に少し差があるだけで大枠での構造は同じだと思いませんか?
HTML では UI を階層構造として捉え、それを表現するのに要素を「入れ子」にしていますが、Flutter でもchildやchildrenという明示的なパラメータが必要なものの同様に要素の入れ子で表現しています。
スタイルなども HTML の属性で指定するのと同じ様に、Dart関数の引数に指定する形を取っています。

この構造が同じなので、例えば Flutter でWidget(~ ReactにおけるComponent)を作る際も React を記述するのと同じつもりで記述するだけで、概ね Flutter の流儀に沿ったものが書けてしまいます。

2. DartとJavaScript

Flutter はDart という言語で書かれますが、この言語の文法は JavaScript (ES6)とよく似ています。
更に Dart には型付や型推論がありますが、記法は異なるものの TypeScript をマスターしていれば戸惑うことは少なくなります。

下記はDart言語の例です。

Stream computePi({int batch = 100000}) async* {
  var total = 0; // Inferred to be of type int
  var count = 0;
  while (true) {
    final points = generateRandom().take(batch);
    final inside = points.where((p) => p.isInsideUnitCircle);

    total += batch;
    count += inside.length;
    final ratio = count / total;

    yield ratio * 4;
  }
}

Allow function, Generator, var, async, await, 制御文, 配列やObject (Dartではmapと呼びます)、変数のスコープなどかなりの部分がJavaScriptと似ているため、細部を無視すれば概ねコードの意味を掴むことが可能です。
更に言うと TypeScript との文法上の差分を押さえていくだけでも、かなり記述力を高める事ができます。

Dart言語は Google が JavaScript の代替としてクライアントサイドのweb言語として開発しているものです。
そのためか、Dart の文法自体は JavaScript と似ており、更に TypeScript と同様に型安全であったり、開発時期が同時期だったこともあり TypeScript と文法上は似たものになっています。

TypeScript と Dart を両方利用していると感じますが、TypeScriptの型定義しやすさと型推論の強さはDartを凌駕しています。
ただし Google のサービスの一部は Angular を Dart で記述する AngularDart を利用しているとの情報があるなど、web開発分野でもDartの動向から目が離せません。

3. 両者に共通する概念

React など Web UIの開発で重要な「コンポーネント」、「状態」、「イベント・ドリブン」などの概念はやはり Flutter でも重要です。
これらは慣れていないと結構難しい概念なので、多少なりとも似ているのは React 経験者にとって非常に嬉しいところです。

「状態」についてすこし具体的に考えてみます。React は「状態」をどの様な「見た目」で表現するか?、という考えを非常にはっきりさせる API を有しています。

少し分かりづらいと思うので、具体的なコードで考えます。

例えば下記のコードを見てみます。

const CountButton: React.FC = () => {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(prev => prev + 1)}>{count}</button>;
};

このコードは React 経験者ならすぐに理解できるでしょう。
それは勿論「JSXが読める」とか「hooks APIを知っている」からという理由もあるかと思います。
ただ、個人的にはそれ以上に React 流の状態と見た目の分離の仕方が身についているという点が大きいのではないかと考えています。

これをFlutterで書くと、概ね下記のようになります。

class _CountButtonState extends State {
  int _counter = 0;
  @override
  Widget build(BuildContext context) {
    return TextButton(
      child: Text('$_counter'),
      onPressed: () {
        setState(() {
          _counter++;
        });
      },
    );
  }
}

記法の差はあるものの、コードの意味や、setStateが必要な理由などは理解できると思います。
もし React など類似のフレームワークの開発経験が無ければ理解に時間を要することでしょう。

React経験者には「React Native」の方がいいのではないか?

ここまで Flutter の紹介をしてきましたが、React 使いが始める Android / iOSアプリ開発といえば、真っ先に思いつくものに React Native があります。当然のことながら Flutter より更に学習コストは低くできます。
また React Native 上に構築されたフレームワーク Expo を使えば、驚くべきことに Android Studio や Xcode をインストールせずに実デバイスで動作確認しながらアプリ開発をスタートできます。
Reduxなどの状態管理ライブラリもそのまま利用可能ですし、既存のwebアプリのコードを変更なしで流用したりもできるでしょう。
UIもJSX (TSX)とCSSで記述することが可能です。

以上のように React Native はとても魅力的ではありますが、それでも個人的には React Native に挑戦する前に Flutter も検討すべきだと思っています。
実は過去に私も React Native で開発を行ったことがありますが、今回の Flutter 習得と比較してみるとUI記述の学習コストには大きな差がないと感じました。
React Native はプラットフォームがブラウザからアプリに変わるので、HTMLタグが全てそのまま使えるわけではない点も学習コストの差を縮めています。
また設計思想の違いからか、画面遷移など含めモバイルアプリで「よくある」UIを実現するには Flutter の方が遥かに簡単な印象です。

Web開発者でもFlutterならアプリ開発にスムーズに入れる可能性が高い

React 開発経験者の私が、Flutte rでの開発業務に数ヶ月携わった経験を元に、Flutter と React との比較を書いてみました。
Web開発者でも Flutter ならアプリ開発にスムーズに入れる可能性があると感じていただければ幸いです。

当社では、ネイティブでのアプリ開発を極めたエンジニアと私のような Webエンジニアが共同で Flutter を使い開発を行う機会がありました。近年のアプリはWebバックエンドとの連携が必須です。Webエンジニアがアプリのコードベースに直接手を入れることで、Webネイティブの視点からアプリエンジニアが気づかなかった問題提起や解決を行うなど、相補的に協力しながら仕事を進めることができたと感じています。

当社では現在 React 、Flutter を重要なコア技術とみなして複数の案件の開発に採用しています。
Flutter や React を用いた開発に興味をお持ちの方、一緒に仕事をしませんか！