Lightning Web Components 開発者ガイドのJavascriptセクションの話。
JavaScript | Lightning Web Components 開発者ガイド | Salesforce Developers
JavaScript コードの共有
異なるコンポーネント間で共通のJavascriptを使用したいときの方法についてでした。
『import myFunction from "./myFunction";』という感じでファイルをインポートすることで実現できるとのことです。同じ階層の場合は、「./xxx」と相対パスで指定できます。
異なる階層の場合は、「c/componentName」とします。
デフォルト関数および変数のエクスポート
こういうことができますって感じかなと思います。
名前付き関数および変数のエクスポート
これもこういうのありますって感じ。
LWC コンパイラでコンポーネントのエントリポイントを解決する方法
普段の開発では気にしなくて良いかもって内容。
追加の JavaScript ファイルでエクスポートにアクセスする方法
サードパーティ JavaScript ライブラリの使用
重要な話。といっても静的リソースにアップロードして、import処理で使えるようにできますってことでした。静的リソースは「from "@salesforce/resourceUrl」で取得できます。
この辺ちゃんと調べないと行けなそうな箇所。
JavaScript での DOM の操作
やり方の話ではなく、基本的にはJavaScriptのDOMの操作は避けましょう。LWCの仕組みで対応しましょうという話。
サンプルコードのD3.js利用
D3.JsをLWCで動かすサンプルが用意されていました。
D3.jsのサイトから必要なファイルをダウンロード。という感じだったのですが、D3.zipのファイルをダウンロードできる箇所にたどり着けず。(D3.jsはあった)。調べたらSalesforceのLWCサンプルアプリにD3アプリがあったのでそっちから取得して動かしてみました。
lwc-recipes/force-app/main/default/lwc/libsD3 at main · trailheadapps/lwc-recipes · GitHub
動かしてみた結果。無事に外部のJavascriptライブラリを動かすことができました。
大事なのは『import { loadScript, loadStyle } from 'lightning/platformResourceLoader';』を宣言すること。これを宣言しないとLightning Web Securityにブロックされます。
そのほかJavascriptのみであれば次のように読み込むこともできるみたいです。
JavaScript ライブラリが Locker 準拠かどうかの確認
ひとまずこういう情報があるという感じ。セキュリティ仕様はまた別セクションが用意されています。
LWS が使用されているサードパーティライブラリの厳格モード
これも省略・・と思ったらけっこうインパクトのある内容でした。サードパーティスクリプトの "use strict"が宣言されている状態の場合、LWS (Lightning Web セキュリティ)にブロックされてしまうとのこと。サードパーティスクリプトがmin.jsとかだと確認できない気はしますが、エラーになるなってときには use strictの有無をチェックすると良いようです。
JavaScript からの API のコール
重要な内容。「デフォルトでは、JavaScript コードからサードパーティ API への WebSocket 接続やコールを実行することはできません。そのためには、サーバを CSP 信頼済みサイトとして追加する必要があります。」とのこと。
CSP 信頼済みサイトはこの設定のこと。
まとめ
LWC開発の中で特に重要となるサードパーティスクリプトの読み込み方法を確認できました。
