きーんくん ブログ

SLDS

Salesforce Lightning Design System

Salesforce社が提供しているCSSフレームワーク

SLDSを利用することで、１からCSSを記述せずに Lightning Experience のデザインを踏襲した画面開発ができます。

よく使うSLDS

Box

例

<div class="slds-box">
  <p>hello world.</p>
</div>

Grid

例
<div class="slds-grid slds-gutters">
    <div class="slds-col">
        <lightning-input type="text" label="テキスト(1)" ></lightning-input>
    </div>
    <div class="slds-col">
        <lightning-input type="text" label="テキスト(2)" ></lightning-input>
    </div>
    <div class="slds-col">
        <lightning-input type="text" label="テキスト(3)" ></lightning-input>
    </div>
</div>

Modals

例
<section role="dialog" tabindex="-1" aria-modal="true" aria-labelledby="modal-heading-01" class="slds-modal slds-fade-in-open">
    <div class="slds-modal__container"> <button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse">
            <svg class="slds-button__icon slds-button__icon_large" aria-hidden="true">
              <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#close"></use>
            </svg>
            <span class="slds-assistive-text">hello world</span>
          </button>
        <div class="slds-modal__header">
            <h1 id="modal-heading-01" class="slds-modal__title slds-hyphenate">hello world</h1>
        </div>
        <div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
            <p>hello world.</p>
        </div>
        <div class="slds-modal__footer"> <button class="slds-button slds-button_neutral" aria-label="Cancel and close">Cancel</button> <button class="slds-button slds-button_brand">Save</button> </div>
    </div>
</section>
<div class="slds-backdrop slds-backdrop_open" role="presentation"></div>

Lightning Web Component間の通信方法

・publicプロパティ、publicメソッド

親コンポーネントから子コンポーネントへ値を渡す方法になります。

親コンポーネントから@apiデコレーターを使用して、子コンポーネントへ値を直接渡します。

publicParent.html

<template>
        <lightning-card title="Parent">
                <div class="slds-grid">
                        <div class="slds-p-around_medium">
                                <lightning-combobox 
                                        name="value" 
                                        label="value" 
                                        value={value} 
                                        options={options} 
                                        onchange={handleChange} 
                                        variant="label-hidden">
                                </lightning-combobox>
                        </div>
                        <div class="slds-p-around_medium">
                                <c-public-child value={value}></c-public-child>
                        </div>
                </div>
        </lightning-card>
</template>

publicParent.js

import { LightningElement } from 'lwc';

export default class PublicParent extends LightningElement {
        value = '';

        get options() {
                return [
                        { label: '', value: '' },
                        { label: 'A', value: 'A' },
                        { label: 'B', value: 'B' },
                        { label: 'C', value: 'C' }
                ];
        }

        handleChange(event) {
                this.value = event.detail.value;
        }
}

pulicChild.html

<template>
        <!-- Parentから渡された値を表示する -->
        <div>
                <span>通信値 {value}</span>
        </div>
</template>

publicChild.js

import { LightningElement, api } from 'lwc';

export default class PublicChild extends LightningElement {
        // publicプロパティは@apiデコレーターを使用して宣言します。
        // @apiをつけることで親コンポーネントからアクセス可能になります。
        @api value;
}

superキーワードは、親クラスのコンストラクタおよびメソッドを上書きできます。

例えば、次のクラスがあるとします。

public virtual class SuperClass {
    public String mySalutation;
    public String myFirstName;
    public String myLastName;

    public SuperClass() {

        mySalutation = 'Mr.';
        myFirstName = 'Carl';
        myLastName = 'Vonderburg';
    }

    public SuperClass(String salutation, String firstName, String lastName) {

        mySalutation = salutation;
        myFirstName = firstName;
        myLastName = lastName;
    }

    public virtual void printName() {

        System.debug('My name is ' + mySalutation + myLastName);
    }

   public virtual String getFirstName() {
       return myFirstName;
   }
}

Superクラスを拡張して、サブクラスで使います。

public class Subclass extends Superclass {
  public override void printName() {
        super.printName();
        System.debug('But you can call me ' + super.getFirstName());
    }
}

Subclass.printName をコールした場合に期待される出力は、「My name is Mr. Vonderburg. But you can call me Carl」です。

switch構文は次のとおりです。

switch on expression {
    when value1 {		// when block 1
        // code block 1
    }	
    when value2 {		// when block 2
        // code block 2
    }
    when value3 {		// when block 3
        // code block 3
    }
    when else {		  // default block, optional
        // code block 4
    }
}

switch on i {
   when 2 {
       System.debug('when block 2');
   }
   when -3 {
       System.debug('when block -3');
   }
   when else {
       System.debug('default');
   }
}

switch on i {
   when 2, 3, 4 {
       System.debug('when block 2 and 3 and 4');
   }
   when 5, 6 {
       System.debug('when block 5 and 6');
   }
   when 7 {
       System.debug('when block 7');
   }
   when else {
       System.debug('default');
   }
}

switch on someInteger(i) {
   when 2 {
       System.debug('when block 2');
   }
   when 3 {
       System.debug('when block 3');
   }
   when else {
       System.debug('default');
   }
}