【OutSystems】Reactive Webについて

# 対象
ローコード開発に興味があるエンジニアさん。

# 目的
備忘録です。

# OutSystemsとは
**ローコード開発ツール**です。
無償で[トライアル](https://www.outsystems.com/Platform/Signup)できるので、もしこの記事を見て気になった方がいたら試してみるのもアリかもです！

OutSystemsでは、下記のようなタイプのアプリケーションを作成する事ができます。
- Reactive Web App
- Tablet App
- Phone App
![reactive-new-app-window.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/785134/51d7cb9e-9efa-41ac-5c2f-20e8637f3f25.png)

業務では、Reactive WebとTraditional Web（上記にはないですが...）での開発経験しかないので、いつかまたOutSystemsを使う日が来た時の為に、**Reactive Web**について、こんなことしてたな〜程度にまとめておきます。
私が業務でOutSystemsの開発を始めた頃（ゆうて1年ちょっと前くらいですが）は、ドキュメントも少なく、公式ページのeラーニング的なもので手探り開発をしていた感じでしたが、どんどんドキュメントも増えてて短期間でシェアの伸び方がすごいなと感じております。。。

:::note info
特徴
- UIもロジックもデータモデルも全てGUIによる**ビジュアル開発**ができる為、あらかじめ用意されたブロックを組んでいく事でアプリケーションの開発ができます。
- [**Forgeコンポーネント**](https://www.outsystems.com/forge/?_gl=1*zz0az4*_ga*Njk2MDE0Mzg2LjE2ODMzNzg0MjQ.*_ga_ZD4DTMHWR2*MTY4MzM3ODQyNC4xLjEuMTY4MzM4MTAyNy4wLjAuMA..)という、オープンソースのライブラリが豊富で、Forgeを利用し機能の拡張や開発の効率化を図る事ができます。
- コーディングやプログラムの記述ゼロでも開発ができますが、フロントエンド側のActionにJavaScriptを記述したり、バックエンド側のActionにSQLを記述することが可能です。
:::



## :bicyclist: リアクティブウェブ（Rreactive Web）とは
JavaScriptフレームワークである`React.js`をベース技術に採用しており、
仮想DOM等のReact.jsベースの技術が内包されているので、OutSystemsの知識だけでReactの知識がなくとも`SPA（Single Page Application）開発`ができます。

PC・スマホ・タブレットの各デバイスに対応したレイアウトをそれぞれ作ることが可能です。

以前は、**Traditional Web（従来のWeb）** というタイプのアプリケーションの作成も可能でしたが、現在は、Reactive Webのみを押していくようです。

Reactive WebとTraditional Webの違いは、下記を参考にしてみてください！！
[考慮する必要がある従来のWebアプリとリアクティブWebアプリの違い](https://success.outsystems.com/ja-jp/documentation/how-to_guides/development/introduction_to_migrating_traditional_web_to_reactive_web_apps/differences_to_consider_between_traditional_and_reactive_web_apps/)



## :bicyclist: OutSystemsを使ってみる
まずは、無料で試す事ができるので、URLにアクセスしてサインアップします。
すると、下記のような画面が表示されますので、手順通りに進めます。
![スクリーンショット 2023-05-06 23.32.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/785134/82599556-ae98-8a64-3bb8-b179acc22c18.png)


**１） ServiceStudioをダウンロード**
OutSystemsの開発では、`ServiceStudio`という開発環境を使用して開発を進めます。
これがないと開発はできません！！
<img width="300" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/785134/ed41bb47-eb91-188d-e9ca-841f276a8987.png">
**２） ServiceStudioにログイン**
まず、左のようなポップアップが表示されると思いますが、`Log in with email`リンクをクリックし、右のようなポップアップが表示されたら、サインアップ時に登録したメールアドレスとパスワードを入力し、`Logging in`ボタンをクリックします。
<img width="300" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/785134/0329e1aa-f07d-7d9e-90cd-f0ec348e5a41.png">　<img width="300" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/785134/bd3ef6b4-7957-02b3-c497-e210c0d3b691.png">　
**3） アプリ作成**
ログインできたら、`New Application`ボタンが表示されますので、クリック！
<img width="400" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/785134/b507b35f-4883-8cae-1ce9-833cf6121a3a.png">
スクラッチ開発か、すでに作成ずみのアプリで開発をするか選択できるので、`From scratch`を選択し、`Next`。
<img width="400" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/785134/5342ff72-1aaf-963e-2631-7754970b7e39.png">
Reactive Webを選択し、`Next`。
<img width="400" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/785134/e8da47d7-d926-2b93-ab45-188686abf818.png">
適当に名前をつけて、テーマカラーを選択し、`create App`。（好きなアイコンをアップロードする事もできます）
v
**4） モジュールを作成**
アプリができたら、画面や処理を作っていくモジュールを作成します。
今回は、モジュール内に画面を作成していきたいので、Choose module typeで`Reactive Web App`を選択し、`Create Module`をクリック！
![スクリーンショット 2023-05-07 0.01.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/785134/ca105509-c550-3a54-693b-dcdede1c72a2.png)
**5） 画面を作成**
Screenをドラック&ドロップ。
![スクリーンショット 2023-05-07 0.04.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/785134/b8e110c3-ac44-171f-9c30-f8495afb22d0.png)
色々なテンプレートが選択できますが、今回はEmptyを選択しScreen name を入力後、`Create Screen`をクリック。

画面までできました！！
![スクリーンショット 2023-05-07 0.28.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/785134/3b141b4e-797a-8fdb-da44-0ed7c3229073.png)


## :bicyclist: フロントエンドどうなってんの？
基本的にはHTML不要で、下の画像のように元々用意されているWidget（Inputboxやcolumnなど）をドラッグ&ドロップすることで画面を構成できます。
![スクリーンショット 2023-05-07 1.03.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/785134/2ab00771-fa32-b738-f2b7-87b79a7d7bb0.png)

画面の見た目の部分やフロントで実行するActionなどの記述は、基本的に`Interfaceタブ`で行います。
<img width="300" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/785134/97d954cd-f7aa-1dfd-e17b-fb30ab6c7c96.png">

:::note infomation
**各フォルダについて**
それぞれのフォルダ内に新しくファイルやフォルダを配置する事ができます（フォルダは１階層目まで配置できます）。

▶︎ **UI Flowsフォルダ**
　画面やコンポーネント（ブロック）が定義されています。
　Commonには、ログイン画面や画面共通のメニューなどのブロックが配置されています。
　Layoutには、レイアウトブロックが配置されています。
　MainFlowには、基本的に自作の画面達が配置されています。

▶︎ **Imagesフォルダ**
　画像ファイルを保持します。

▶︎ **Themesフォルダ**
　CSSファイルを定義します。外部モジュールから参照する事も可能です。

▶︎ **Scriptsフォルダ**
　JavaScriptファイルを保持します。
:::

:::note warn
OutSystems〜について
所々にあるOutSystemsChartsやOutSystemsMaps、OutSystemsUIなどは読み込んでいる外部モジュールで、元々OutSystemsで用意されているモジュールになります。
読み込んでいるモジュールを確認するには、左上のコンセントマークをクリックし、ポップアップが表示されるので、`In use`を選択し確認できます。
<img width='600' src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/785134/1bf26225-a000-7353-7f45-9c8bddac285b.png' />
:::

React.jsで言う、コンポーネントのように**block** というものを作成する事で、既存のWidgetのように画面やblock内で使用する事ができます。


**◆ Screen（画面）、Blockについて**
Screenは、空白の画面でゼロから開発する事も可能ですが、用意されているテンプレートを使用して開発することも可能です。
（例えば、一覧画面であれば、リストに渡しているデータを変えたりちょっとテキストの位置を好みの場所に配置したりすればそれっぽい画面ができます。）
<img width="400" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/785134/0fe8d9c5-d5b7-650e-b81c-eece5b415a27.png">
Screenを右クリックし、InputParameterを定義することで画面遷移時にパラメーターを受け渡す事ができます。
<img width="400" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/785134/172868ff-4c6d-c0c1-c543-502ab6269232.png">
[Block](https://success.outsystems.com/ja-jp/documentation/11/reference/outsystems_language/interfaces/navigating_in_the_application/block/)も同様で右クリックし、InputParameterを定義することでblockにパラメーターを受け渡す事ができます。
また、blockでは`event`を渡す事ができ、親の変数を更新する時なんかにActionを渡す事で、子のブロックでイベント発生時に受け取ったActionが実行できます。
<img width="400" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/785134/17e0fb68-20dd-5f14-19c1-18b3aecd77d1.png">



**[◆ UIデザインについて](https://success.outsystems.com/ja-jp/documentation/11/developing_an_application/design_ui/)**
OutSystemsでは、新しくアプリを作成すると、デフォルトで`OutSystems UI`モジュールが読み込まれています。
OutSystems UIでは、OutSystemsで構築するアプリケーションのUI構造の作成方法を定義しています。
下記の画像は、OutSystems UIのアーキテクチャを表したものです。
<img width="550" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/785134/42dfd363-f1bf-2de5-2098-de687060230c.png">
全UIのベースとなる`UI Framework`であり、[UI Patterns](https://outsystemsui.outsystems.com/OutSystemsUIWebsite/PatternsOverview)やUI Flows直下の`Layouts`内のレイアウトなどが使用できます。
その上に、`Templates`が定義されており、[Web Screen Templates](https://www.outsystems.com/OutSystemsUIWebsite/ScreenOverview?RuntimeId=2&_gl=1*1drzypk*_ga*Njk2MDE0Mzg2LjE2ODMzNzg0MjQ.*_ga_ZD4DTMHWR2*MTY4MzM4NjYwOC4yLjEuMTY4MzM4ODg5NS4wLjAuMA..)が使用できたり、[独自のテンプレートアプリ](https://success.outsystems.com/documentation/11/developing_an_application/design_ui/reuse_ui/create_a_custom_application_template/)を作成し使用することができます。
さらにTemplatesの上の`Style Guide`では、ブランドのテーマ色やパターンが示されているドキュメントを定義します。
1番最上位に独自のアプリを作成することで、一貫したUI/UXで開発をする事ができます。


**[◆ 処理（Action）について](https://success.outsystems.com/ja-jp/documentation/11/reference/outsystems_language/logic/implementing_logic/logic_elements/client_action/)**
Screenやblockを右クリックし、`Add Client Action`をクリックするとActionを追加する事ができます。
Client Action内では、このような処理ブロックを使う事ができます。
ForEachやIfウィジェットを使用して、くり返しや分岐処理を行うことができますが、複雑化してくるとブロック自体の整理も処理を追うのも大変になってくるので、JavaScriptウィジェットを作成し、複雑なくり返しや分岐処理はJavaScriptで書いていました。
<img width="550" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/785134/0a1bebc6-f9aa-8759-dd63-91bfbd129586.png">
JavaScriptファイルに値を渡すことができるのですが、配列やオブジェクトを直接渡すことはできず、一度JSON形式に変換してから渡します。
<img width="550" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/785134/ab26e1be-b7cf-dc32-1cac-aabd677402ea.png">


**◆ ライフサイクルイベントについて**
[画面とブロックのライフサイクルイベント](https://success.outsystems.com/ja-jp/documentation/11/developing_an_application/implement_application_logic/screen_and_block_lifecycle_events/)



# 合わせて読みたい
今回はフロント側の事しか触れませんでしたが、バックエンド側の基本的なところも紹介しておきます！
- [OutSystemsでデータベースからデータを取得して表示する](https://success.outsystems.com/ja-jp/documentation/11/developing_an_application/use_data/query_data/fetch_and_display_data_from_the_database_in_outsystems/)
- [エンティティ](https://success.outsystems.com/ja-jp/documentation/11/developing_an_application/use_data/data_modeling/entities/)
- [データ(エンティティ)概念と作成方法【OutSystems】](https://outsystems.ryoma-portfolio.com/entity/)



# 最後に
OutSystemsは、プログラミングスキルや知見がなくとも簡単にWebアプリ開発できると言うことで、シェアが広がっているようです。
確かに、Reactやnode.jsを個人的に学習しているだけの私でも、フロントエンドもバックエンドもガッツリ開発できました。
ですが、全くの初心者がちゃんとしたシステム開発ができるかと言うと、厳しい気がします。


PS. **無性の個人環境について**
`一定期間使用しないと勝手にアカウントが削除されて環境にアクセスできなくなったり、`
`無償の個人環境で作成したものは有償の開発環境や本番環境などに移行することができない という事がありますので、ご注意を。。`