そもそもQt/QtQuick(QML)とは？
QtQuickとは歴史あるマルチプラットフォームGUIツールキットQt上に新たに構築された柔軟性の高いフレームワークで、実装にはJavaScriptから派生したQML言語を使用します。
公式ページ： https://doc.qt.io/qt-5/qmlreference.html
Wikipediaを引用してみます。
QML (Qt Modeling Language) は、ユーザインタフェースマークアップ言語である。QMLはJavaScriptをベースとした言語であり、アプリケーションのユーザインタフェースをデザインするためのCSSやJSONのような宣言型言語である。
平たく言うとQMLはJavaScriptの文法を使ってGUIを記述できるようにしたプログラミング言語で、ノーマルのJavaScriptと比べ、ファイルを分けなくても階層構造を持ったオブジェクトツリーを容易に記述することができます。
平易で宣言的な文法でGUIを構築することができ、SDK付属のデザイナーを使えばWYSIWYGにマウス操作で画面設計ができます。
QMLのコンポーネントはQML、JavaScript、C++等で開発可能です。
import QtQuick 2.9 // import from Qt 5.9
Rectangle {
id: canvas
width: 250
height: 200
color: "blue"
Image {
id: logo
source: "pics/logo.png"
anchors.centerIn: parent
x: canvas.height / 5
}
}
このコード例の場合、「幅250px高さ200pxの青色の長方形の中に pics/logo.png の画像を中央に表示した」GUI要素を定義しています。
QMLでどういうGUIを作れるのかのプログラミング言語としての詳細は他の記事に譲るとして、QMLが他のモバイルプラットフォームとどういう競合状態にあるのかを考えてみましょう。
なお、話を単純化するため、対象プラットフォームを以下に絞り込んでおきます。他のプラットフォームへの対応については各フレームワークを個別に調査してください。
- iOS
- Android
- Windows
- Mac
比較対象: Cordova
公式ページ： https://cordova.apache.org/
紆余曲折あり、現在はApacheソフトウェア財団に寄贈されたHTML5ベースのモバイルアプリケーション開発フレームワークです。iOS, Android等、各OS向けのアプリを作るためのプラットフォームごとのJavaScript APIが定義され、HTML5+JavaScriptでモバイルアプリを開発できます。
プログラミング言語はJavaScriptが基本です。
歴史あるフレームワークで記事検索は難しくないでしょうが、固有のGUIツールキットを持たず、各OSのブラウザコンポーネント上で動作するため、パフォーマンスに限界があります。
基本的にWebオンリーの開発経験者が選択肢に挙げてもいいかなというくらいで、GUIアプリ開発に慣れている開発者がわざわざ選ぶ必要があるとは思えません。
比較対象: Ionic
公式ページ: https://ionic.io/
HTML5ベースのモバイルアプリケーションフレームワークとして急速に人気が出ているようです。標準フレームワークとしてAngular.jsを改造したものが使われているようです。最近のバージョンでは Vue.js や React と組み合わせての開発も対応しているようです。
全体がCordova上で動いています。Cordovaですっぽり抜け落ちていたGUIフレームワークのレイヤーを補完してくれるので、新規開発では有力な選択肢となるでしょう。
Web開発経験のある現場にはおすすめです。
比較対象: Xamarin
公式ページ： https://docs.microsoft.com/ja-jp/xamarin/get-started/what-is-xamarin
Xamarin自体はOSSベースで開発が進められてきた.NET Framework互換の実行環境というのが元々の由来ですが、現在はMicrosoft自身が開発し、XAMLをGUIツールキットとしてWindows以外のOS向けのアプリを開発するための実行環境の一つ(現在は.NET Coreなどの他の実行環境も存在する)です。
プログラミング言語はC#です。
XAMLという約20年の歴史のある表現力の高いGUIツールキットが使用できるところは利点ですが、反面XAML単独では満足なGUIアプリは設計できず、Prism、MVVM Light Toolkit等のMVVMフレームワークを別途導入しないとまともに開発できません。
Windows開発に慣れた技術者は大勢居ますので、彼らを主体にモバイルアプリを開発していくならば有力な選択肢となるでしょう。
また、PC(Windows, Mac)向けは.NET Coreという別の処理系となり、XAMLコンポーネントに互換性がないため画面デザインを別に作成する必要があります。(ViewModelを使い回すことは不可能ではないとは思いますが)
比較対象: React Native
公式ページ： https://reactnative.dev/
Facebookが開発しているクラスプラットフォームのアプリ開発フレームワークです。
各OSのネイティブのGUIツールキットをReactで完全制御しようという野心的なプロジェクトです。
プログラミング言語はJavaScriptが基本です。
Reactを使ったウェブアプリ等の開発経験があり、React Nativeと各OSのツールキットのドキュメントを並列に学びながら開発を進められる馬力のある開発チームならば選択肢に入るでしょう。
なお、ワンソース・マルチプラットフォームに書ける部分はアプリのModelと通信部分くらいで、各OS向けのGUI部分については各OSのツールキットをJavaScript越しに扱うことになるので個別に実装することになります。
ただし各プラットフォーム向けに作り分けるアプリのDOM構造を共通化すること自体はさほど難しくはないでしょう。
比較対象: Flutter
公式ページ： https://flutter.dev/
Googleが開発しているクラスプラットフォームのアプリ開発フレームワークです。
Androidの標準レンダラーであるSkia上に構築された専用のGUIツールキットで開発するという野心的なプロジェクトです。
プログラミング言語はDartが基本です。
新しいプログラミング言語に挑戦することが苦でなく、真のクラスプラットフォームという夢に邁進するならば選択肢に入るでしょう。
まとめ
| フレームワーク | プログラミング 言語 |
GUI フレームワーク |
ネイティブ 描画 |
共通 パーツ |
ネイティブ パーツ |
対象OS |
|---|---|---|---|---|---|---|
| QtQuick | QML, JavaScript | ○ | ○ | ○ | ○ | iOS, Android, Windows, Mac |
| Cordova | HTML, JavaScript | × | × | × | × | iOS, Android |
| Ionic | HTML, JavaScript | ○ | × | ○ | × | iOS, Android (Windows) |
| Xamarin | XAML, C# | ○ | ○ | ○ | ○ | iOS, Android (Windows, Mac) |
| React Native | JavaScript | × | ○ | × | ○ | iOS, Android Windows, Mac |
| Flutter | Dart | ○ | △ | ○ | × | iOS, Android (Windows, Mac) |
-
プログラミング言語:
- フレームワークでアプリを開発する際、最も有力な選択肢となるプログラミング言語です。あなたのスキルによっては他の選択肢をくわえることもできるかもしれません
-
GUIフレームワーク:
- クロスプラットフォームでワンソース・マルチOSのGUIデザイン言語およびデザイン環境が存在するかという観点です
-
ネイティブ描画:
- アプリのGUIがブラウザコンポーネント上で描画される場合は×となり、対象OSの描画命令で描画される場合は○となります。Flutterの場合、Androidでは○ですが他のOSではそうとも言えないため△としておきます
-
共通パーツ:
- 各OSから独立してフレームワークで定義されOSを意識せずにアプリで使用できる画面パーツ(コントロール、コンポーネント)です
-
ネイティブパーツ:
- 各OS固有の画面パーツ(コントロール、コンポーネント)です。
- Xamarinの行のWindows, Mac対応は、実際には.NET Coreによるサポートです。XAML, C#による開発が行えるというところは同じですが、XAMLコンポーネントに互換性がありません
- FlutterのWindows, Macサポートは2020年12月時点でアルファ対応
※他にいい感じのマルチプラットフォームなフレームワークをご存知でしたらコメントください。
2021-06-10 - Ionicを追記。