オリジナル記事
Learn MOAR in Summer ’22 with Lightning Web Components
2022年7月31日11:59 pm(PT)までにLearn MOAR Summer ’22のシステム管理者または開発者向けtrailmixをフォローして完了すると、特別なコミュニティバッジを獲得できます。また、5名様に200米ドル分のSalesforce認定バウチャー1枚をゲットできるチャンスがあります。ただし、これには条件があります。
2022年5月18日
2022年7月31日11:59 pm(PT)までにLearn MOAR Summer ’22のシステム管理者または開発者向けtrailmixをフォローして完了すると、特別なコミュニティバッジを獲得できます。また、5名様に200米ドル分のSalesforce認定バウチャー1枚をゲットできるチャンスがあります。ただし、これには条件があります。参加方法や公式ルールについてはTrailhead Questsのページをご確認ください。
さまざまな優れた新機能をリリースし、進化を続けるLightningコンポーネントが、Summer ‘22のリリースで広くご利用いただけるようになります。このようなアップデートによりパフォーマンスが強化され、ユーザのコンポーネントをサードパーティのライブラリに公開したり、新たなモジュールでコンポーネントを拡張したりできるようになります。今回のブログでは、Light DOMや通知モジュールなど、Lightningコンポーネントの開発を強化してくれる新機能をご紹介します。
Light DOMの詳細や機能についてご紹介する前に、まずはShadow DOMについて復習しておきましょう。Lightning Webコンポーネントを構築したことがある方なら、コンポーネントの改ざんに対する保護を提供するShadow DOMをよくご存じでしょう。親やページからのCSSのリークに対する保護や、Shadowツリーの内部でコンポーネントを非表示にするなど、コンポーネントにさまざまなメリットをもたらします。
Shadow DOMにはさまざまな素晴らしいメリットがありますが、コンポーネントをページに表示したいと考える場合もあります。これがLight DOMを導入した理由です。Light DOMによりコンポーネントをページに公開したり、Shadow DOMによる各種の制約を回避したりできます。これによりページのglobal styleの引き継ぎや、サードパーティのライブラリとの統合を簡単に実現できるようになります。
Light DOMとShadow DOMには、注意すべき相違点がいくつかあります。まず、Light DOMでレンダリングする場合、ShadowツリーやShadowルートはありません。すなわち、コンテンツへのアクセス方法が異なります。Shadow DOMの場合、はじめにthis.template.querySelector()を使ってテンプレートを呼び出し、コンポーネントの内部に到達します。一方Light DOMでは、テンプレートやShadowツリーがないため、this.querySelector()を直接使用することができます。
スタイルは確認されないことにも注意しましょう。ページのトップレベルに設定したスタイルはすべて、コンポーネントにリークします。イベントが再度ターゲットとされることはなくなり、イベントにページレベルでアクセスできるようになります。最後に、スロットの要素はShadowツリーのコアで、Light DOMの場合はレンダリングしません。
Light DOMは非常に簡単に利用できます。はじめに、どのコンポーネントをShadowの外側に表示するかを決める必要があります。リスク分析を終えてしまえば、有効化したいLightning WebコンポーネントのHTMLおよびJSファイルをアップデートするのと同じくらい簡単に使えます。Light DOMにはグローバルスイッチはありません。コンポーネントの条件にもとづき、コンポーネント上で有効化する必要があります。
コンポーネントのHTMLファイルでは、render-modeと呼ばれる静的クラスのプロパティを設定し、これを「light」にするだけです。
<template lwc:render-mode='light'> <my-header> <p>Hello World</p> </my-header> </template>
次に、JSファイルでrenderModeプロパティを作成し、これをlightに設定します(デフォルトはshadowです)。
import { LightningElement } from 'lwc'; export default class LightDomApp extends LightningElement { static renderMode = 'light'; // the default is 'shadow' }
2021年後半には、大手ブラウザーベンダーが互換性を破る変更を打ち出し、開発者は.alert()、.confirm()、.prompt()のメソッドを使用できなくなりました。Salesforceはただちに3つの新しい基本コンポーネントを作成し、これらの機能をユーザが引き続き利用できるようにしました。
モジュールには、お使いのLightning Webコンポーネントから直接アクセスできます。たとえば、alertコンポーネントを使用するには、lightning/alertからLightningAlertをインポートするだけです。
LightningAlert.open()を呼び出すだけでalertを開くことができます。
LightningAlert.open({ message: 'this is the alert message', //label defaults to "Alert" variant: 'headerless', }).then((result) => { console.log('alert result', result); });
現在「Developer Preview」と呼ばれる「Mixed Shadow Mode」でコンポーネントを構築することができます。現在、主要ブラウザーのすべてでShadow DOMがサポートされているため、アプリケーション内でできる限りネイティブのShadowを利用することでスピードと効率性を獲得できます。ネイティブのShadow DOMがサポートされていない場合は、Mixed Shadow Modeでは現時点での合成Shadowポリフィルを使用する予定です。
たとえば、コンポーネントshadowSupportModeをanyに設定すると、ブラウザーに対して正しいShadowの実装が選択されます。
import { LightningElement } from 'lwc'; export default class extends LightningElement { static shadowSupportMode = 'any'; }
このコンポーネントは、Chrome、Edge、Firefox、SafariのネイティブのShadow DOMでレンダリングされます。レガシーのEdgeおよびIE11では合成Shadowを使用します。
今回は、Lightning Webコンポーネントの最新情報をすべてご紹介しました。ご質問がありましたら、Trailblazer CommunityのSalesforce Developer Trailblazersグループまでお寄せください。
製品マネージャーとDeveloper RelationsチームがSummer ‘22で最新機能についての情報をご紹介します。Developer Relationsの新しいコンテンツでは、チームメンバーのお気に入りの新機能を取りあげ、スピーディな開発をサポートします。2022年5月20日(金)9:00 a.m.(PST)に開催されるRelease Readiness Liveもお見逃しなく。今週は、Salesforce開発者ブログでも毎日Summer ’22についての記事をお届けしますので、ぜひチェックしてください。
さらに詳しい情報は、Summer ’22 trailmixをご覧ください。
Stephan Chandler-GarciaはSalesforceのシニアデベロッパーエバンジェリストです。主にアプリケーション開発、セキュリティ、Experience cloudを担当しています。Twitterで@stephanwcgをフォローしてください。