この文章は Salesforce 機械翻訳システムを使用して翻訳されました。詳細はこちらをご参照ください。

join 式を使用したスタイル設定マークアップの可読性の向上

コンポーネントの属性値に基づいて適用するクラス名を指定するときに、マークアップがややこしくなることがあります。マークアップを読みやすくするために、join を使用することを検討します。

次の例では、コンポーネントの属性値に基づいて適用するクラス名を設定します。このコードは判読可能ですが、クラス名間のスペースを忘れがちです。

1<li class="{! 'calendarEvent ' +
2    v.zoomDirection + ' ' +
3    (v.past ? 'pastEvent ' : '') +
4    (v.zoomed ? 'zoom ' : '') +
5    (v.multiDayFragment ? 'multiDayFragment ' : '')}">
6    <!-- content here -->
7</li>

マークアップが数行に分割されていないような場合には、わかりづらくイライラします。

1<li class="{! 'calendarEvent ' + v.zoomDirection + ' ' + (v.past ? 'pastEvent ' : '') + (v.zoomed ? 'zoom ' : '') + (v.multiDayFragment ? 'multiDayFragment ' : '')}">
2    <!-- content here -->
3</li>

マークアップを読みやすくするために、代わりに join を使用することを検討します。次の例の join 式は、' ' を最初の引数として設定するため、式の後続の引数ごとに指定し直す必要がありません。

1<li
2    class="{! join(' ', 
3        'calendarEvent',
4        v.zoomDirection,
5        v.past ? 'pastEvent' : '',
6        v.zoomed ? 'zoom' : '',
7        v.multiDayFragment ? 'multiDayFragment' : ''
8    )}">
9    <!-- content here -->
10</li>

また、join 式は動的なスタイル設定にも使用できます。

1<div style="{! join(';', 
2    'top:' + v.timeOffsetTop + '%',
3    'left:' + v.timeOffsetLeft + '%',
4    'width:' + v.timeOffsetWidth + '%'
5)}">
6    <!-- content here -->
7</div>

Lightning コンポーネント開発者ガイド

join 式を使用したスタイル設定マークアップの可読性の向上

関連項目: