VisualforceでLWCを動かすLightning Outの手順

01なぜVisualforceの中でLWCを使うのか

移行しきれていない画面がVisualforceに残っていても、部品単位ならLWCを差し込めます。Lightning Outという仕組みを使うと、VisualforceページのdivタグにLWCを描画できます。画面をまるごとLightning化しなくても、新しく作る部品だけLWCで書けます。

02全体の構成

LWCを直接Visualforceページから呼び出すことはできません。LWCを外へ公開するための、薄いAuraアプリが1つ要ります。これはSalesforce公式のLightning Outの仕様で、いまも変わっていません。

03Auraアプリ

LWCContainerSample.app

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

中身は空です。LWCを外部へ公開するための入れ物として、ltng:outAppを継承するだけです。

LWCContainerSample.app-meta.xml

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

apiVersionを56.0から67.0（Summer '26）へ上げています。

04LWC本体

lightningOutComponentSample.html

<template>
    <div class="slds-box">
        <p>Lightning Web Component Sample</p>
    </div>
</template>

SLDSのボックスにテキストを表示するだけの最小構成です。

lightningOutComponentSample.js

import { LightningElement } from 'lwc';
export default class LightningOutComponentSample extends LightningElement {}

プロパティもロジックも持たない最小のコンポーネントです。

lightningOutComponentSample.js-meta.xml

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

apiVersionを67.0へ上げています。isExposedはfalseのままでよく、Lightning Outからの呼び出しに公開設定は要りません。

05Visualforceページ

LightningOutSample.page

<apex:page standardStylesheets="false" sidebar="false" applyBodyTag="false" docType="html-5.0">
    <apex:includeLightning />
    <div id="lwc-container-Sample"></div>
    <script>
        $Lightning.use("c:LWCContainerSample", function () {
            $Lightning.createComponent(
                "c:lightningOutComponentSample",
                {},
                "lwc-container-Sample",
                function (component) {
                    console.log("component: " + component);
                }
            );
        });
    </script>
</apex:page>

apex:includeLightningでライブラリを読み込み、$Lightning.use()でAuraアプリを、$Lightning.createComponent()でLWCを描画します。読み取りだけの表示サンプルです。

⚠️ $Lightning.use()に渡す名前はAuraアプリの名前（c:LWCContainerSample）です。$Lightning.createComponent()に渡す名前がLWCの名前（c:lightningOutComponentSample）になります。ここが最初のつまずき所です。

LightningOutSample.page-meta.xml

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

apiVersionを67.0へ上げています。

06動かすときの条件

サードパーティCookieを許可していないブラウザでは、コンポーネントが表示されません。Lightningコンポーネントは、Visualforceページと別のドメインから配信されるためです。Auraアプリ・LWC・Visualforceページは、同じ組織の中に置く必要があります。

07タブに配置して確認する

1. Visualforceページ用のタブを作る

   設定のタブから、LightningOutSampleページを開くタブを新規作成します。

2. 作ったタブを開く

   アプリケーションのナビゲーションに追加するか、URLで直接開きます。

3. LWCの表示を確認する

   divタグの中に「Lightning Web Component Sample」の文字が表示されていれば成功です。表示されないときは、ブラウザの開発者ツールでコンソールのエラーを確認します。

08ここで間違えやすい

09確認した環境

• 2026年9月 ／ Salesforce Summer '26（API バージョン 67.0）時点の公式ドキュメントで、VisualforceへのLWC埋め込みの構成（Auraアプリが要ること）、Lightning Outのベータ扱い、サードパーティCookieの条件を確認しています
• コードは API バージョン 67.0 で書いています

10まとめ

• VisualforceページにLWCを表示するには、いまもLightning Outを使います。LWCを直接呼び出す方法はありません
• LWCを外へ公開するための、空のAuraアプリが1つ要ります。ここに業務ロジックは書きません
• Visualforceページ側はapex:includeLightning・$Lightning.use()・$Lightning.createComponent()の3点で組み立てます
• Lightning Outはいまも公式にベータ扱いです。サードパーティCookieを許可していないと表示されません
• apiVersionは56.0から67.0（Summer '26）へ上げています