Lightning 基本コンポーネントの考慮事項

多くの Lightning 基本コンポーネントは発展中であり、アプリケーションの構築中には次の考慮事項が役立つことがあります。

lightning:buttonMenu

このコンポーネントには、ボタンがトリガされた場合に限って作成されるメニュー項目が含まれます。初期化中、またはボタンがトリガされていない場合は、メニュー項目を参照できません。

lightning:input

パーセント入力と通貨入力の項目では、ネイティブ実装によって要求されるように、段階的な増分を 0.01 に指定する必要があります。

1<lightning:input type="number" name="percentVal" label="Enter a percentage value" formatter="percent" step="0.01" />
2<lightning:input type="number" name="currencyVal" label="Enter a dollar amount" formatter="currency" step="0.01" />

チェックボックス、ラジオボタン、トグルスイッチを操作するときは、aura:id を使用し、コンポーネントの配列をグループ化してトラバースします。グループ化すると、get("v.checked") を使用して、どの要素がオンまたはオフになっているかを判断でき、DOM にアクセスする必要はありません。name 属性と value 属性を使用し、反復中に各コンポーネントを識別することもできます。次の例では、aura:id を使用して 3 個のチェックボックスをグループ化しています。

1<aura:component>
2    <form>
3      <fieldset>
4        <legend>Select your favorite color:</legend>
5        <lightning:input type="checkbox" label="Red" 
6            name="color1" value="1" aura:id="colors"/>
7        <lightning:input type="checkbox" label="Blue" 
8            name="color2" value="2" aura:id="colors"/>
9        <lightning:input type="checkbox" label="Green" 
10            name="color3" value="3" aura:id="colors"/>
11      </fieldset>
12    <lightning:button label="Submit" onclick="{!c.submitForm}"/>
13    </form>
14</aura:component>

クライアント側のコントローラでは、cmp.find("colors") を使用して配列を取得し、checked の値を調べることができます。

type="file" を使用する場合、Salesforce にファイルをアップロードする独自のサーバ側ロジックを提供する必要があります。FileReader HTML オブジェクトを使用してファイルを読み取り、Apex コントローラに送信する前にファイルの内容をエンコードします。Apex コントローラでは、EncodingUtil メソッドを使用してファイルデータをデコードできます。たとえば、Attachment オブジェクトを使用して、親オブジェクトにフィルをアップロードできます。この場合、base64 エンコードファイルを Body 項目に渡し、Apex コントローラでファイルを添付ファイルとして保存できます。

このコンポーネントを使用したファイルのアップロードには、1 MB という通常の Apex コントローラの制限が適用されます。base64 エンコードによるファイルサイズの増加に対応するために、最大ファイルサイズを 750 KB に設定することをお勧めします。ファイルサイズが 1 MB を超える場合は、チャンクを実装する必要があります。チャンクを使用してアップロードするファイルには、4 MB というサイズ制限が適用されます。詳細は、『Apex コード開発者ガイド』を参照してください。または、lightning:fileUpload を使用してファイルをレコードに直接アップロードできます。

lightning:tab

このコンポーネントでは、実行中に本文が作成されます。初期化中にはコンポーネントを参照できません。aura:id を使用してコンポーネントを参照すると、cmp.find("myComponent") の実装時にコンポーネントが未定義の値を返すというように、予期しない結果が返されることがあります。

lightning:tabset

viewport の幅に適合するよりも多くのタブを読み込むと、タブセットはナビゲーションボタンを提供し、横方向にスクロールして、オーバーフローしたタブを表示します。