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

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

Lightning 基本コンポーネントの使用に関するガイドラインを確認してください。

Lightning コンポーネントのマークアップに依存しないでください。その内部は今後、変更されることがあります。また、コンポーネント内部にアクセスすると、アプリケーションで復元できないエラーが発生する可能性があります。たとえば、cmp.get("v.body") を使用して DOM 要素を検討すると、コンポーネントマークアップが今後変更された場合、問題を引き起こす可能性があります。

警告

LockerService を適用すると、所有していないコンポーネントの DOM をトラバースできなくなります。DOM ツリーにアクセスする代わりに、コンポーネント属性とバインドしている値を活用し、利用可能なコンポーネントのメソッドを使用できます。たとえば、コンポーネントの属性を取得するには、cmp.find("myInput").getElement().name の代わりに cmp.find("myInput").get("v.name") を使用します。後者は、別の名前空間のコンポーネントなど、コンポーネントへのアクセス権がない場合は機能しません。

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

lightning:buttonMenu (ベータ)

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

lightning:formattedDateTime (ベータ)

このコンポーネントは、Apple Safari 10 以下でフォールバック動作を提供します。次のフォーマッティングオプションには、古いブラウザでフォールバック動作を使用するときに例外があります。

era はサポートされていません。
timeZoneName は、短縮形では GMT、長い形式では GMT-h:mm または GMT+h:mm ��追加します。
timeZone は UTC をサポートします。別のタイムゾーン値を使用する場合、lightning:formattedDateTime はブラウザのタイムゾーンを使用します。

lightning:formattedNumber (ベータ)

このコンポーネントは、Apple Safari 10 以下で次のフォールバック動作を提供します。

style を currency に設定した場合、ロケールとは異なる currencyCode 値を指定すると、記号の代わりに通貨コードが表示されます。次の例では、フォールバックモードの場合に EUR12.34 が表示され、その他の場合に €12.34 が表示されます。
1<lightning:formattedNumber value="12.34" style="currency" 2 currencyCode="EUR"/>
currencyDisplayAs では、symbol のみがサポートされます。次の例では、currencyCode がユーザのロケール通貨と一致する場合に限ってフォールバックモードで $12.34 が表示され、その他の場合は USD12.34 が表示されます。
1<lightning:formattedNumber value="12.34" style="currency" 2 currencyCode="USD" currencyDisplayAs="symbol"/>

lightning:input (ベータ)

次のコンポーネントでは日付ピッカーを使用できますが、Lightning Design System のスタイル設定は継承されません。

<lightning:input type="date" />
<lightning:input type="datetime-local" />

パーセント入力と通貨入力の項目では、ネイティブ実装によって要求されるように、段階的な増分を 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:tab (ベータ)

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

lightning:tabset (ベータ)

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

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

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

関連項目: