1. 목적

Lightning Web Coponent를 Visualforce에 표시해 보자! ! ! !

2. LightningOut을 사용합시다! ! !

Salesforce의 공식 사이트에는 개발자 가이드가 있습니다.
거기에 LightningOut의 사용법을 기술했으므로,
참조가 된다고 생각합니다.

3. 구현 예

소스 구성도

force-app
 └─main
     └─default
          ├─aura
          │  └─LWCContainer
          ├─lwc
          │  └─lightningOutDemoComponent
          └─pages
              ├─LightningOutDemo.page
              └─LightningOutDemo.page-meta.xml

Aura:LWCContainer



LWCContainer.app

<aura:application access="GLOBAL" extends="ltng:outApp">
</aura:application>

LWCContainer.app-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<AuraDefinitionBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>50.0</apiVersion>
    <description>A Lightning Application Bundle</description>
</AuraDefinitionBundle>

LWCContainerController.js

({
    myAction : function(component, event, helper) {

    }
})

LWC:lightningOutDemoComponent



lightningOutDemoComponent.html

<template>
    <div class="slds-box">
        <p>ここはLightning Web Componentです。</p>
    </div>
</template>

lightningOutDemoComponent.js

import { LightningElement } from 'lwc';

export default class LightningOutDemoComponent extends LightningElement {}

lightningOutDemoComponent.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>52.0</apiVersion>
    <isExposed>false</isExposed>
</LightningComponentBundle>

pages:LightningOutDemo



LightningOutDemo.page

<apex:page standardStylesheets="false" sidebar="false" applyBodyTag="false" docType="html-5.0">
    <!-- lightning Design System -->
    <apex:includeLightning />
    <div id="lwc-container"></div>
    <script>
        $Lightning.use("c:LWCContainer", function () {//AuraAppContainer
            $Lightning.createComponent("c:lightningOutDemoComponent",//LWCコンポネント
                {},//lwcコンポネントに渡すパラメータ
                "lwc-container",//divのid
                function (cmp) {//コールバック関数
                    console.log('Load Success:' + cmp);
                }
            );
        });
    </script>
</apex:page>

LightningOutDemo.page-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<ApexPage xmlns="http://soap.sforce.com/2006/04/metadata"> 
    <apiVersion>52.0</apiVersion>
    <label>LightningOutDemo</label>
</ApexPage>

4. Salesforce 측 동작 확인

➀ Salesforce 측 Visualforce 탭 만들기

➁ 탭 열기

➂ Classic 모드에서 확인