基本コンポーネントの参照についての検証

Base components help you develop apps quickly. However, not all base components are designed for mobile environments. The SLDS Validator for VS Code can help you determine the mobile readiness of the base components you use.

コンポーネントが次の条件を満たす場合、そのコンポーネントはモバイル対応と見なされます。

コンポーネントがモバイルデバイスに表示されたとき、次のように正しくレンダリングされる。
- コンポーネントが小さな画面サイズ内に反応して、そのサイズに収まるように表示する。
- コンポーネント要素とコントロールのレイアウトが適切に保たれる。
タッチ入力を行うとき、コンポーネントのために使いづらい操作が必要にならない。たとえば、狭い画面の携帯電話では、横方向のスクロールが不便だったり、サポートされていなかったりします。
コンポーネントを操作するときに、コンポーネントをサーバ側のコントローラーに常時接続する必要がない。たとえば、入力支援検索では、入力される検索語が変わるたびに新しいサーバ要求が必要になる場合があります。
コンポーネントがデスクトップ以外のブラウザで使用される場合の既知の問題がない。

SLDS バリデータでは、「コンポーネントの参照」で使用されているモバイル対応コンポーネントのリストと同じものが使用されます。すべての基本コンポーネントのドキュメント、例、仕様については、Lightning コンポーネントライブラリの [Component Reference (コンポーネントの参照)] に表示されます。コンポーネントを選択して、[Example (例)]、[Documentation (ドキュメント)]、[Specification (仕様)] のいずれかをクリックします。

基本コンポーネントの検証には、SLDS Validator for Visual Studio Code のバージョン 1.4.4 以降が必要です。

SLDS Validator はグローバルに有効化または無効化できます。VS Code の [Preferences (個人設定)] で、[Settings (設定)] | [Extensions (拡張機能)] | [SLDS Validator] | [Salesforce-vscode-slds] | [Basic: Mobile Validation (基本: モバイル検証)] に移動します。

コーディングの際、SLDS Validator によって、モバイルの問題があるコンポーネントにマーカーが表示されます。たとえば、バリデータはすべての基本コンポーネントの参照と「モバイル対応」リストを照合します。このリストは、制限のあるモバイル画面でもデスクトップと同じように機能するコンポーネントを示しています。コンポーネントがリストにない場合、バリデータはそのコンポーネントを使用するコードを黄色の下線で強調表示します。黄色の下線が表示されていない基本コンポーネントの参照は、モバイルへの移行に対応しています。

警告の詳細を参照するには、強調表示されたコードの上にマウスカーソルを置きます。

基本コンポーネントの検証の警告メッセージ

検証の警告を回避または対処するには、次の方法について検討してください。

モバイル対応の基本コンポーネントのみを使用する。基本コンポーネントを見つけるには、次の手順を実行します。
- Component Reference (コンポーネントの参照) を開きます。
- [Filters (条件)] を展開します。
- [Targets (対象)] で、[Salesforce Mobile App (Salesforce モバイルアプリケーション)] を選択します。絞り込まれたリストには、モバイル対応のコンポーネントのみが表示されます。
既存の Lightning Web コンポーネントをモバイル対応に更新する。次のトピックを参照してください。
- アクセシビリティ対応モバイルデザインガイドラインに従う
- Lightning Design System: Accessible Mobile Design Guidelines (アクセシビリティ対応モバイル設計ガイドライン) (英語)
初めてモバイル対応コンポーネントを作成する場合は、「モバイル対応コンポーネントの作成」から始めてください。