OutSystems Reactive Webアプリ開発で、初心者〜中級者が最もつまずくテーマのひとつがスクリーンライフサイクルです。「データを取得したはずなのに画面に反映されない」「OnInitializeに書いたのにエラーになる」「BlockのOnReadyが先に動いてしまう」——こうした謎の挙動は、ライフサイクルイベントの実行順序を知ることで一気に解決します。
この記事では、6つのライフサイクルイベントを実行順序・役割・よくあるミスの3点セットで徹底解説します。
1. ライフサイクルとは何か？
スクリーンのライフサイクルとは、「ユーザーが画面を開いてから閉じるまでの間に、OutSystemsが自動的に実行する一連のイベント」のことです。
Traditional Web AppにはPreparationアクションがあり、サーバーサイドで同期的にデータを準備してからHTMLを返していました。しかしReactive Web Appでは、画面の描画とデータ取得が非同期で並行して動くため、「どのタイミングで何が実行されるか」を正確に把握しないと意図しない挙動が起きます。
2. 6つのライフサイクルイベント一覧
| イベント名 | 発火回数 | 主な用途 |
|---|---|---|
| OnInitialize | 1回のみ | ローカル変数の初期化・デフォルト値のセット |
| OnReady | 1回のみ | DOM操作・JavaScript呼び出し・初期アクション実行 |
| OnRender | 複数回 | 画面の再描画時に毎回実行（基本的に使わない） |
| OnAfterFetch | Fetch完了毎 | Aggregate/Data Actionのデータ取得完了後の後処理 |
| OnParametersChanged | パラメータ変化毎 | Blockの入力パラメータが変わった時の再処理 |
| OnDestroy | 1回のみ | 画面破棄時のクリーンアップ（タイマー解除など） |
3. 実行順序を図で理解する
画面を開いたときのイベント実行順序は以下のとおりです。親Screenと子Blockが存在する場合、OnInitializeは親→子の順で実行されますが、OnReadyは逆に子→親の順で実行される点が最大のポイントです。
| 順番 | イベント | 説明 |
|---|---|---|
| ① | 親Screen：OnInitialize | 変数の初期化。サーバーアクセスは禁止 |
| ② | 子Block：OnInitialize | 子のBlock内の変数初期化 |
| ③ | Aggregate / Data Action（非同期） | Fetch = At Start のデータ取得が並行して開始 |
| ④ | 子Block：OnReady | 子のDOM構築完了。操作可能になる |
| ⑤ | 親Screen：OnReady | 全コンポーネントのDOM構築完了 |
| ⑥ | OnAfterFetch（Aggregate完了後） | データ取得完了後に発火。データ確定後の処理はここ |
| ⑦ | OnRender（変数変化のたびに） | 画面の再描画が必要になるたびに発火 |
🚫 重要：OnInitializeでサーバーにアクセスしてはいけない
OnInitializeが完了するまで画面の描画が始まりません。ここでServer ActionやAggregate（Fetch = On Demand以外）を呼ぶと、ユーザーは白い画面を見続けることになります。サーバーアクセスは必ずAggregateまたはData Actionに任せてください。
4. 各イベントの詳細解説と使いどころ
① OnInitialize
画面・Blockが初期化されるタイミングで1回だけ実行されます。ローカル変数のデフォルト値セットや、入力パラメータを使った初期値の計算に使います。
📝 使っていいこと / 使ってはいけないこと
✅ ローカル変数への値のセット
✅ 入力パラメータを使った計算
🚫 Server Actionの呼び出し
🚫 Aggregate（Fetch = At Start）への依存
🚫 DOM操作
② OnReady
すべてのコンポーネントのDOMが構築された後に1回実行されます。JavaScriptでDOM要素を操作したい場合はOnReadyが安全な唯一の場所です。子Blockより親Screenのほうが後に実行される点に注意が必要です。
③ OnRender
画面の変数や状態が変わるたびに何度も実行されます。原則として何も書かないのが正解です。特にOnRender内でAggregate Refreshを呼ぶと、データ取得→変数変化→再描画→OnRender→再取得という無限ループが発生します。
🚫 OnRenderでやってはいけないこと
OnRender内でRefresh Dataを呼ぶと無限ループになります。「画面が固まる」「ローディングが終わらない」という症状の多くがこれです。
④ OnAfterFetch
AggregateまたはData Actionのデータ取得が完了した後に実行されます。「データが取れてから次の処理をしたい」という場面に最適です。取得データを別の変数に加工して入れたり、取得件数に応じて条件分岐したりする処理をここに書きます。
⑤ OnParametersChanged
Blockの入力パラメータが外側から変更されたときだけ実行されます。パラメータの変化に応じてAggregate Refreshや変数の再計算を行う場合に使います。親Screenの変数は変化しません。子Block内の処理のみが対象です。
⑥ OnDestroy
画面がメモリから破棄されるタイミングで実行されます。JavaScriptで設定したタイマー（setInterval）の解除や、外部ライブラリのインスタンス解放など、後片付け処理に使います。
5. よくある間違いと正しい対処法
| 症状 | 原因 | 正しい対処 |
|---|---|---|
| 画面が真っ白で固まる | OnInitializeでServer Action呼び出し | Server ActionをData Actionに移す |
| ローディングが終わらない | OnRenderでRefresh Dataを呼んでいる（無限ループ） | OnRenderからRefresh Dataを削除 |
| 取得データが空のまま処理される | OnReadyでAggregateのデータを使おうとしている（まだ取得中） | AggregateのOnAfterFetchに処理を移す |
| BlockのOnReadyで親のデータが使えない | 子BlockのOnReadyは親のOnReadyより先に実行される | BlockにEventを設置して親から呼ぶ構成にする |
| パラメータを変えても再取得されない | OnParametersChangedでRefresh Dataを呼んでいない | OnParametersChangedにRefresh Dataを追加 |
まとめ
✅ この記事のポイント
- OnInitialize：変数初期化のみ。サーバーアクセス禁止
- OnReady：DOM操作はここ。子→親の順で実行される
- OnRender：原則何も書かない。Refresh Dataは無限ループの元
- OnAfterFetch：データ取得後の処理はここ
- OnParametersChanged：Blockのパラメータ変化に反応
- OnDestroy：後片付け処理のみ
コメント