機能豊富で、直感的かつ視覚的に魅力的なユーザーインターフェイスを構築することは、アプリケーションを成功に導くために不可欠な要素です。そして、ビジュアルデザイン機能を提供するツールがないと、時間を浪費するデザインやコーディングの時間をさらに消費する恐れがあります。「ドラッグ＆ドロップ」コンポーネントによるWYSIWYG（What-You-See-Is-What-You-Get）表示モデルを用いてアプリケーションのユーザーインターフェイスを設計できれば、開発時間の大幅な短縮が可能になり、特にアプリケーションが複数プラットフォームを対象としている場合のUIテストの効率化も期待できます。
こうした視覚的要素についてWindowsデスクトップアプリケーションの構築において、他のフレームワークとDelphiを比較するには、どのようなアプローチを採ればよいのでしょうか。エンバカデロでは、Delphi、WPF .NET Framework、Electronの3つをWindowsデスクトップアプリケーション構築の観点で比較するホワイトペーパー「ベンチマークで検証！ベスト開発フレームワークとは」の執筆を委託しました。同書で使用したベンチマークアプリケーションは、Windows 10 Calculator（電卓）のクローンですが、3名のDelphi MVP（Most Valuable Professionals）の有志、1名のフリーランスのWPF開発者、1名のフリーランスのElectron開発者のエキスパートによって、それぞれのフレームワークによって再構築しています。
各フレームワークは、開発生産性、ビジネス機能、フレームワークアプリケーションの柔軟性、エンドポイントパフォーマンスのそれぞれの観点で、それぞれのメトリックから測定、評価されました。このブログ記事では、ホワイトペーパーで紹介されている「UI設計のアプローチ」メトリックについて説明します。
Table of Contents
UI設計アプローチの比較
フレームワークのIDEはグラフィカル／ビジュアルUIの構築を可能にし、WYSIWYG（What-You-See-Is-What-You-Get）表示モデルを提供するか？ 「ドラッグ＆ドロップ」コンポーネントやその他のビジュアル操作により開発を支援するIDEは、ユーザーが作業しながら様々な思考方法や創造性を探究することを助けます。WYSIWYGデザインエディタの使用により、物理的ハードウェアのバージョンごとにプラットフォームネイティブのスタイリングを表示させる必要がなくなります。
Delphi版のCalculatorは、比較したプログラムの中で開発時間が最も短かったわけではありませんが、開発者がGUI構築のために記述したコードの行数は、合計入力行数のわずか18％でした。RAD Studio IDEでは、標準コントロールコンポーネントをフォームデザイナにドラッグ＆ドロップで配置し、オブジェクトインスペクタを用いてプロパティを変更することで、GUIの迅速な設計、初期化が可能でした。そのため、開発者がCalculatorのインターフェイスを初期化するために必要となるコードを、最小限に抑えることができたのです。一方、Electron Calculatorの場合、開発者が記述したGUI対応コードは合計行数の39％、WPFでは49％に相当しました。
Microsoft Visual StudioのWPFでは、ドラッグ＆ドロップによるGUI構築が可能なビジュアル設計をサポートしていますが、Delphiと比較して、GUIの実装により多くのXAMLコードが必要になるため、設計工程が長引く結果となっています。開発時間を左右するもう一つの要因は、Calculator ロジックをユーザーインターフェイスに結合するために必要なコード量です。2言語を駆使し、3つのファイルの間で合計680行のコードを必要とするWPFのCalculatorが最下位にあることは驚きではありません。
明らかに、Delphiのビジュアル開発環境でのインターフェイスとネイティブコントロールライブラリは、新規開発プロジェクトの生産性に大きく寄与し、同じ時間内に、より迅速に工程を完了する、そしてより洗練されたGUIを開発することを可能にします。
それでは、各フレームワークについて詳細を見ていきましょう。
Delphi
DelphiのRAD Studio IDEでは、GUI設計に、コンポーネントのドラッグ＆ドロップによるWYSIWYG（What-You-See-Is-What-You-Get）設計エディタを使用できます。設計したGUIは、ネイティブのAndroid / iOS / Windows / macOSスタイル、あるいはカスタムスタイルを用いて表示できるほか、さまざまな画面サイズのモバイルデバイスをシミュレートして表示できます。コンポーネントの大きさの変更や各種プロパティの変更は、オブジェクトインスペクタを用いて行え、コードを記述する必要がありません。そのため、ビジュアル開発ですばやくプロトタイピングを行うことができます。Delphiでは、開発者が単純なYAMLスタイルの言語定義を用いてUIを編集する機能も用意されています。こちらのビデオでは、DelphiのUIデザイナーによるUI設計の詳細を解説しています。以下の画面ショットは、開発中のDelphi版Calculatorのビジュアル設計のプレビューです。Delphiでアプリケーション開発に要した時間は、およそ4時間半でした。
WPF .NET Framework
Visual StudioのWPFでは、コード変更が直ちにGUI表示に反映され、ドラッグ＆ドロップによるビジュアル設計が可能なWYSIWYG設計をサポートしています。開発者は、コードからではなく、コンテキストメニューからも、オブジェクトのプロパティを変更できます。WPFでも、XAMLと呼ばれるXMLライクな言語定義によってUIを編集できます。以下の画面ショットは、開発中のWPF .NET Framework版CalculatorのXAMLコードプレビューでし。。サードパーティ製の設計ツールがあると思いますが、アプリケーション構築中にビジュアルデザイナーは使用できませんでした。WPF .NETFrameworkでアプリケーション開発に要した時間は、およそ30時間でした。
Electron
ElectronにはネイティブIDEはありませんが、テキストエディタとコマンドラインツールを用いて開発を行うことができます。Electronには、標準でWYSIWYG設計機能もドラッグ＆ドロップコンポーネントも用意されていません。UIは、HTML5とCSSスタイルを用いて作成できます。Visual StudioなどのIDEを用いない限り、ElectronアプリケーションのGUIを表示するには、コンパイルして実行するしかありません。以下の画面ショットは、開発中のElectron版Calculatorコードのプレビューです。HTML向けビジュアル設計ツールがあると思いますが、開発中にビジュアルUIデザイナーは使用できませんでした。Electronでアプリケーション開発に要した時間は、およそ10時間でした。
3つの開発フレームワーク比較の詳細は、ホワイトペーパー「ベンチマークで検証！ベスト開発フレームワークとは」（日本語版）をダウンロードしてご覧ください。
Design. Code. Compile. Deploy.
Start Free Trial Upgrade Today
Free Delphi Community Edition Free C++Builder Community Edition
