【必読】なぜ今、Aura ではなく LWR を選ぶべきなのか？

【LWR開発】LWCとCMSを拡張する実践ガイド

2025.12.152026.05.28

必須級のLWCコンポーネント

【LWC】LWRサイトのテーマに完全適応するログイン・ログアウトを切り替えるボタンの実装【Design Tokens活用】

LWRサイトで、ユーザーのログイン状態に応じて「ログイン」と「ログアウト」の表示を自動で切り替えるLWCの実装方法を解説します。ゲストユーザー判定と動的なURL生成を含む完全なコード例です。

【Spring ’26】LWRサイトに「ダークモード」を実装する：ExperiencePropertyTypeBundleによるテーマ管理コンポーネント作成ガイド

Spring '26の新機能ExperiencePropertyTypeBundleを使用して、LWRサイト用の高度なダークモード切替コンポーネントを作成します。設定画面のUI構築からCSS変数の動的適用まで、最新の標準実装を完全解説。

“Experience Delivery 時代”の新常識

LWRにおけるサードパーティスクリプトの正しい読み込み方：x-oasis-script の活用とExperience Delivery (SSR) 時代の注意点

LWRサイトで外部スクリプトが動作しない問題を解決する <x-oasis-script> の使い方と、Experience Delivery (SSR) 環境下でサーバーエラーを防ぐための実装コード、CSP設定の注意点を上級開発者向けに解説します。

LWRサイトのパフォーマンス・デバッグ術：Chrome DevToolsとSSR時代のボトルネック特定（Community Page Optimizerは使えない？）

LWRサイトやExperience Delivery環境でのパフォーマンスチューニング手法を解説。Community Page Optimizerが使えない現状での代替手段、SSR環境特有のデバッグモード、ハイドレーションエラーの調査方法をChrome DevToolsを使って実践的に紹介します。

Agentforceを拡張

エージェントの見た目や処理を開発で拡張します。

Agentforce × LWC完全実装ガイド：Function CallingとLightningTypeBundleで実現する「GUIを持つAIエージェント」

AgentforceのFunction Callingにおいて、LWCを用いたリッチな入出力（Input/Output）UIを実装する方法を完全解説します。LightningTypeBundleのメタデータ構成からApex DTO設計、イベントハンドリングまでを網羅した実践ガイドです。

MIAW関連

Experience CloudやAgentforceと関連が深いMIAW関連の開発。

要ログインのLWRサイトでユーザーID/取引先責任者IDをメッセージングレコードに渡す方法【開発極小】

ログインが必要なLWRサイトで、Pre-Chat APIとLWCを使用してログインユーザーの取引先責任者IDをオムニチャネルフローに渡す方法を解説。LWSエラーの回避策と必須のマッピング設定も網羅しています。

LWRにおけるLWC開発とスタイリング

LWR環境特有のCSS変数（Styling Hooks）や設定ファイルの書き方をマスターします。

【LWR × Design】脱・Salesforce感！Styling Hooks を使ってサイトのデザインを自由に操る方法

LWRサイトで「Salesforceっぽさ」を消すためのデザイン戦略。Styling Hooks（CSS変数）の正しい使い方と、UXを向上させるスケルトンスクリーンの実装方法を解説。

【LWC開発】システム管理者に「設定」を委譲しよう！Experience Cloud用 js-meta.xml 完全ガイド

Experience Cloud用LWC開発の要、js-meta.xml の完全ガイド。ビルダーのプロパティパネルに設定項目を表示させ、システム管理者がカスタマイズ可能なコンポーネントを作る方法を解説。LWR向けのCMS連携設定も紹介。

データ連携とCMS拡張

CMSコンテンツやSalesforceデータをより柔軟に扱うための実装テクニックです。

【LWR × CMS】脱・固定テキスト！Salesforce CMS (拡張CMS) と「データバインディング」でサイトを動的に管理する

LWRサイト運用の鍵となる「拡張CMS」と「データバインディング」の基礎を解説。コンテンツ作成時のチャネル設定の注意点から、詳細ページでの動的表示、コレクションとリピーターを使った一覧表示まで、ノーコードで動的なサイトを作る手法を紹介。

【DIY】LWRサイトのLightning Datatableに「レコードリンク付き」カスタム列を実装する方法

Experience CloudのLWRサイトではまだまだ標準コンポーネントが制限されています。Lightning Datatableを拡張し、レコード詳細ページへ遷移するリンク機能を持ったカスタム列（Custom Types）を実装する方法を解説します。

マーケティング施策

【LWR】Salesforce CMS連携・効果測定機能付きのA/Bテスト用LWCを自作する

LWRサイトには標準のA/Bテスト機能がありません。本記事では、Salesforce CMSの画像と連携し、表示・クリック数をユニークユーザー(UU)ベースで計測できる高機能なA/Bテストコンポーネントの実装方法を解説します。

UX for Admins

LWR専用

【Spring ’26 GA】LWRサイトのプロパティ入力を完全掌握！ExperiencePropertyTypeBundle 実装ガイド

Spring '26で一般提供開始(GA)となるExperiencePropertyTypeBundleを使用して、LWRサイトのLWC設定画面(CPE)をカスタマイズする方法を解説します。schema.jsonとdesign.jsonによる新しい実装パターンを習得しましょう。

LWR以外

LWC設定画面をカスタマイズ！Custom Property Editor (CPE) 実装ガイド【基礎からApex連携まで】

エクスペリエンスビルダーのコンポーネント設定画面を、標準の入力欄からカスタムUI（CPE）に変更する方法を解説します。1つのバナーコンポーネントを作成しながら、スライダーによる数値調整（基礎）と、Apex連携による動的リスト（応用）の実装フローを学びます。

LWR適用が待たれる機能

【@lwc/state連載】第1回：LWCの次世代状態管理入門と基礎概念

Salesforce LWCにおける新しい状態管理アプローチ「@lwc/state」の基本概念を解説します。Lightning Experienceで実際に動かせる完全なサンプルコード（メタデータ含む）を用いて、UIと状態の分離を実践します。

【@lwc/state連載】第2回：コンポーネント間の状態共有（Contextパターンの実践）

LWCの「バケツリレー」にさようなら。@lwc/stateのfromContext APIとプロバイダー/コンシューマーパターンを活用し、複数コンポーネント間で状態をエレガントに同期する実践的な手法をLightning Experience環境で解説します。

【@lwc/state連載】第3回：組み込み状態マネージャーとSalesforceデータ連携の高度な統合パターン

連載最終回。@lwc/stateの真の力を引き出す「組み込み状態マネージャー（stateManagerRecord等）」を活用し、@wireに依存せずに複雑なデータ取得とビジネスロジックをカプセル化する高度なエンタープライズアーキテクチャを解説します。

実践

紅茶ECサイト ☕️

【紅茶ECサイト制作日誌 Vol.2】LWCで「美しい商品詳細ページ」を作る！CMS画像連携とStyling Hooksによるテーマ設計

LWRサイトで標準コンポーネントの限界を超えたい方へ。LWCを使った商品詳細ページの完全カスタム実装手法を解説。CMS画像のパス解決、recordIdの取得、そしてStyling Hooksによるプロ仕様のCSS設計まで、The Royal Brew制作日誌Vol.2としてお届けします。

【紅茶ECサイト制作日誌 Vol.3】「カートに入れる」ボタンをどう実装する？Lightning Message Service (LMS) でコンポーネント間通信を実現する

LWCでECサイトを作る際、商品詳細ページとヘッダーのカートアイコンを連携させるには？親子関係にないコンポーネント間でデータを送受信する「Lightning Message Service (LMS)」の実装手順を解説します。

【紅茶ECサイト制作日誌 Vol.4】「ページ遷移」の正解はこれ！NavigationMixinとパンくずリストの実装ガイド

LWRサイトで standard__namedPage が動かない？正しいページ遷移の方法は comm__namedPage です。NavigationMixinの実装手順、よくある「is not a function」エラーの回避策、そしてSEOに配慮したパンくずリストの構築までを解説します。

【紅茶ECサイト制作日誌 Vol.5】LWCとApexで自作するカスタムAgentforce「執事セバスチャン」の実装ガイド

Agentforceの標準UIではなく、LWCを使って独自の「対話型エージェント（執事）」を実装する方法を解説。標準実装との違いや、Apex経由でAgentを直接呼び出すフルスクラッチ開発の全貌を公開します。

不動産ポータル 🏙️

【B2B不動産ポータル制作日誌 Vol.1】検索UI構築：SLDSグリッドとコンポーネント分割の実践

LWRサイトでB2B不動産ポータルを構築する連載Vol.1。親コンポーネントでのデータ管理、SLDSグリッドを使った3カラム構成のレスポンシブデザイン、standard__recordPage による画面遷移の実装コードを解説します。

【B2B不動産ポータル制作日誌 Vol.2】物件詳細と画像スライダーを自作する：標準コンポーネントの壁を越えるCSS/JS実装

LWRサイト開発連載Vol.2。標準のカルーセルが使えない環境で、タッチスワイプ対応の画像スライダーをLWCで自作する方法を解説。CMS画像のパス生成や、CSSによるサムネイル制御の実装コードを公開します。

【B2B不動産ポータル制作日誌 Vol.3】「ダブルブッキング」を防ぐリアルタイム予約システム：Apexマトリクス生成とLWCモーダル連携

LWRサイト開発連載Vol.3。Apexで生成した「週間空き状況マトリクス」をLWCで表示するリアルタイム予約カレンダーの実装方法。モバイル対応のCSSテクニックや、LightningModalによるバリデーション実装を解説。

【B2B不動産ポータル制作日誌 Vol.4】Agentforceをサイトユーザーに開放する裏技：指定ログイン情報ループバック接続とAgentforce回答解析

LWRサイト開発連載Vol.4。Partner / Customer CommunityライセンスのユーザーがAgentforceを利用できない制限を「指定ログイン情報ループバック接続」で回避する方法と、AIの回答から正規表現で物件IDを抽出してUIに表示する実装テクニックを解説。

【B2B不動産ポータル制作日誌 Vol.5】マイページ構築の鉄則：ダークモード対応を見据えたデータテーブル自作とレスポンシブ実装

LWRサイト開発連載Vol.5（最終回）。標準のlightning-datatableを使わず、あえてSLDSテーブルで実装した理由は「ダークモード対応」でした。サイトの配色設定に追従するテーブル設計と、スマホ用カードUIへの切り替えテクニックを解説します。

タイトルとURLをコピーしました