きーんくん ブログ

[Salesforce]Hello World Lightning Web コンポーネントの作成

Hello World Lightning Web コンポーネントの作成

Lightning Web コンポーネントを作成する

新しいコンポーネントの名前として helloWorld と入力します。

helloWorld.html

<template>
    <lightning-card title="HelloWorld" icon-name="custom:custom14">
        <div class="slds-m-around_medium">
          <p>Hello, {greeting}!</p>
          <lightning-input label="Name" value={greeting} onchange={changeHandler}></lightning-input>
        </div>
    </lightning-card> 
</template>

helloWorld.js

import { LightningElement } from 'lwc';

export default class HelloWorld extends LightningElement {
    greeting = 'World';
    changeHandler(event) {
      this.greeting = event.target.value;
    }    
}

helloWorld.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>57.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>
    </targets>
</LightningComponentBundle>

Lightning Experience でアプリケーションにコンポーネントを追加する

アプリケーションランチャー () で、[Sales (セールス)] を見つけて選択します。
をクリックして、[Edit Page (編集ページ)] を選択します。
Lightning コンポーネントのリストの [Custom (カスタム)] 領域から helloWorld Lightning Web コンポーネントをページキャンバスの上部にドラッグします。

右列に HelloWorld Lightning Web コンポーネントが配置された Lightning アプリケーションビルダー。

[Save (保存)] をクリックします。
[Activate (有効化)] をクリックします。
[Assign as Org Default (組織のデフォルトとして割り当て)] をクリックします。
[Save (保存)] をクリックします。
もう一度 [Save (保存)] をクリックしてから、をクリックしページに戻ります。
ページを更新すると、新しいコンポーネントが表示されます。

HelloWorld Lightning Web コンポーネントを表示するホームページ。

[Thchnical terms]ユーザーエクスペリエンス(UX)

ユーザーエクスペリエンス(UX)

具体的な例を挙げると、あるユーザーがECサイトを利用した際に、欲しい商品が見つけやすかった、商品の写真が鮮明で説明もわかりやすいと感じた、購入への操作や入力がスムーズに進んだといった体験はどれもUXの一部です。

ユーザーエクスペリエンスを向上させるには、コンテンツのビジュアルや構造のデザインを見直す、ユーザーの目的達成までのスピードを改善する、コンテンツのクオリティを上げるといった施策が有効です。また、高いユーザーエクスペリエンスには「ユーザーのフィードバック」も不可欠となってきます。

企業が質の高いUXを提供すると、ユーザーは自身の需要を心地良く満たす手段を得られます。 UXに注力した企業は、自社の商品やサービスの根強いファンを獲得でき、安定的な収益基盤を得ることにつながるのです。

企業Webサイトの運用においても、サービスや使い勝手の改善だけでなく、UXを検討する必要があります。とくにスマートフォンやタブレットなどデバイスが急速に進化し、ユーザーとの接点環境が大きく変化しているので、UXはますます重要になっています。

[Salesforce]Lightning Web ComponentでquerySelector()メソッド

Lightning Web ComponentでquerySelector()メソッド

querySelector()メソッドは、DOM要素を検索するためのメソッドの一つ。

LWCコンポーネントのDOM要素を取得するために、

this.template.querySelectorを使用することができます。

これによってどのコンポーネントのDOM要素を取得するのかを指摘できます。

・使い方

使用元のメソッドやプロパティに@apiデコレータをつけて、

他のコンポーネントで使う場合には使用元のDOM要素を指定し、メソッドを記載すれば使用できるようになります。

[Salesforce]Lightning Web Component開発手順

Lightning Web Component開発手順

・JavaScript ファイルを作成

・HTML ファイルを作成

・(必要に応じて）CSS ファイルを作成

HTML：枠組

Javascritp：動く仕組み

デコレータ：昨日を繋ぐアイテム

デコレータの種類

@api

@tract

@wire

@tractについて

・コンポーネント内のJavascriptとHTMLを繋ぐためのデコレータ

@wireについて

・Javascriptの変数とApexのメソッドを繋ぐためのデコレータ

@apiについて

・公開するために使うデコレータ

[Salesforce]SLDS

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>

[Salesforce]Lightning Web Component間の通信方法

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;
}

[Definition]モックアップ

モックアップ (mock-up) とは「模型」という意味を持ちます。
工業製品では、内部のシステムが実装されておらず機能しないものの、外面は完成品に近いサンプル品を指します。

Webサイトやモバイルアプリなどの制作現場においても、色やレイアウトなどのビジュアルデザインを表現したサンプルとしてモックアップを作成します。

またWeb制作の現場ではデザインカンプという言葉も耳にします。「カンプ」とは一般的に、デザインやレイアウトを含めた仕上がりを具体的に表現した完成サンプルのことを指します。

[Salesforce]superキーワード

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」です。

[Salesforce]switch構文

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');
   }
}

[Salesforce Recommended Plugins]Salesforce Change Set Turbo使い方

Salesforce Change Set Turbo使い方

・Classicモードで開きます。

・送信変更セットを開きます。

・変更セットの「追加」ボタン押下します。

・「コンポーネントの種類」を「カスタム項目」に変更します。

EditModeにて「upload commponent from csv」ボタン押下いて、以下のuploadtest.csvをUploadすると変更セットに追加されます。

Name,API,Type,Type API
test1,test1__c,testobj,testobj__c

その追加されたのを「View Mode」で確認できます。