OutSystemsのアクションフローは、IfやForEachなどのロジックツールと、それらを結ぶフロー（矢印）で構成されます。従来のソースコードと比較すると、直感的に作成しやすく、処理の流れもわかりやすいのですが、ロジックツールとフローはキャンバス上に自由に配置できるため、作成時には注意が必要です。わかりにくいアクションフローを作成してしまうと、保守性の低下や開発者が予期しないバグを誘発させる原因となるため、ロジックツールとフローは適切に配置する必要があります。では、わかりやすいアクションフローを作成するには、具体的にどうすれば良いのでしょうか？

本ブログ記事では、わかりやすいアクションフローを作成する方法を、実際の画面で図示しながら解説します。

前提知識　～本ブログ記事でよく使う単語をご紹介～

OutSystemsでわかりやすいアクションフローを作る方法を解説する前に、アクションフローを作る上でかかせない単語３つを次のように定義します。

• アクションフロー：ロジックツールとフローで構成される一連の処理の流れのこと
• ロジックツール：IfやForEachなど特定の処理を行う部品のこと
• フロー：ロジックツール同士を結ぶ矢印のこと

以上を踏まえ、次章より、わかりやすいアクションフローを作るためのポイントについて解説します。

OutSystems でわかりやすいアクションフローを作るには？ ①「フローの大筋の方向を統一する」

ではまず、最初のアクションフローをご覧ください。

いかがでしょうか？正直、目で追うのが大変な、わかりにくいフローですよね？
このアクションフローはStartからEndまでぐるりと回転するようにフローがつながっていますが、このように回転しているものの他にも、ジグザグに繋がっているもの、突然右や左に方向が変化するものなどがわかりにくいアクションフローの代表例として挙げられます。
アプリケーションの開発中、アクションフローに処理をたびたび追加していき、気付けば上図のようなフローになってしまったということは、皆さまにも経験があるのではないでしょうか？
これらのアクションフローがわかりにくい最大の理由は「大筋のフロー方向が決まっていない」ことにあると考えられます。

では、先ほどのアクションフローを、一般的にソースコードを読む方向である「上から下」に統一してみましょう。

いかがでしょうか？フローの方向が一方向になったことで、処理の流れが一目でわかりやすくなりました。どの開発者が見てもアクションフローのStartからEndまでの概観がわかりやすいのではないでしょうか。

方向を統一するという点では、「左から右」に統一する方法もあります。しかし、横方向にアクションフローが長くなってしまうと、確認する際に横スクロールが必要になってしまい、よく使用されるマウスのホイールではスクロールできません。

縦スクロールであればマウスホイールで対応することができるため、非常に便利です。そのため、特に大きな理由がない場合は、「上から下」にフローを統一してアクションフローを作成することをお勧めします。「横スクロールをできるだけ使わないようにする」という観点を意識しておくと、読みやすいアクションフローになります。

OutSystems でわかりやすいアクションフローを作るには？ ②「正常系と異常系を区別する」

次は条件分岐でありがちなアクションフローです。

このアクションフローは、それぞれのテキストエリアの入力値をチェックした後、最後にすべての入力値が有効だったかの判定が行われます。有効だった場合はエンティティにデータが保存/更新され、無効な入力値が１つでもあった場合はメッセージを表示します。
このアクションフローをパッと見て、正しくバリデーションチェックが終了し、データベースにレコードが保存される道筋がどれか、すぐに分かるでしょうか？
Ifでの条件分岐を記述するとき、正しく動作した方（正常系）か、何か異常が起きた方（異常系）なのかを判別しにくいと、わかりにくいアクションフローになってしまいます。

正常系と異常系を一瞥して判別できるように表現すると、わかりやすいアクションフローを作成することができます。この点に注目して修正してみましょう。

修正の際に意識した点は、1. 正常系/異常系の分岐を同一方向にする、2. 正常系/異常系の終了時のEndを区別する の２点です。

1.  正常系/異常系の分岐を同一方向にする
   １点目では、異常系の条件分岐を右方向に展開するように統一しました。この配置をすることにより、正常系/異常系の処理が一目で分かるアクションフローになっています。
   修正前の図のように条件分岐をひし形で記述することもできますが、ロジックツールの上部に記載されるLabelとフローが重なり見にくくなるほか、ロジックツールを配置する際の補助線がないため美しくロジックツールを並べるのが難しい点などから、下、右に分岐する記述をすることを推奨します。
2. 正常系/異常系の終了時のEndを区別する
   ２点目では、最後の入力値チェックの後、正常系と異常系を同じEndにつなぐのではなく、別のEndにつなぐようにしました。このようにすることで、右方向に展開されたEndは何か異常が起こって終了したフローだとわかりやすくなります。
   条件分岐のよりわかりやすい記述には以下のようにIfロジックツールのLabel、コメントを記載するなども有効です。特に条件分岐文が複雑である場合などはコメントを記載することをお勧めします。

OutSystems でわかりやすいアクションフローを作るには？ ③「Switch文はConditionとOtherwiseを区別する」

次は見やすく書くのが非常に難しいSwitch文についてです。

このアクションフローは入力した値の組み合わせに応じたメッセージを出力するSwitch文です。Switch文の中にSwitch文があるため、複雑で見にくいアクションフローとなっています。
Switch文は、１つのロジックツールから複数のフローが伸び、それぞれが違うロジックで構築されるため、見やすく配置することが最も難しいアクションフローの一つです。

上記のようにアクションを修正してみました。先ほどよりは見やすくなったのではないでしょうか？この修正をする際に意識したことは、Switch文のConditionとOtherwiseを明確に区別するという一点です。

Switch文の特徴として、複数の条件分岐であるConditionとそれ以外のOtherwiseがあるという点があります。図示すると下図のようになります。

意識したい点は、OtherwiseとConditionは全く別の条件分岐として考えるべきだということです。そのため、フローを記述する際にもその２つの書き方を明確に分けると決めて記述しました。修正図では、OtherwiseはすべてSwitch文の真横方向に分岐するようにし、Conditionは下、右下方向に伸びるように記述しています。規則的でわかりやすく、ソースコード上で意識したい点も踏襲されています。
また、フローが多数配置される場合は、唯一内部処理を書かなくても配置できるAssignロジックツールにわかりやすいLabelを付け、（今回はNotSet）フローのジョイントにすることで、さらにわかりやすいアクションフローにすることができます。修正図では最も大きいSwitchで分岐したConditionの中で展開されたSwitch文の処理を最後にNotSetでまとめています。このようにすることで、最も大きいSwitch文それぞれのConditionが区別され、わかりやすくなります。

まとめ

さてここまで、わかりにくいアクションフローを例に挙げながら、その理由や修正案をご紹介しました。わかりやすいアクションフローを記述することは、開発/保守/運用を効率よく進めるうえで非常に重要です。
もしかしたら、同じようなアクションフローを見た/書いた経験がある方もいらっしゃったのではないでしょうか？
アクションフローは自由に記述できるからこそ、わかりやすく作成するには意識すべきポイントが多く、配置に困ることもあるかと思います。そのような際は、本ブログ記事をご参考にしていただけますと幸いです。
実際のアプリケーションでは、わかりやすく、パフォーマンスの高いアクションフローを求められます。そのようなアクションフローの作成方法は、OutSystems Developerの協力を得ることで、効率的に学ぶことができます。

弊社では、OutSystemsユーザー企業の活用推進をご支援すべく、OutSystems Developerのトレーニングなども行っております。ご興味のある方は、是非、弊社までお問い合わせください。
https://itsol.dentsusoken.com/outsystems/inquiry/

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