[OutSystems]Front-End Developer Specializationのサンプル問題について解説 2/2(#5-#8)

各問題を確認し、回答に必要な資料への解説をまとめます。
この試験のサンプル問題は、2021/11時点では英語のみ。

全部で8問で、この記事では5問目-8問目が対象。
Front-End Developer Specializationのサンプル問題について解説 1/2(#1-#4)

サンプル問題は、
https://www.outsystems.com/learn/certifications/
の、「Front-end Developer Specialist」項目のリンク「Exam Details」でダウンロードできる資料から。「Sample Exam」がついている方のファイルが該当します。

5 パターンの設計

ここでいうパターンというのは、OutSystems UIが提供するような再利用性の高いUI部品のことですね。

パターンに関連するBest Practicesとして、フロントエンドアーキテクチャのベストプラクティスに記載があります。

「拡張性の高いパターンを作成するときに尊重すべき3つの禁止事項」から抜粋すると、

1. 要素にインラインスタイルを追加しない。
2. 色の名前（.Black）、大きさ（.Width20px）、スタイル（.Bold）、サイズ（.fontSize15）など、目的とする値のクラスを追加しない。
3. ビジネスロジックをこれらのパターン内に配置しない。

まず、3.が選択肢A「A custom pattern should avoid business logic.」に合致しますね。聞かれているのは、「NOT a best practice」ということなので、間違っている選択肢を選びます。

選択肢C「A custom pattern should define the structure and the required styling.」。つまり、「パターンは構造と必要なスタイルを定義すべき」ということ。上記抜粋だと微妙に見えますが、共通UI部品にはなるべくスタイルを持たせません。何しろ、共通部品なので配置先が色々なスタイルを持っている可能性が想定され、独自のスタイルを持っていると配置先とマッチしなくなることが懸念されるからです。

というわけで、後段の「スタイルを定義すべき」の部分が間違っているので選択肢Cが正解（間違った選択肢）。
一応補強として、ちょっと古い動画ですが、Creating a new patternの資料に、「Guidelines to building good patterns」というスライドがあり、

Build a structure without theming, just the basic skeleton

（構造のみを構築し、Themeを含まない。基本的な骨組みだけ。）

という記述があるのとも整合します。

他の選択肢は、ズバリの記述をドキュメントから見つけられていませんが、一般的な部品作成の心得としては妥当かと思われます。

6 JavaScript要素

問題は、OnReadyイベントのハンドラにJavaScript要素がある。その要素には、

setTimeout(function(){$actions.Toggle();}, 10);

setTimeoutはOutSystemsとは関係のない関数で、第2引数に指定した数字「ミリ」秒後に、第1引数の関数を実行するというもの。
関数は、Client ActionのToggleを呼び出しています。

全選択肢を正確に判断しようと思うと、OutSystemsの知識がいりますが、選択肢B「The Toggle Action executed in the JavaScript code will be called after 10 seconds.」（JavaScriptコードで実行されるToggle Actionは10秒後に呼び出される」が、10秒後でなく10ミリ秒後なので間違い。聞かれているのはfalseの選択肢なのでこのBが正解。

一応他の選択肢についても見ておくと、

A: JavaScriptを使用してモバイルおよびリアクティブアプリを拡張するより、JavaScriptから$actions.ClientAction名で呼び出したときの戻り値は、

各クライアントアクションの出力パラメータを含む、シンプルなJavaScriptオブジェクトです。

なので正しい。

C: (onDestroyでsetTimeoutを解除しないという条件で）関数が動作する前に画面遷移したらどうなるか、という選択肢。回答としては、ToggleがClient Actionsの下のActionだと普通に動作し、Screen Actionだとエラーになります。Toggleがどうか、という記述が足りないので、どちらとも取れます。が、選択肢Bが確実に間違いなので、Toggleは恐らくScreen Actionであり、選択肢Cは正解なのでしょう。

ちなみに、エラーを発生させると以下のようなエラーメッセージがコンソールに表示されます。画面を移動しているために、他の画面のScreen Actionは呼び出せなくなっているということですね。

Invalid call of the 'Toggle' client action of the 'MainFlow.Screen1' since the latter is not currently active. This is likely due to a platform's client action being used as an event handler or in a setTimeout function. Consider removing this call by using the 'On Destroy' event of the screen/block or moving your logic to a global client action.

D: 選択肢の通り、JavaScriptからは、Screen Actionか、Client Actionsの下に定義したActionを呼び出せます。

7 JavaScriptからの非同期Actionの呼び出し

Client Actionは特定の条件を満たすと非同期に実行されるようになります。
この問題は非同期JavaScriptコードを定義するの内容が聞かれています。

A: Client Actionが非同期に実行されるのは、

• 内部のJavaScript要素で\$resolveや\$rejectが呼ばれたとき
• 内部でServer Action呼び出しやAggregate/Data ActionのRefreshを行ったとき

あるJavaScript要素で、事前定義された\$resolve()または\$reject()関数のどちらかが使用されている場合、その要素が属するクライアントアクションは非同期とみなされます。さらに、あるクライアントアクションにサーバーアクションの実行やAggregateの更新などのサーバー呼び出しが含まれる場合も、クライアントアクションは非同期とみなされます。

よって前者のみであるとする選択肢Aは間違い。

B: 非同期Client Actionの戻り値は単純なJavaScript ObjectではなくPromiseなので誤り。

非同期クライアントアクションが呼び出されると、その戻り値は同期の場合のようにJavaScriptオブジェクトではなく、Promiseとなります。

C: \$rejectを実行すると、

1. Projectのチェーンがthenの第2引数 (onRejected)かcatchを含む場合は、そのコールバックで
2. そうでない場合はException Handlerで

処理される。選択肢C「The \$reject() function will trigger an Exception, when used, which will be
handled by the first Exception handler available.」（\$reject関数は例外を起こし、その例外は最初の捕捉可能なException Handlerで処理される）は基本的に正しい。thenやcatchで処理されたときのことを考えると微妙ですが、他の選択肢が間違っているのでCでいいでしょう。

D: \$resolveは非同期処理の成功を示します。

呼び出された非同期クライアントの実行完了を知らせるには、事前定義された\$resolve()関数を使用します。

8 Placeholderのphクラス

この問題はマニアックすぎる気がしますが……。
また、試験PDFのOnline resourcesにリンクのあるページには載っていなかったと思います。

PlaceholderというのはBlock (UI部品を定義する要素) に配置するもの。このUI部品は、Screenや他のBlockに置いて使うのですが、その際に開発者はPlaceholderに任意のWidgetを配置できます。

.phクラスは、中身が空の要素を実行時に隠す（display: noneにする）役割を持ちます。

Pattern Developmentの2:50あたりに少しだけ説明があります。

optionally add the ph class to any element that we don't want displayed if it doesn't include any content

というわけで選択肢Aが正解。

他のSpecialization試験のサンプル問題

Architecture Specializationのサンプル問題についてメモ 1/2(#1-#5)
Architecture Specializationのサンプル問題についてメモ 2/2

Mobile Developer Specializationのサンプル問題について解説 1/2(#1-#4)
Mobile Developer Specializationのサンプル問題について解説 2/2(#5-#8)