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

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

全部で8問で、この記事では1問目-4問目が対象。
[Front-End Developer Specializationのサンプル問題について解説 2/2(#5-#8)](https://qiita.com/jyunji_watanabe/items/527d631b9cfafd19bfea)

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

# 1 Architecture Canvasとパターン
カスタム作成したPattern (概ねWidgetのこと）を、Architecture Canvasでいうどのレイヤーに配置すべきかという問題。
Architecture CanvasはOutSystemsが推奨するアーキテクチャ設計用の図法かつ、それを利用した設計方法のことです。
モジュールを役割によって、3つのレイヤーに分類します。

[レイヤーとサブレイヤー](https://success.outsystems.com/ja-jp/Support/Enterprise_Customers/Maintenance_and_Operations/Designing_the_Architecture_of_Your_OutSystems_Applications/The_Architecture_Canvas#.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC.E3.81.A8.E3.82.B5.E3.83.96.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC)より、

- End-User Moduleレイヤー：再利用可能な部品は含まない。エンドユーザーに直接機能を提供する、UIとプロセス
- Core Moduleレイヤー（問題の選択肢ではCore Services）：再利用可能な部品。業務仕様を含むもの
- Foundation Moduleレイヤー：再利用可能な部品。業務仕様を含まないもの

OutSystemsでは、パターンは再利用性の高い一般的なUI部品を指しているため、正解は選択肢AのFoundation Moduleです。
なお、OutSystemsのアーキテクチャ設計を解説する動画コースの1つ[Typical Module Elements](https://www.outsystems.com/training/lesson/2308/typical-module-elements)の1:44あたりにも「UI Patterns or blocks」はFoundation Modulesの典型的な要素として挙げられています。

# 2 CSSの適用順序
OutSystemsでは以下の場所にCSSを設定できる。
[CSSの詳細度](https://success.outsystems.com/ja-jp/Documentation/11/Developing_an_Application/Design_UI/Look_and_Feel/Cascading_Style_Sheets_(CSS)#CSS.E3.81.AE.E8.A9.B3.E7.B4.B0.E5.BA.A6)より

> 1. グリッドのContainerウィジェットのシステムスタイルシート
> 2. ブロックスタイルシート
> 3. 基本テーマを含むテーマスタイルシート（指定された場合）
> 4. 画面またはメールスタイルシート
> 5. グリッド設定がThemeプロパティに定義されているテーマエクストラスタイルシート
> 6. スタイルエディタ使用時にService Studioによって生成されるスタイル
> 7. AttributesまたはExtended Propertiesで定義したインラインスタイル

適用順序は、上記の数字の低い方から。よってCSSの適用ルールから、数字が大きいものほど優先される。
細かい部分は無視して大まかにCSSの適用順序を考えると、Block > Theme > Screen > Style Editor（優先順位は逆）。

問題の画像を見ると、同じclassが、Block/Theme/Screenで記述されています。

- background-color: Blockからred -> Themeからblue -> Screenからblackが適用されるので、後勝ちのルールに従い、black
- color: Blockからblue -> Themeからwhiteが適用されるので、後勝ちのルールに従い、white

これに該当するのは、選択肢D「Background color will be black and the text color will be white.」

# 3 Service Studioプレビュー用のclass
この問題については1点注意があり、試験公開直後にダウンロードできたSample ExamのPDFには間違った回答が載っていました（現在は修正済み）。問題を解いて見るときは、新しいファイルをダウンロードしてください。

styleは通常、ブラウザでも、Service Studioでプレビューしたとき（UIのエディタで開いたとき）でも適用されます。
ところが、属性に「-servicestudio」というプレフィックスをつけたときは、その設定はService Studioでプレビューしたときにしか適用されません。

問題の設定を見ると（選択肢がborderばかり気にしているのでそこだけ抜粋）

``` css
.align-center {
    border-style: dashed;
    -servicestudio-border-width: 4px;
}
```

であるため

- ブラウザ： border-style: dashed; border-widthは指定無し
    - borderの幅は、デフォルト値があるようなので破線が表示される
- Service Studio： border-style: dashed;　かつ　border-width: 4px;
    - 幅4pxの破線が表示される

それぞれスクリーンショット（一部）で確認してみます。
ブラウザ：
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/332987/43e2c05a-4780-f2e8-f79e-5820b8238081.png)

Service Studio：
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/332987/9b3382a2-f613-3163-a9df-7e45381f7a4a.png)

よって、ブラウザでもService Studioのプレビューでもborderが表示されているため、選択肢A「 The Container will have a border when rendered in the browser and in the Service Studio preview.」が正解。

# 4 CSSのロード順
Block, Screen, ThemeのStyle Sheetのロード順を問う問題。
2の引用の通り、Block > Theme > Screenの順でロードされます。

よって最後にロードされるのは、選択肢B「The Screen's Style Sheet」が正解。


# 他のSpecialization試験のサンプル問題
[Architecture Specializationのサンプル問題についてメモ 1/2(#1-#5)](https://qiita.com/jyunji_watanabe/items/c503f8a1ef128b3f5cdb)
[Architecture Specializationのサンプル問題についてメモ 2/2](https://qiita.com/jyunji_watanabe/items/0c2ca229caa155d22c51)

[Mobile Developer Specializationのサンプル問題について解説 1/2(#1-#4)](https://qiita.com/jyunji_watanabe/items/f5943fd91612512c3d92)
[Mobile Developer Specializationのサンプル問題について解説 2/2(#5-#8)](https://qiita.com/jyunji_watanabe/items/e91e98263a11ee82e15f)