Aura Components 開発者は語りたい Lightning Web Components のあれこれ/Tokyo Salesforce Developers Meetup 20 - Aura and LWC

アジェンダ
- 自己紹介
- Aura Components（Aura）とは
- Lightning Web Components（LWC）とは
- Aura と LWC の比較（というか感想）
- 最後に

Transcript

1. Aura Components 開発者 は語りたい Lightning Web Components のあれこれ 2019/03/06 Tokyo Salesforce Developers Meetup #20
2. はじめに •私個人の意見です •所属する会社とは関係ありません •ディスっていそうな表現があるかもしれません •愛を込めた前向きな意見とご理解ください •検証ができていない部分が多いです m(-_-)m •Developer Guide ベースの内容です
3. アジェンダ • 自己紹介 • Aura Components（Aura）とは • Lightning Web Components（LWC）とは • Aura と LWC の比較（というか感想） • 最後に
4. 自己紹介
5. 自己紹介 • とよてぃ（@toyoty99） • 趣味 • 何かを作る（工作、料理） • スプラトゥーン２（エンジョイ勢） • 好きな機能 • Lightning アプリケーションビルダー ×２ ×３
6. 自己紹介 • Java 開発者 • Salesforce 開発者 • Apex コード • Visualforce ページ • Aura Components • 大小あわせて 100 コンポーネント以上を開発 • Salesforce とのアライアンス業務
7. Aura Components とは
8. Aura Components とは • Salesforce がオープンソースで開発した Aura とい うフレームワークがベース • JavaVM 上で動作（ローカルで動作可能） • 私たちが使っているのは Salesforce Platform 向け にカスタマイズしたバージョン • Web 標準とアプリ開発を溝を埋めるために提供
9. Aura Components とは • 再利用しやすい • コンポーネント間で連携可能 • Lightning アプリケーションビルダーで配置可能
10. Aura Components とは • インタフェース • コンポーネント • マークアップ（XML＋HTML） • JavaScript（コントローラ、ヘルパ） • CSS • SVG • 設定ファイル • イベント
11. Aura Components とは • 昨日動いていたもので、今日動かない • たびたびの仕様の変更 • Locker Service • そろそろ枯れてきた • 動作が安定 • ベースコンポーネント
12. Aura Components とは • Lightning Web Components 登場！ • 最初の感想 → （T_T） • その後の感想 → わくわく！
13. Lightning Web Components とは
14. Lightning Web Components とは • Aura（5 年前）に比べ、Web 標準が進化 • Web Components 標準（W3C）がベース • ただし • Salesforce 独自の仕様 • Salesforce 独自の実装 • JavaScript（ES6 - ES9）をサポート
15. Lightning Web Components とは • マークアップ（HTML） • JavaScript • ES6 モジュール • イベント • CSS • SVG • 定義ファイル（js-meta.xml）
16. cacheable=true について • @wire （$引数が更新されると rerender）の場合 • cacheable=true じゃないとダメ • 任意のタイミングで呼ぶ場合 • どっちでもいい • 更新系の場合 • cacheable=false じゃないとダメ（DML が実行 されないかもしれないから）
17. IE11 での利用 • パフォーマンスが落ちる • compatibility mode で動作 • JavaScript は ES5 に変換 • Polyfill も利用 • セキュリティの問題 • Lightning Locker Service が無効 • Content Security Policy（CSP） が無効
18. Web 標準とは異なる部分 • Shadow DOM を自動的に作成 • attachShadow() などが不要 • Shadow DOM をネイティブにサポートしていないブ ラウザでも動作 • Shadow DOM 自体を実装？（ネイティブに動作 していない？） • Chome の Developer Tool を使っても Shadow DOM 内部を見ることができない
19. Aura と LWC の比較 移行の話というよりは、LWC のここがいいなーとか の話
20. Aura と LWC の比較 - マークアップ Aura • global, public, private な属性を定義 LWC • マークアップでは属性 を記載しない （JavaScript で @api, @track, private なプ ロパティを定義） ★UI に専念できる ★行ったり来たりしない
21. Aura と LWC の比較 - マークアップ Aura • body もしくは Aura.Component[] 型 の属性でマークアップ を受け渡し LWC • 名前なし もしくは名前 付きの slot で受け渡し ★書き方に一貫性あり ★デフォルト値が指定可 能
22. Aura と LWC の比較 - マークアップ Aura • aura:if コンポーネント LWC • if:true 属性 • if:false 属性 ★ネストが少なくなる ★否定（!, not）が減る
23. Aura と LWC の比較 - マークアップ Aura • aura:iteration コンポ ーネント LWC • for:each ディレクティ ブ • iterator ディレクティ ブ ▼for:each と iterator の 書き方に一貫性がない （覚えにくい）
24. Aura と LWC の比較 - マークアップ Aura • 値変更の伝搬は双方向 LWC • 値変更の伝搬は一方向 （親から子） ★値変更による副作用が 少なくなる
25. Aura と LWC の比較 - JavaScript Aura • 共通的な機能をヘルパ に記載 • 継承することで再利用 LWC • 共通的な機能を ES6 モ ジュールにして別ファ イルに記載 • import することで再利 用 ★継承による複雑性を回 避
26. Aura と LWC の比較 - JavaScript Aura • コンポーネントに aura:id を指定し component.find() で コンポーネントを取得 LWC • this.template.querySe lector()/this.template .querySelectorAll() で コンポーネントを取得 （id 属性は使えない） ★バニラ JavaScript！
27. Aura と LWC の比較 - イベント Aura • コンポーネントと同様 にマークアップで定義 LWC • JavaScript で CustomEvent を継承 して定義（DOM イベン ト） ★ファイルが増えない ◆再利用しにくい？
28. Aura と LWC の比較 - イベント Aura • アプリケーションイベ ントで親子関係にない コンポーネント間でも 連携可能 LWC • サンプルに pub/sub の ライブラリがあるから コピーして使ってね ▼えっ？？
29. Aura と LWC の比較 - CSS Aura • 子コンポーネントに影 響を与える場合がある （それを利用する場合 あり） LWC • 子コンポーネントに影 響を与えない （スコープがコンポー ネント内のみ） ◆副作用がないことはい いことだけど、、、
30. Aura と LWC の比較 - リソース Aura • ltng:require で静的リ ソースを読み込む • afterScriptsLoaded イ ベントで後処理 LWC • loadStyle() もしくは loadScript() で静的リ ソースを読み込む • 戻り値の Promise で後 処理 ★後処理がキレイに書け る
31. Aura と LWC の比較 - リソース Aura • マークアップ内に記載 できず、JavaScript 内 で要素を生成 LWC • マークアップに直接記 載する、もしくは use タグで静的リソースの URL を指定する ★独自のアイコンなどが 作りやすい
32. Aura と LWC の比較 - リソース Aura • グローバル値プロバイ ダ • $Browser • $Label • $Locale • $Resource LWC • import する • ラベル • 国際化プロパティ • 現在のユーザ ID ◆ちょっと面倒
33. 最後に • Lightning Web Components を楽しんでいこうぜ ぃ！