こんにちは、Infragistics ソリューションコンサルタントの田上です。
本記事では、App Builder の「名前変更」機能についてご紹介します。一見すると地味な機能ですが、コードの可読性向上やCSSスタイリングの自由度を格段に高める、まさに“現場に効く”小技です。
App Builder を使ってUIを設計し、コードを自動生成したとき、クラス名が自動採番になっていて困ったことはありませんか？
特に RowLayout や ColumnLayout を入れ子構造で使った場合、CSSのスコープを設定するのが非常に難しくなる…というお声をよくいただきます。
- クラス名が自動採番の番号になっている
- RowLayout や ColumnLayout を入れ子で配置すると、CSS のスコープが複雑になるためクラス名を設定したい
- コピー＆ペーストして配置したUIコンポーネントのクラス名が同じになっている
- クラス名を自由に設定できるようにしたい
こうしたお悩みについて、本記事で紹介する App Builder の「アウトライン」機能で解決可能です！
解決策：アウトラインから名前を変更しよう
App Builder の編集画面左下にある「アウトライン」パネルから、任意のコンポーネント名を右クリックで変更できます。この「名前の変更」が行われると、コード自動生成時に クラス名にも反映される仕組みです。
1. App Builder の編集画面左下「アウトライン」を開く
2. 対象コンポーネントを右クリック →「名前の変更」を選択
3. 任意の「コンポーネント名（クラス名）」に変更しよう
4. コードを自動生成して確認しよう
変更前のクラス名（コード自動生成による自動採番）
<div class="column-layout column-layout_1">
変更後のクラス名（アウトラインによるクラス名変更）
<div class="column-layout aaaaaaaaaa">
App Builder のクラス名について
App Builder 本体でコード自動生成される場合に、各ビュー内で一意なクラス名が自動生成される仕組みが採用されています。
これは、米国本社の判断により、「アプリ全体での一意性」よりも「各ビューごとにスコープを閉じた構造」の方が保守性・管理性に優れるとされているためです。
そのため、開発者の方が名前を変更して明確なクラス構造を定義することで、CSS設計が非常にやりやすくなります。
コピー時のクラス名はどうなる？
App Builder では、コピー時もクラス名の重複を避けるよう自動生成されます。
さらに、コピー後も同様に「アウトライン」から名前変更が可能なので、コピー → 名前変更 → クラス名反映という流れが非常にスムーズに行えます。
まとめ
| お悩み | 解決策 |
|---|---|
| CSSスコープがわかりづらい | アウトラインから名前変更で、明示的なクラス名を付ける |
| コピーしたコンポーネントのクラス名が同じ | 自動でユニーク名が割り当てられ、さらに自由に名前変更可能 |
App Builder でコード自動生成されたソースコードに対して、CSS設計・コード可読性・開発効率を最適化するためにも「アウトラインの名前変更」は現場ではとても頼れる機能です。まだ使っていなかった方は、ぜひ今日から試してみてください。
ぜひ、App Builder を活用してデザインからコード自動生成する世界を体験してみてください。すべてを体験するには、App Builder 無料トライアル にアクセスして最新バージョンを入手してください。
- 「こんなことは実現できるの？」
- 「どうやって実装すれば良いの？」
といった開発上の疑問にソリューションコンサルタントが直接お答えします。
ぜひ japansalesgroup@infragistics.com まで、お気軽にお問合せください。ご意見ご要望を心よりお待ちしています。
無料トライアルのご案内
こちらからトライアルへご参加できます。
無料相談会のご案内
専門コンサルタントが直接ご質問にお答えし、貴社に最適な移行戦略をご提案します。
