OutSystemsで作成できるアプリケーションには「Reactive Web」と「Mobile」の2つのタイプがあります。
「Reactive Web」はベース技術にJavaScriptフレームワークである「React.js」を採用したアプリケーションタイプとして数年前に誕生し、現在ではOutSystemsで作成できる標準のアプリケーションタイプとなっています。

本ブログ記事では、OutSystemsのアプリケーションの基本的な特長をご紹介しながら、さらに「Reactive Web」がそれまでのアプリケーションタイプからどのような点で進化を遂げているのかを解説します。

Reactive Webの特長①データ取得の非同期化と画面表示の自動更新

OutSystemsでは、基本的なデータの取得においてSQLクエリを書く必要はありません。「Aggregate」という機能を使うことで、データ取得ロジックを視覚的に実装することができます。「Aggregate」では、データの取得元となるテーブル（Source）、データの取得条件（Filter）、順序（Sort）の3つを設定します。「Aggregate」を組み立てていく間は常に下部に現在の条件で取得されるデータのプレビューを確認できるため、リアルタイムにデータの内容を確認しながら、正しい実装を行うことが可能です。

「Reactive Web」での画面開発においては、この「Aggregate」をはじめとするデータ取得が非同期で実行されるようになりました。

これまでのアプリケーションタイプである「Traditional Web」では、画面が表示される前にサーバー側でデータ取得など画面表示に必要な処理を実行してから、クライアント側に情報が渡されていました。そのため大量データの取得や複雑なビジネスロジックを組んでいた場合は、画面遷移の際にページが白紙の状態で数秒間表示されることもあり、ユーザーにストレスを与える要因となっていました。
＊「Traditional Web」は、2021年8月以降の新規販売ライセンスでは使用できないアプリケーション形式です。

「Reactive Web」ではこの点を改善し、データ取得が画面の要素の一つとして扱われ、非同期で実行されるようになっています。そのため画面遷移は素早く行われるようになり、ユーザー視点からのパフォーマンスが大幅に改善しています。また、複数のデータ取得を実装した場合も、それらは並列で処理されるため、データ取得が完了し次第画面に表示することができるようになりました。

上記のデータ取得のほか、ボタン押下によって変数の値が変化した時など、様々なタイミングで繰り返し画面の表示内容は変化します。これまでの「Traditional Web」ではAjaxが採用されており、データセットや変数に更新があった時は、明示的に画面の更新部分を指定しなければなりませんでした。「Reactive Web」では、明示的に指定しなくても自動で画面の表示内容が更新されるようになっています。

Reactive Webの特長②様々なタイミングで検知できる「画面イベント」が誕生

「Reactive Web」では、画面の初期表示時やレンダリング時などの「画面イベント」を詳細に検知し、処理を実行できるようになりました。
「Traditional Web」では、画面に直接関連するロジックが実装できる箇所は、画面初期表示時の処理を定義する「Preparation」か、ボタンやリンクの押下時に実行される「Screen Action」の2種類でした。
「Preparation」は画面ごとに一つしか作成できません。そのため、画面初期表示に必要な「Aggregate」でのデータ取得や取得結果に基づくビジネスロジックなど、あらゆるロジックを定義する必要があり、実装量が多く複雑化しやすいという課題がありました。

＊画像：様々な処理が必要なため、Preparationは複雑になりがち

「Reactive Web」では、この「Preparation」が「On Initialize」、「On Ready」、「On Render」に細分化されたほか、前章の通りデータ取得が画面の一要素として分離されたため、画面初期表示処理の内容がより明快になり、開発者間で共有しやすくなりました。また画面遷移時の「On Destroy」という画面イベントも検知できるようになりました。

Reactive Webの特長③クライアント側の機能が充実

OutSystemsでは、ビジネスロジックを「Action」として、作成したフローチャート内に定義して作成します。

これまでの「Traditional Web」における「Action」は、画面内に作成できる「Screen Action」と、共通ロジックとして使用できる「Server Action」が存在しました。
「Action」で定義する内容は、「Assign（代入）」や「If（分岐）」などの様々なロジックツールを使用して作成します。ロジックツールには「Server Action」というものも存在するため、「Screen Action」内で「Server Action」を呼び出す、あるいは「Server Action」内で「Server Action」を呼び出すことができます。つまりプロコードで言う「メソッド」に近い役割を果たすことができます。
しかし、「Traditional Web」においては、「Screen Action」も「Server Action」もサーバー上で実行されるものでした。つまり、画面上のどんな処理でも基本的にサーバーへ通信する必要があったのです。

「Reactive Web」では、「React.js」の採用に伴い、画面上で最初に実行される「Screen Action」が「Client Action」に変わり、定義したロジックがクライアント上で実行されるようになりました。「Client Action」だけで完結するロジックはサーバー通信が不要なため、レスポンスが向上しています。もちろん、「Client Action」から「Server Action」を呼び出すことは可能ですが、「Client Action」の処理内で複数回「Server Action」を呼び出すと、サーバー通信回数の増加によるパフォーマンス劣化を伝える警告が表示されるようになりました。これにより、開発者は実装中によりパフォーマンスを意識することができます。

さらに「Reactive Web」では、複数の画面間で繰り返し使用される値を「クライアント変数」としてクライアント毎に保持できるようになりました。
これまでは「セッション変数」として、値はサーバー側に保持されていたため、この変更によりサーバー側への通信をせずとも値を取得できるようになりました。
一方、「クライアント変数」はブラウザ上で値を確認できてしまうため、格納する値は機密性の低い単純な情報のみにするよう、注意する必要があります。

まとめ

さてここまで、OutSystemsで開発できるアプリケーションの基本的な特長をご紹介しながら、「Reactive Web」の進化点を解説して参りました。
OutSystemsは「Reactive Web」誕生後も日々進化を続けています。月次ペースでアップデートがリリースされているため、OutSystemsご利用の際は常に最新情報に目を配り、すばやく開発に取り込んでいただくことがプラットフォームの発展に繋がります。
皆さまがOutSystemsをご利用される際は、最新情報のキャッチアップができる、そしてそれをメンバーに共有できる体制や仕組みを構築し、最新機能をフル活用してさらなる業務効率化を目指してみてはいかがでしょうか？

弊社ではOutSystemsの活用をお客様の社内で推進するための組織としてCoEチームの組成を推奨しております。CoEチームの有用性や組成方法についてご興味のある方は、是非、弊社までお問い合わせください。

弊社電通総研は、ローコード開発プラットフォーム：OutSystemsの導入/活用を支援する様々なサービスメニューをご用意しております。
ローコード開発のはじめの一歩を、電通総研と一緒に踏み出してみませんか？

電通総研のOutSystems関連サービスページ：https://itsol.dentsusoken.com/outsystems/service/

本ブログは、2023年10月1日時点の情報をもとに作成しています。
OutSystemsに関する詳しいお問い合わせは、弊社Webサイトからお問い合わせください。
https://itsol.dentsusoken.com/outsystems/inquiry/