Fabulousにより、F#でiOS向けとAndroid向けの宣言型クロスプラットフォームUIが構築可能に

原文(投稿日：2020/05/18)へのリンク

最近のチャンネル9のショーで、F#デザイナーでアーキテクトのDon SymeとFabulous運用担当のTimothé Larivière氏はFabulousを紹介した。Fabulousは、Xamarin.Formsをベースとしたクロスプラットフォームのモバイルアプリとデスクトップアプリの開発を目的としたコミュニティ主導のF#フレームワークである。

Fabulousは、ReactのようなMVUアーキテクチャを採用することで、アプリプログラミングへの新しいアプローチを可能にするとSyme氏は言っている。このアプローチは、コードを簡素化し、テスト可能性を高め、繰り返しを少なくすることを目的としている。Fabulousは、Model-View-Update（MVU）パラダイムを採用して、ユビキタスなModel-View-ViewModel（MVVM）に取って代わるものであり、UIとそのコンポーネント間の相互作用を説明する機能的な方法を提供する。

FabulousはMVUを採用した最初のフレームワークではない。MVUは、ReactとRedux、Flutter、Elm、およびその他のプロジェクトによって普及した。MVUの背景にある基本的な考え方は、UIステータスを表すコアの不変モデルを管理することである。UIイベントが発生するたびに、現在のモデルから新しいモデルが計算され、それを使用してビューが新たに作成される。

Symeの見解では、MVUの主な信条は、関数型プログラミングをサポートすることである。そして、アプリケーションの他の部分と同じ高水準言語で表現される単純な宣言型モデルによる動的UIの作成をサポートすることである。このようなフレームワークによって提供されるもう1つの利点は、ライブコーディングをサポートすることで、コードが変更されたときに自動でUIが更新される。これはMVVMとは根本的に異なるアプローチであり、オブジェクト指向プログラミングに近く、通常は特殊なデザイナーツールで編集される複雑な可変モデルの作成に適している。

静的モデルを使用することは、UIの本質的な並行性とうまく調和するため、MVUにとって大きな資産である。さらに、UIはモデルを直接表現しているため、MVUを使用すると、プログラマーはUIについて簡単に推論できる。実際、MVVMでは、プログラマーは、UIが特定の状態に至るまでの一連の状態変化を心の中で視覚化しなければならない。一方で、MVUを使うと、プログラマーは、モデルとその計算方法について考えるだけで済む。

Syme氏が言うように、MVUは、モデルからUIを新たに再作成するというアプローチのために、いくらかのコストがかかる可能性がある。これはほとんどの場合それほど大きな問題ではないと彼は言う。それは、フレームワークは通常、多くの最適化を可能にするための中間表現を使用するためである。それでも、MVUアプリは、UIが頻繁に更新されるユースケース（たとえば、1秒あたり60回）では理想的ではないであろう。

これは、Fabulousを使用してF#でシンプルなUIを表現する方法である。

type Model =
  { isPressed: bool }

type Msg =
  | Pressed

let init () =
  { isPressed = false }

let update (msg : Msg) (model : Model) =
  match msg with
  | Pressed -> { model with isPressed = true }

let view (model : Model) dispatch =
  if model.isPressed then
    View.Label (text="I was pressed")
  else
    View.Button(text="Press me!", command=(fun () -> dispatch Pressed))

(コードはMicrosoftとChannel 9の厚意により提供)

上記のスニペットでは、update関数がモデルの更新を担当し、viewが現在のモデルからUIの再作成を担当する。

Fabulousを入手するには、Visual Studioをインストールし、Xamarinと.NET Coreの両方のサポートを有効にする。次に、Xamarin.Formsテンプレートパックをインストールし、以下を実行するサンプルプロジェクトを作成する。

dotnet new -i Fabulous.XamarinForms.Templates
dotnet new fabulous-xf-app -n SqueakyApp

これにより、Visual Studioで使用するslnファイルが生成され、iOSおよびAndroid用のモバイルアプリが作成される。コマンドラインオプションを使用して、対象となるプラットフォームを制御できる。興味深いことに、FabulousはVisual Studioに関連付けられておらず、別のIDEで使用できる。Larivière氏は、チャンネル9のビデオでJetBrains Ridersを使用してFabulousのデモをした。

Fabulousの使用を開始するために、そのリポジトリにはTicTacToeやAllControlsなどのサンプルアプリが多数用意されている。一方で、AwesomeFabulousには他にも便利なリソースがある。