Flutterって何者? – ②他のマルチプラットフォーム開発ツールとの違いは?

はじめに

前回の記事で

Fluuterはマルチプラットフォームアプリ開発ツールだぜ!

ってところがお分かりいただけたかと思います😁

「え?Flutter?なにそれ?」って方は、前回の記事を御覧ください😆

単一のコードから異なるOSで動くアプリを作れるってのはすごい技術ですよね!😲

でも実は、これってFlutterが最初じゃないんです!😳びっくり!

やっぱり”マルチプラットフォーム技術”っていうのは結構前から求められていたようで、

これまでにもいくつかの開発ツールが使われていたそうです😏

今回はそれらの開発ツールの紹介と、我らがFlutter!との比較をしてみて、

「Flutter」の魅力を深堀りしていきたいと思います。

ちなみに筆者はこれらの中ではFlutterしか触ったことがありませんw

間違った情報や古い情報が含まれているかもしれませんので、その際はご指摘いただければと思います😭

それでは、レッツゴー!☺️

知っておきたい用語「レンダリングエンジン」

マルチプラットフォームを調べているうちに、

よく「レンダリングエンジン」という単語を目にしました。

気になったのでちょっと調べてみました。

レンダリングとは、何らかの抽象的なデータ集合を元に、一定の処理や演算を行って画像や映像、音声などを生成すること。例えば、一つのWebページに含まれる、HTMLやCSSなどによる描画内容の記述、スクリプトによる動作の記述、画像ファイルやフォントファイルなど外部のデータなどを組み合わせ、Webブラウザのウィンドウ内にページ内容の描画を行うことを指す。レンダリングを行うためのソフトウェアや装置、システムのことを「レンダラー」(renderer)あるいは「レンダリングエンジン」(rendering engine)などと呼ぶ。

レンダリングとは – IT用語辞典 e-Words

この用語はこのあとの項目にも出てきますので、

知っておいて損はないかなと思います😊

それではいきましょう!

マルチプラットフォーム「3つの種類」

マルチプラットフォームを実現した複数の開発手法があることは、先程お伝えしましたよね😊

でも、一口に「マルチプラットフォーム」といっても、

それを実現する方法は「3つ」に区分されるようです😌

まずはこれらをご紹介します!

ネイティブ型…OS上のシステムを動かす

ネイティブ型の”超ザックリ”イメージ

1つ目は「ネイティブ型」です。

あれ?”ネイティブ”って、「ネイティブアプリ」とかのネイティブ?

と思った方、その通り!

この「ネイティブ型」に分類される開発ツールは、

その名の通り”OSプラットフォームで提供されている描画エンジン(レンダリングエンジン)”

を利用してレンダリングを行います😳

この「ネイティブ型」の場合、

OSの機能をまるごと活用できちゃうわけですから、

例えばカメラ機能やGPS機能などのOS依存の機能なんかを使おうと思うとき、

OS上での操作が必須な「ネイティブ型」は便利ですね😊

また他のタイプと比べて、”処理が高速”という特徴もあります!

ただし、この型のクロスプラットフォームの開発環境は、

iOS、Android、Windowsなど複数のプラットフォームで動作する

クラスライブラリやランタイムが装備されている必要があるようです🤭

”複数のOSに適合させることで”マルチプラットフォームを実現しているイメージですね😉

ハイブリッド型…WebView上でネイティブ機能を利用

ハイブリッド型の”超ザックリ”イメージ

2つ目は「ハイブリッド型」です。

ナンジャラホイおじさん

「WebView」ってなんじゃらほい?

おや?ナンジャラホイおじさんが出てきましたね?

ってことで調べてみました。

WebViewとは、アプリ内でWebページを表示できる機能のこと。主にiOSやAndroidなど、スマートフォンやタブレット端末向けのOSで使われている。

アプリ開発時にWebViewを呼び出すコードを加えるだけで、アプリにWebページを表示できる機能を組み込むことができる。なお、Androidの場合、Android 4.4まではOSにWebViewコンポーネントが組み込まれていたが、Android 5.0以降は「Android System WebView」という名前でアプリ化され、更新もGoogle Play経由で行われている。WebViewのバグ修正や機能追加が、OSのアップデートを待たずにできるようになった。

WebViewは、Webブラウザのレンダリングエンジンを呼び出しているので、表示はWebブラウザと同等になるが、ブラウザ自体を起動しているわけではないので、設定やCookieなどは引き継がれない。

WebView – 用語集 | KDDI株式会社

“OS上で動作”するけど”ブラウザのレンダリングエンジン”を使うってことで、

「ハイブリッド型」と呼ばれているようです😉

OSの機能を直接使ってクロスプラットフォームのソフトウェア開発することは難しいですが、

Web上の機能であれば比較的簡単に実装できるそう😊

ただし、機能の一部をWebに頼る分、処理速度が遅いのがデメリットだそうで、

またネイティブ型ほど高度な機能も実現できないようです😭

”WebViewを介することで”クロスプラットフォームを実現している方法ですね😳

独自レンダラ型

独自レンダラ型の”超ザックリ”イメージ

最後は「独自レンダラ型」です。

その名の通り、独自のレンダリングエンジンを使う方法で、

OSに関係なく使うことができ、

画面上の要素をきめ細かくコントロールすることができるメリットがあります。

「独自レンダラ型」の場合は

”OSに依存しないようにして”マルチプラットフォームを実現している、

というイメージの違いかと思います😊

マルチプラットフォーム開発ツールって他に何があるの?

これが調べてみると結構たくさんありましたww

「あっても3,4個かな」と思っていた予想を遥かに上回っていましたw

すべてを説明するのは大変なので、調べた中でも主要な3つの開発ツールを調べてみました!

それでは、ご紹介します😌

Xamarin(ザマリン)

登場時期
(正式版)
2014年5月
開発元Mcrosoft
(2016年にXamarin社を買収)
IDEVisual Studio
使用言語C#
分類ネイティブ型
対応
プラットフォーム
■ スマホ、タブレット(Android, iOS)
■ デスクトップ
特徴・もともと”Xamarin”は企業名で、2016年2月にMicrosoftに買収
・Visual Studioに同梱されている
・ロジック部分はコードの共通化ができるが、UI定義部分やOS固有機能部分はOSごとの開発が必要
・共通化できるのは通常30〜60%程度
メリット■ ネイティブアプリと”ほぼ同じ”パフォーマンスのアプリが開発可能
■ アプリの見た目と処理ロジックの分離が可能
デメリット■ ネイティブアプリの開発知識が必須
■ 比較的開発難易度が高い
■ これだけでは完結しない可能性がある
■ 画面の開発に時間がかかる
公式サイトhttps://dotnet.microsoft.com/apps/xamarin

正式版発表が2014年と、なかなか前から使われているのが”Xamarin”です😳

ネイティブのAPIを100%移植しており、

各OSに適合させるような形でマルチプラットフォームを実現しています😊

ただ、コード記述の共通化ができるのは30〜60%程度だそうで、

基本的な使い方の場合、それ以外はネイティブ言語での開発が必要とのこと😓

React Native(リアクトネイティブ)

登場時期
(正式版)
2015年3月
開発元Facebook
IDEほぼなんでもOK
使用言語JavaScript
分類ネイティブ型
対応
プラットフォーム
■ スマホ、タブレット(Android, iOS)
■ Web
特徴・マークアップ方式でUIを定義し、CSSのような書き方でスタイルを決める。
・HTMLライクなレイアウトが表示され、
 一見するとWebViewを使用した”ハイブリッド型”のように見えるが、
 実態はAndroid SDKやiOS SDKが提供している「本来の」画面部品を使って
 画面を構築していることから”ネイティブ型”となる。
・情報を見るアプリ(SNSなど)に適している
・コードの共通化は70〜80%程度
メリット■ ネイティブアプリと”ほぼ同じ”見た目のアプリが作れる
■ レイアウトの変更をすぐに確認できる
■ 開発難易度が比較的低め
■ 成熟したコミュニティ
デメリット■ アプリの速度が遅くなる
■ アプリの起動が遅くなる
■ ネイティブアプリの開発が必要
■ 複雑なアプリには不向き
公式サイトhttps://reactnative.dev/

まるで、

ブラウザ向けにJavaScriptとReactによるシングルページアプリケーションの開発を行っている感覚で

モバイルアプリの開発ができるのが”React Native”です☺️

コードを見るとハイブリッド型だと勘違しそうですが、

実は内部でマークアップがネイティブ要素に変換解釈されているようです😳

Flutter

登場時期
(正式版)
2018年12月
開発元Google
IDEAndroid Studio
使用言語Dart
分類独自レンダラ型
対応
プラットフォーム
■ スマホ、タブレット(Android, iOS)
■ Web
■ デスクトップ
特徴・独自の高性能レンダリングエンジンを持ち、画面を描画する
・コードのほぼほぼをDart言語のみで記述できるため、
 開発者はシステムを大幅に制御できるようになる。
・”ホットリロード”による高速開発が可能
・UIに関わる部分すべてを”ウィジェット”として扱う
・共通化は90%程度
メリット■ ネイティブアプリと”ほぼ同見た目”のアプリが作れる
■ ネイティブアプリと”ほぼ同じ速度”のアプリが作れる
■ レイアウトの変更をすぐに確認できる
■ 開発難易度が比較的低め
■ 豊富な画面パーツ(ウィジェット)
デメリット■ 登場したばかりで未成熟(最近では少しづつ日本語の参考資料も増加)
■ Dartの普及率が低い
■ アプリのサイズが大きくなる
公式サイトhttps://flutter.dev/

こう比較してみると、

なぜFlutterが人気なのかが分かってきますよね😳

独自の高性能レンダリングエンジンを搭載することで

OSに依存せず機能の実装ができ、

かつ高速な開発や9割近いコードの共通化ができる事は

Flutterの大きな魅力ではないかと思います☺️

今回はここまで!

さて、今回の「Flutterって何者?」はここまでです😌

今回も最後までご覧頂きありがとうございます!

他のマルチプラットフォーム開発ツールと比較することで、

なんでFlutterがこんなに人気なのかが分かってきましたね😆✨

この記事が面白いなと思った方は、

ぜひTwitterのフォロー&記事のRT、よろしくお願い致します☺️

次回はこちら↓